Form Widget FAQ

If you are having issues with Elementor forms, read through these frequently asked questions to find common solutions.

How can I save Elementor Form submissions in a database?

By default, Elementor does not save submitted forms. You can save forms by using a third-party plugin such as Lenix ( https://wordpress.org/plugins/lenix-elementor-leads-addon/).

Where have all my files gone after uploading?

Uploaded files are saved in a dedicated directory under ‘uploads/elementor/forms/’.

Why does my file name change after upload?

File names are set randomly, for security reasons (we don’t want users uploading ‘yo_mama.jpg’ now do we?).

How do I customize the date and time design in my forms?

The Date and Time fields can be styled using Custom CSS. On mobile, the browser’s native HTML5 design is used. You can switch on Native HTML5, so the browser’s design is used on all devices. Once you choose Date or Time, you’ll see the Native HTML5 switch.

Why is the Redirect not working?

Redirecting the user to a designated Thank You page is always a good idea. It takes your converted user to the next step, enabling you to upsell, track user funnels, and give your user a good experience.

To activate Redirect: Go to Actions After Submit, add Redirect and paste the full URL of your Thank You page.

Having Problems?

Here are some Troubleshooting ideas:

  1. Make sure you didn’t paste-in an empty character by mistake.
  2. Be sure you pasted the full URL and not a Relative URL. (‘/thank_you/’)
  3. Remove any Javascript from the page and try again. You can check for Javascript errors in the developer tools.
  4. Deactivate other Plugins and switch to theme GeneratePress and see if Redirect works.

Which Custom Messages Can I Modify in Forms?

Forms include 2 different types of messages:

1. Browser messages - these are sent from the browser and can not be customized.

For instance, if you do not enter a correct email address, you will get a message saying

‘Please include an @ in the email address’. These messages appear if the form was not filled in correctly before the form is sent.

2. Server messages are sent from the server. You can format as you need, using custom CSS. These messages appear after the form is sent. There are a few custom options including Success, Error, Invalid, etc. Example: The form was sent successfully!

You can always alter the content of the custom messages by going to Form > Additional Options, switch-on Custom Messages and locate the relevant message.

3. Third-party servers. Error messages coming from Email Marketing service companies such as MailChimp cannot be modified. Please note that some of the error messages sent by these third-party products are shown to the admin only (you and not the subscribers) and this is not something that we can control.

How do I track form submissions and conversions using Google Analytics and Tag Manager?

Add your tracking code to a thank you page and redirect your form to that page after submission.

There is also a Javascript event that the form triggers automatically after submission, which can be used to add to your custom tracking code. These are added externally to Elementor, using functions.php for example.

Here is a base snippet you can build on:

//The event is submit_success so you can catch it for example:
jQuery( document ).ready(function( $ ){
	$( document ).on('submit_success', function(){
		// form has been submitted do your tracking here...
	});
});

How can I integrate another service with webhook and field mapping? 

Elementor has a webhook option under Actions After Submit. By default, our webhook sends each field with the label as a name, or all fields in a single array when Advanced Data is on.

To control the field names, give your form fields a custom ID and use the following snippet. Be sure to update the form name and your webhook URL.

Below is an example of customizing your webhook, where field IDs are sent instead of names.

add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
	//make sure its our form
	$form_name = $record->get_form_settings( 'form_name' );
	if ( 'MY_FORM_NAME' !== $form_name ) {
		return;
	}
	
	$raw_fields = $record->get( 'fields' );
	$fields = [];
	foreach ( $raw_fields as $id => $field ) {
		$fields[ $id ] = $field['value'];
	}

	wp_remote_post( 'HTTP://YOUR_WEBHOOK_URL', [
		'body' => $fields,
	]);
});

How can I troubleshoot issues with forms which are not sent?

This happens generally because of server errors or fields not properly mapped. For further information, please read this guide:

https://docs.elementor.com/article/202-form-server-error