If you're having trouble with Elementor forms, read this FAQ for common solutions.
How can I save Elementor form submissions to a database?
By default, Elementor doesn't save submitted forms. You can save forms using a third party plugin like Elementor DB contact form.
Where have all my files gone after uploading?
The uploaded files are saved in a dedicated directory at 'uploads / elementor / forms /'.
Why does my file name change after upload?
The file names are set randomly, for security reasons (we don't want users to load 'yo_mama.jpg' now, do we?).
I set the number of Max. Files, but I still can't upload as many files as the number I set. Why?
This setting does not override your host's server settings. This option limits the number of files that can be uploaded from the form itself, but only if this limit value does not exceed the PHP "max_file_uploads" value. If you need more, please contact you to increase the value of "max_file_uploads" for your site.
How do I customize the date and time design on my forms?
Date and time fields can be styled with custom CSS. On mobile devices, the browser's native HTML5 layout is used. You can enable native HTML5, so the browser layout is used on all devices. Once you choose Date or Time, you will see the native HTML5 switch.
Why can't I see the date / time field placeholder on some mobile browsers?
Labels for date / time entries are not properly supported by all browsers, especially mobile device browsers. Because of this, the placeholder may not always be visible. This is not an Elementor specific issue. This is a well known development problem. There are no perfect solutions to solve this, but you can add code like the following to the Advanced tab> Custom CSS section of your form widget:
input [type = "time"]: after {color: #aaa; content: attr (placeholder); } input [type = "date"]: after {color: #aaa; content: attr (placeholder); }
Note: The downside to using this code is that the placeholder will still appear, even after selecting the time and date.
How can I put dynamic metadata in a form field?
- Click on the form field Advanced tab as shown below.
- Click on the dynamic icon to the right of the Default value field.
- Select the desired metadata from the drop-down list.
Why is 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, allowing you to make upsells, keep track of user funnels, and provide you with a good experience.
To activate the redirect: Go to Actions after submitting, add the redirect and paste the full URL of your thank you page.
Having problems?
Here are some troubleshooting ideas:
- Make sure you don't paste an empty character by mistake.
- Make sure to paste the full URL and not a relative URL. ('/Thank you/')
- Please remove any JavaScript from the page and try again. You can look for Javascript errors in the developer tools.
- Disable other plugins and switch to GeneratePress theme and see if Redirect works.
What custom messages can I modify in forms?
The forms include 3 different types of messages:
- Browser messages - they are sent from the browser and cannot be customized. For example, if you do not enter a correct email address, you will receive a message saying "Please include an @ in email address." These messages appear if the form was not completed correctly before submitting it.
- Server messages they are sent from the server. You can format as you need, using custom CSS. These messages appear after the form is submitted. There are some custom options including Success, Error, Invalid, etc. Example: The form was submitted successfully! You can always modify the content of custom messages by going to Form> Additional options, on Personalized messages and locate the relevant message.
- Third party servers. Error messages that come from email marketing service companies like MailChimp cannot be modified. Please note that some of the error messages sent by these third party products are displayed only to the administrator (you and not the subscribers) and this is not something we can control.
How do I track form submissions and conversions with 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 fires 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's a base snippet you can build on:
// The event is submit_success so you can catch it for example: jQuery (document) .ready (function ($) {jQuery (document) .on ('submit_success', function () {// form has been submitted do your tracking here ...});});
Be sure to replace the above comment "// form has been submitted, track here ..." with your custom tracking code. Otherwise the snippet will do nothing.
How can I integrate another service with webhook and field mapping?
Elementor has a webhook option in Actions after submitting. By default, our webhook sends each field with the label as the name, or all the fields in a single array when the Advanced data option is activated.
To control field names, give your form fields a custom ID and use the following snippet.
Make sure to update the form name and the URL of your webhook.
Below is an example of how to customize 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'];} YOUR wp_remote_post ('HTTP_WE'); ['body' => $fields,]);});
How can I troubleshoot forms not submitting?
This generally occurs due to server errors or fields that are not mapped correctly. To learn more, read this guide:
https://docs.elementor.com/article/202-form-server-error
"There is something wrong. The form is not valid »
If you receive an error message such as' There is something wrong. The form is invalid ”, this could be for a number of reasons.
- One reason is that the form has been added as a widget within another widget via a shortcode. This is an unofficial and unreliable method of adding a form to a page, so it should be avoided.
Some users only receive a red X after submitting a form. Why?
MailChimp's integration with the Elementor form widget only acts as a 'sign up form'. It is not possible to re-subscribe via an Elementor form widget as the MailChimp API does not allow it. Resubscription to a list is done only through the registration forms hosted in MailChimp. This same situation can be applied to other services that are integrated with forms.
To handle these types of users, you can put a note somewhere below the form that mentions that if they were already enrolled in the list, then they cannot re-subscribe this way. Instead, provide them with a link to redirect them to MailChimp-hosted sign-up forms, so they can re-subscribe there.
Learn more about the form widget and its options here.
