The form was sent successfully elementor как изменить

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?

With the Elementor Form Submissions feature you can backup your form submissions data, access it whenever you want, and manage it all from one place. Having your submissions info allows you to gather insights, analyze a campaign’s data, or simply manage your submissions from within your WordPress dashboard.

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?).

I’ve set the number of Max. Files, but I’m still not able to upload as many files as the number I set. Why?

This setting does not override your host’s server setting.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’s “max_file_uploads” value. If you need more, contact your to have the “max_file_uploads” value raised for your site.

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 can’t I see the placeholder of the date/time field on some mobile browsers?

The labels for date/time inputs are not properly supported by all browsers, especially by the browsers of mobile devices. This is why the placeholder may not always be visible.

This is not an issue that is specific to Elementor. This is a well-known development issue. There are no perfect solutions for solving this, but you can add code like the follow 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 drawback to using this code is that the placeholder will still appear, even after selecting the time and the date. 

How can I place dynamic meta data into a form field?

1. Click the form field’s Advanced tab as shown below. 
2. Click the dynamic icon to the right of the Default Value field. 
3. Select the desired meta data from the dropdown list.

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 3 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( $ ){
	jQuery( document ).on('submit_success', function(){
		// form has been submitted do your tracking here...
	});
});

Make sure you replace the comment above “// form has been submitted do your tracking here … ” with your custom tracking code. Otherwise, the snippet won’t do anything.

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.

“There’s something wrong. The form is invalid”

If you receive an error message such as “There’s something wrong. The form is invalid”, this could be due to several reasons.

• One reason is that the form has been added as a widget inside another widget via a shortcode. This is an unofficial and unreliable method of adding a form to a page, so this should be avoided.

Some Users Only Receive a Red X After Submitting A Form. Why?

MailChimp integration with the Elementor form widget only acts as a ‘sign up form’. Re-subscription via an Elementor form widget is not possible as the MailChimp API does not allow this. Re-subscription to a list is only through MailChimp hosted signup forms. This same situation may apply to other services that integrate with forms.

To handle these types of users, you can put a note somewhere below the form that mentions that if they were previously signed up to the list, then they cannot resubscribe this way. Give them a link to redirect them to the MailChimp hosted signup forms instead, so they can resubscribe there.

Learn more about the Form Widget (Pro)

When you have a business website, forms are a staple. They make it easier for customers to get in contact with you and provide important information and feedback. However, figuring out how to create them can be challenging.

If you’re looking for a simple, straightforward strategy, we recommend using Elementor forms. This popular page builder provides solutions for building various forms that are both aesthetically pleasing and easy to use.

In this post, we’ll discuss why you might want to create Elementor forms. Then, we’ll walk you through the process of doing so, and cover some helpful addons and troubleshooting tips. Let’s jump in!

Check Out Our Video Guide to Elementor Forms

Why Create Elementor Forms

There are many advantages to creating forms for your WordPress site. For starters, you can provide your visitors with a quick and simple method of communicating with you. Additionally, you can use them to generate leads and acquire important information from your audience.

Forms can also be useful tools for registering your users and accepting payments. However, if you want to add a form to your WordPress site, you need to use a plugin. Alternatively, you could use a page builder like Elementor.

Elementor lets you build stunning forms without touching a line of code. You can use the drag-and-drop editor to create responsive forms that match your branding and website aesthetic.

You can also choose from multiple types of forms, including:

• Elementor Contact Forms: you can use this feature to build a simple form for users to get in touch with you.
• Elementor Gravity Forms: this Gravity Forms widget gives you more flexibility in customizing and styling your forms.
• Elementor Register Forms: this feature lets you set up user registration forms on your website.

As you can see, each of these forms has its own specific use case and can help enhance the functionality of your site. Next, we’ll show you how to build a contact form using Elementor.

Want to use Elementor forms to connect with your customers? ✅ This guide is for you 🤝Click to Tweet

How To Create an Elementor Contact Form in WordPress (in 6 Steps)

Now that we understand more about why you might want to use Elementor forms, let’s look at how you can create one in a few simple steps. Note that for this tutorial, we’ll assume you already have Elementor installed and activated on your website.

There is a free tool and paid plugin. To access the form features, you’ll need the premium version.

Step 1: Add the Elementor Contact Widget

To get started, navigate to the page or post where you want to insert your contact form. Then, click on the Edit with Elementor button at the top of the screen:

This will launch the Elementor editor interface. From the widgets on the left, search for and select the Form widget:

Then, you can drag and drop the widget onto your page. This will insert a standard contact form.

Step 2: Set Up Your Contact Form Fields

Once you place your contact form on the page, there are a handful of settings for you to configure. For now, let’s focus on setting up the form fields.

You can edit the basic form fields by clicking on the widget and customizing the text (if you want to change any of the default options). If you want to add additional fields, you can do so by selecting Add Item:

You can select the type of field you want to add from the drop-down list. Next, you can add a label, which is the name of the form field. This shows your visitors what input is expected.

For the Placeholder option, you can customize the text that appears in the form field before the user enters their information. You can use this to give visitors examples of the data you want them to provide.

Additionally, you can choose to enable the Required setting and modify the column width. You can also click on the Buttons panel to customize the appearance of your form buttons. You can change the sizing as well as the font and colors.

Step 3: Configure Your Form Submissions

After you’re finished creating the form fields, the next step is to configure your form submission settings. You can navigate to Email within the Elementor editor to access various options.

For example, you can input your email address in the To field where you want the submissions delivered. You can enter multiple email addresses if you wish:

You can also customize the subject of the email and message. When you’re done configuring all of the options, make sure to save your changes.

Step 4: Customize Your Contact Form Messaging

If you want to further personalize your contact form, you can do so by enabling custom messaging. Select Additional Options, then move the toggle switch for Custom Messaging to Yes:

There are four types of messages you can modify:

• Success Message: this appears once a user submits the form
• Error Message: this will come up if there’s an issue during the submission process
• Required Message: to inform users that a particular field wasn’t completed
• Invalid Message: to let users know that something with the form submission is off

You can customize these messages to match your brand’s voice and style. For example, you can modify the wording to add a bit of personality.

Step 5: Styling Your Elementor Contact Form

Once you have the basic text and fields of your form taken care of, you can begin styling the design of your Elementor contact form. For example, you may want to make sure that it matches your branding.

To get started, you can click on the Style tab at the top of the widget editor:

Here, you’ll find a wide variety of options and settings that you can use to customize the design of your contact form. For instance, you can adjust the spacing and padding, as well as change the colors, size, labels, and buttons.

Step 6: Save and Publish Your Form

When you’re satisfied with the look and contents of your Elementor contact form, the only thing left to do is to save and publish it. You can do so by selecting the Publish button at the bottom left side of the screen.

That’s it! Then you can preview your contact form on the front end to confirm that it looks as you want it to.

Top Addons for Elementor Forms

Out of the box, the Elementor page builder comes with plenty of options for building forms for your WordPress website. However, you might also consider adding plugins to help extend the functionality of your forms. Let’s take a look at some options.

Master Addons for Elementor

The Master Addons for Elementor plugin is a freemium tool that provides a collection of helpful tools for enhancing the page builder and, in turn, your website. It includes the following features:

• Header, footer, and comment form builder
• Mega Menu builder
• Image hover effects
• Display conditions

It’s also compatible with a wide variety of form plugins. This includes Contact Form 7, Ninja Forms, WP Forms, and Caldera Forms. To access all of the plugin’s features, you’ll need to purchase the pro version, which is available for $39 per year.

The Plus Addons

Another handy tool you can use with Elementor is Plus Addons. This plugin is packed with over 8,000 customization options and over 300 User Interface (UI) blocks that can help you create and design your pages and forms with ease.

Its features include:

• Icon boxes
• Map sections
• Forms
• Pricing tables

There are also more than 18 templates you can choose from. These were designed specifically for certain types of businesses, including agencies, restaurants, salons, and more.

There is a free version available. However, to leverage the entire suite of useful features, we recommend purchasing a premium license, available for $39 per year.

Additional Tips and Tricks for Creating Elementor Forms

If you want to create Elementor contact forms for your WordPress site without paying for a premium license, there are ways you can go about it. Doing so will require you to pair the page builder with another WordPress form plugin, such as WPForms or Formidable Forms.

Let’s say you opt for Formidable Forms. Once you install and activate the plugin on your site, you can navigate to Formidable > Forms > Add New:

Next, you can select Contact Form from the list of options, and choose from a handful of premade templates. When you’re done building your form, browse to the page you want to place it on and launch the Elementor editor interface.

From the left-hand panel, search for and select the Formidable Forms widget. You can adjust the format, colors, buttons, text, etc.:

When you’re done, you can save and publish your changes. This method requires a bit more time and effort than would be necessary with the Elementor Pro plugin. However, it can help save you some money if you don’t want to purchase a premium plan.

Troubleshooting Elementor Forms

Elementor contact forms are pretty straightforward and easy to use. However, you may run into issues when using it. One of the most common problems that people report is undelivered emails.

Elementor uses the wp_mail function to distribute its emails. This means that your hosting provider takes the sent email and delivers it.

However, some hosts disable the PHP function that is typically used for sending emails, which is why this issue may occur. To resolve this error, we recommend getting in touch with your hosting provider and asking them to enable the send_mail function.

Alternatively, you can use a Simple Mail Transfer Protocol (SMTP) server. This is an email server that will route your email in forms to the inbox of your customers, using an external source like Gmail. This can reduce the chances of your emails ending up in spam folders. To set up SMTP, you can use a plugin such as WP MAIL SMTP.

Learn why you might want to create Elementor forms (and helpful addons to level them up!) in this guide ⬇️Click to Tweet

Summary

Forms play a pivotal role in websites. They enable customers to get in touch with you, register for an account, submit payment information, and much more. However, figuring out how to design aesthetically pleasing forms for your site can be challenging. Fortunately, Elementor makes it easy.

Once you add the Elementor form widget to your page, you can set up your fields and configure the form settings. You can also customize the design of your form so that it aligns with your branding.

Do you have any questions about creating Elementor forms in WordPress? Let us know in the comments section below!

When you have a business website, forms are a staple. They make it easier for customers to get in contact with you and provide important information and feedback. However, figuring out how to create them can be challenging.

If you’re looking for a simple, straightforward strategy, we recommend using Elementor forms. This popular page builder provides solutions for building various forms that are both aesthetically pleasing and easy to use.

In this post, we’ll discuss why you might want to create Elementor forms. Then, we’ll walk you through the process of doing so, and cover some helpful addons and troubleshooting tips. Let’s jump in!

Check Out Our Video Guide to Elementor Forms

Why Create Elementor Forms

There are many advantages to creating forms for your WordPress site. For starters, you can provide your visitors with a quick and simple method of communicating with you. Additionally, you can use them to generate leads and acquire important information from your audience.

Forms can also be useful tools for registering your users and accepting payments. However, if you want to add a form to your WordPress site, you need to use a plugin. Alternatively, you could use a page builder like Elementor.

Elementor lets you build stunning forms without touching a line of code. You can use the drag-and-drop editor to create responsive forms that match your branding and website aesthetic.

You can also choose from multiple types of forms, including:

• Elementor Contact Forms: you can use this feature to build a simple form for users to get in touch with you.
• Elementor Gravity Forms: this Gravity Forms widget gives you more flexibility in customizing and styling your forms.
• Elementor Register Forms: this feature lets you set up user registration forms on your website.

As you can see, each of these forms has its own specific use case and can help enhance the functionality of your site. Next, we’ll show you how to build a contact form using Elementor.

Want to use Elementor forms to connect with your customers? ✅ This guide is for you 🤝Click to Tweet

How To Create an Elementor Contact Form in WordPress (in 6 Steps)

Now that we understand more about why you might want to use Elementor forms, let’s look at how you can create one in a few simple steps. Note that for this tutorial, we’ll assume you already have Elementor installed and activated on your website.

There is a free tool and paid plugin. To access the form features, you’ll need the premium version.

Step 1: Add the Elementor Contact Widget

To get started, navigate to the page or post where you want to insert your contact form. Then, click on the Edit with Elementor button at the top of the screen:

This will launch the Elementor editor interface. From the widgets on the left, search for and select the Form widget:

Then, you can drag and drop the widget onto your page. This will insert a standard contact form.

Step 2: Set Up Your Contact Form Fields

Once you place your contact form on the page, there are a handful of settings for you to configure. For now, let’s focus on setting up the form fields.

You can edit the basic form fields by clicking on the widget and customizing the text (if you want to change any of the default options). If you want to add additional fields, you can do so by selecting Add Item:

You can select the type of field you want to add from the drop-down list. Next, you can add a label, which is the name of the form field. This shows your visitors what input is expected.

For the Placeholder option, you can customize the text that appears in the form field before the user enters their information. You can use this to give visitors examples of the data you want them to provide.

Additionally, you can choose to enable the Required setting and modify the column width. You can also click on the Buttons panel to customize the appearance of your form buttons. You can change the sizing as well as the font and colors.

Step 3: Configure Your Form Submissions

After you’re finished creating the form fields, the next step is to configure your form submission settings. You can navigate to Email within the Elementor editor to access various options.

For example, you can input your email address in the To field where you want the submissions delivered. You can enter multiple email addresses if you wish:

You can also customize the subject of the email and message. When you’re done configuring all of the options, make sure to save your changes.

Step 4: Customize Your Contact Form Messaging

If you want to further personalize your contact form, you can do so by enabling custom messaging. Select Additional Options, then move the toggle switch for Custom Messaging to Yes:

There are four types of messages you can modify:

• Success Message: this appears once a user submits the form
• Error Message: this will come up if there’s an issue during the submission process
• Required Message: to inform users that a particular field wasn’t completed
• Invalid Message: to let users know that something with the form submission is off

You can customize these messages to match your brand’s voice and style. For example, you can modify the wording to add a bit of personality.

Step 5: Styling Your Elementor Contact Form

Once you have the basic text and fields of your form taken care of, you can begin styling the design of your Elementor contact form. For example, you may want to make sure that it matches your branding.

To get started, you can click on the Style tab at the top of the widget editor:

Here, you’ll find a wide variety of options and settings that you can use to customize the design of your contact form. For instance, you can adjust the spacing and padding, as well as change the colors, size, labels, and buttons.

Step 6: Save and Publish Your Form

When you’re satisfied with the look and contents of your Elementor contact form, the only thing left to do is to save and publish it. You can do so by selecting the Publish button at the bottom left side of the screen.

That’s it! Then you can preview your contact form on the front end to confirm that it looks as you want it to.

Top Addons for Elementor Forms

Out of the box, the Elementor page builder comes with plenty of options for building forms for your WordPress website. However, you might also consider adding plugins to help extend the functionality of your forms. Let’s take a look at some options.

Master Addons for Elementor

The Master Addons for Elementor plugin is a freemium tool that provides a collection of helpful tools for enhancing the page builder and, in turn, your website. It includes the following features:

• Header, footer, and comment form builder
• Mega Menu builder
• Image hover effects
• Display conditions

It’s also compatible with a wide variety of form plugins. This includes Contact Form 7, Ninja Forms, WP Forms, and Caldera Forms. To access all of the plugin’s features, you’ll need to purchase the pro version, which is available for $39 per year.

The Plus Addons

Another handy tool you can use with Elementor is Plus Addons. This plugin is packed with over 8,000 customization options and over 300 User Interface (UI) blocks that can help you create and design your pages and forms with ease.

Its features include:

• Icon boxes
• Map sections
• Forms
• Pricing tables

There are also more than 18 templates you can choose from. These were designed specifically for certain types of businesses, including agencies, restaurants, salons, and more.

There is a free version available. However, to leverage the entire suite of useful features, we recommend purchasing a premium license, available for $39 per year.

Additional Tips and Tricks for Creating Elementor Forms

If you want to create Elementor contact forms for your WordPress site without paying for a premium license, there are ways you can go about it. Doing so will require you to pair the page builder with another WordPress form plugin, such as WPForms or Formidable Forms.

Let’s say you opt for Formidable Forms. Once you install and activate the plugin on your site, you can navigate to Formidable > Forms > Add New:

Next, you can select Contact Form from the list of options, and choose from a handful of premade templates. When you’re done building your form, browse to the page you want to place it on and launch the Elementor editor interface.

From the left-hand panel, search for and select the Formidable Forms widget. You can adjust the format, colors, buttons, text, etc.:

When you’re done, you can save and publish your changes. This method requires a bit more time and effort than would be necessary with the Elementor Pro plugin. However, it can help save you some money if you don’t want to purchase a premium plan.

Troubleshooting Elementor Forms

Elementor contact forms are pretty straightforward and easy to use. However, you may run into issues when using it. One of the most common problems that people report is undelivered emails.

Elementor uses the wp_mail function to distribute its emails. This means that your hosting provider takes the sent email and delivers it.

However, some hosts disable the PHP function that is typically used for sending emails, which is why this issue may occur. To resolve this error, we recommend getting in touch with your hosting provider and asking them to enable the send_mail function.

Alternatively, you can use a Simple Mail Transfer Protocol (SMTP) server. This is an email server that will route your email in forms to the inbox of your customers, using an external source like Gmail. This can reduce the chances of your emails ending up in spam folders. To set up SMTP, you can use a plugin such as WP MAIL SMTP.

Learn why you might want to create Elementor forms (and helpful addons to level them up!) in this guide ⬇️Click to Tweet

Summary

Forms play a pivotal role in websites. They enable customers to get in touch with you, register for an account, submit payment information, and much more. However, figuring out how to design aesthetically pleasing forms for your site can be challenging. Fortunately, Elementor makes it easy.

Once you add the Elementor form widget to your page, you can set up your fields and configure the form settings. You can also customize the design of your form so that it aligns with your branding.

Do you have any questions about creating Elementor forms in WordPress? Let us know in the comments section below!

Sometimes I would like to hide the Elementor form after submission. However, the the default Elementor behavior is resetting the whole form with a successful message below the form. Let’s modify this by some simple jQuery codes.

Elementor Form jQuery Events

First of all, we must need to know what event available on the Elementor form. From the developer tools, we could see there are form_destruct, submit, and submit_success.

Obviously we will listen to submit_success event and hide the form. Bare in mind that it’s a jQuery event, so we will need to use jQuery .on() method to attach our custom event handler. (jQuery .on() documentation)

Assign Form Id

Before the coding part, I did assigned a form Id if you noticed my previous screenshot. You could do this as well, just simply put in a unique Id in Additional Options of the Form element.

Start Coding

I will use Elementor Custom Code to insert my jQuery codes this time. Heads to Elementor > Custom Code, and Add a new Custom Code.

Location I set as </body> End and Priority I leave it as 1

And the jQuery will be as simple as below. Basically just hide some elements when an event triggered.

<script>
	
	 (($)=>{
		 
		 $(document).ready(()=>{
			 
			 	// on submit_success event triggered on my specific form #itchy002
				$(document).on('submit_success', '#itchy002',(e)=>{
						// hide all fields in this form
						$('#itchy002').find('.elementor-form-fields-wrapper').hide()
				})
			 
		 })
		 
	 })(jQuery)

</script>

Please remember change the form Id to yours.

I set this custom code to only display on specific page which my form located at. You could adjust as you need by editing the conditions.

Alright, after published, you can inspect the form again and check if the custom event handler attached successfully. Mine is attaching fine!

Result

Try to submit and taa-daa~~ This is what I want!

Create Post with MetFormEntries