- \n
- Allow visitors to sign up to a mailing list.<\/li>\n\n\n\n
- Add the user to a 3rd party marketing automation tool such as MailChimp.<\/li>\n\n\n\n
- Give the user a free gift such as a worksheet, ebook, or white paper for joining.<\/li>\n<\/ul>\n\n\n\n
Drag And Drop A Form Widget<\/h2>\n\n\n\n
- \n
- Open the Elementor Editor.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-create-the-form.png\")
<\/li>\n\n\n\n - Drag the form widget to the canvas.
The Form widget immediately creates a basic form which already contains a name field, an email address field, a message textarea, and a submit button.<\/li>\n<\/ol>\n\n\n\nContent > Form Fields<\/h2>\n\n\n\n
- \n
- In the Form options panel<\/em>, in the Form Fields<\/em> section give the form a name.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/2-name-it-subscribe-form.png\")
We’ll name this Subscribe form<\/strong>.
Three fields were automatically generated when the widget was inserted: Name<\/strong>, Email<\/strong>, and Message<\/strong>.![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/3-Click-the-X.png\")
<\/li>\n\n\n\n- For a typical lead generation form, there is no need for a message field, so delete it by clicking the X<\/strong> at the far right of the field option, leaving just the name and email fields.
If you want to add new fields, just click the Add Item<\/strong> button to do so, but we only need two fields for this particular example.<\/li>\n<\/ol>\n\n\n\nNow let\u2019s take a closer look at the options available for each field.<\/p>\n\n\n\n
\n\n\n\nA Field’s Content Tab
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/4-the-fields.png\")
<\/h3>\n\n\n\nType <\/strong>– Under the field\u2019s Content<\/em> tab, you can select the Type <\/em>of field. The Name field, for example, is a Text<\/em> field type, which simply allows a user to type any standard text into a one-line field. The Email field, on the other hand, has a type of Email<\/em>, which only accepts text that is in the appropriate email format, containing both an @ and a dot.<\/p>\n\n\n\n
Label<\/strong> – Next is the Label<\/em> option. Although it is not required, we recommend you provide a Label, even if you decide to hide it for display purposes, because this text is displayed in the email you receive when someone submits the form.<\/p>\n\n\n\n
Placeholder <\/strong>– Next is the Placeholder<\/em> option. This is an optional bit of text that helps the visitor understand what to place in this field.<\/p>\n\n\n\n
Required <\/strong>– Now, set the Required <\/em>toggle to Yes<\/strong> if you want the field to be required, or No<\/strong> if not. For most subscription forms, both the Name and Email fields are usually necessary, so set both of these to Yes<\/strong>. At the bottom of the Form Fields section, you can choose to Show or Hide the Required Mark<\/em>. Set it to Show<\/strong> if you want the typical red asterisk next to the field labels. Just above the Required Mark option is the option to show or hide the Labels<\/em> themselves. Of course, if you hide the Labels, then the Required Marks will be hidden as well, since they are attached to the Labels.<\/p>\n\n\n\n
Column Width<\/strong> – In many cases, a thin subscription form is desirable, so instead of taking up so much vertical space, place the name and email fields on the same line. To do this, click the Name<\/strong> field, which opens up the field\u2019s options. Change the field\u2019s Column Width<\/em> from 100% to 50%. Now do the same for the Email<\/strong> field. Once both fields\u2019 column widths are set to 50%, the two fields should be on one row, side by side.<\/p>\n\n\n\n
\n\n\n\nA Field’s Advanced Tab<\/h3>\n\n\n\n
Now let\u2019s quickly take a look at the fields\u2019 Advanced<\/em> tab. In most cases, you will not need to make any adjustments here.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/5-The-advanced-tab.png\")
<\/p>\n\n\n\nBut one thing of importance to note is that the ID<\/em> field here should never be blank. If, for some reason it is blank, type an ID name manually. Without an ID, the form won\u2019t work properly. You\u2019ll notice that the Shortcode<\/em> contains the ID name within it. The Shortcode is the code you can copy\/paste into the emails that get sent if you wish to have that particular field data sent out. By default, emails send all field data, by using the auto-generated shortcode [all-fields]<\/em>. But in some situations, you may not wish to have every field\u2019s data sent within the email. In that case, you would manually enter the shortcodes of the fields you do want included.<\/p>\n\n\n\n
For a normal subscription form, you would leave these Advanced options as they are, assuming they each have an ID assigned.<\/p>\n\n\n\n
See the Form Fields<\/a> documentation for additional details on working with field data.<\/p>\n\n\n\n
Content > Buttons<\/h2>\n\n\n\n
Now set the options for the form\u2019s buttons. Most simple forms, such as this one, only have one button – the Submit<\/em> button. If you are creating a multi-step form, however, you would also have a button for each step.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/6-The-button-settings.png\")
<\/p>\n\n\n\nFirst, choose the Size<\/em> of the form\u2019s Submit button. This option gives you a few \u201cpreset\u201d styles which set the buttons font size and paddings, primarily. You can adjust these later in the widget\u2019s style tab, but if you are looking for a quick setting, this would be the place to make that choice.<\/p>\n\n\n\n
Next, you\u2019ll set the button\u2019s Width<\/em>. For small forms, the 20% option is usually a good choice, but use whichever width works best for your particular style.<\/p>\n\n\n\n
Since this form isn\u2019t a multi-step form, we can skip the Multi-step button options. In the Submit<\/em> field, type the button\u2019s text. Default is Send, but other popular choices might be Subscribe, Get Started, Sign Up, etc.<\/p>\n\n\n\n
Next, choose an Icon<\/em> to display next to the Submit text on the button if you like. If you choose to display an icon, two new options will appear. Icon Position<\/em> allows you to choose whether to place the icon before or after the Submit text, and Icon Spacing<\/em> lets you adjust the amount of space between the icon and the Submit text.<\/p>\n\n\n\n
In some cases, you may want to add a unique Button ID<\/em>, which can be used in custom code when needed. Normally, this is left blank, and you should leave it blank for this demonstration.<\/p>\n\n\n\n
See the Submit Button<\/a> documentation for additional details on all the button options.<\/p>\n\n\n\n
Content > Actions After Submit<\/h2>\n\n\n\n
This section allows you to add actions that will be performed after a visitor submits the form. The primary, default action is to send an email with the form\u2019s data to someone. Other typical actions might be to redirect the user to a particular page or connect to a 3rd-party marketing platform such as Mailchimp. For this example, we\u2019ll do each of those actions.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/7-actions-after-submit.png\")
<\/p>\n\n\n\nFor details, see Define what happens after visitors submit a form<\/a>.<\/p>\n\n\n\n
Email Action<\/h3>\n\n\n\n
As mentioned, the Email<\/em> action is already added for us by default. You can see it in the Add Action<\/em> area. If you don\u2019t want the form submission data to be emailed to anyone, you could delete this action by clicking the X<\/strong> next to Email. Of course, we normally want to email the data, so leave this action in place. Now notice that you have an Email tab under the Actions After Submit tab. Every action added will create its own options tab beneath this.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/8-email-fields.png\")
<\/p>\n\n\n\nThe Email<\/em> tab has a number of options. See the Send Results Via Email to the Site Administrator(s)<\/em> section of the Actions After Submit<\/a> documentation for full details. By default, the settings here will send an email with the data from all form fields to the site administrator. You can adjust who the form goes to, what data is included, and more.<\/p>\n\n\n\n
MailChimp Action<\/h3>\n\n\n\n
Once you\u2019ve determined that these settings are as you want them to be, it\u2019s time to add another action. This time, open the Actions After Submit<\/em> tab again, and click in the field next to Email to open the dropdown selections to choose from. For purposes of this example, choose Mailchimp. This adds a new tab below the Email tab called MailChimp<\/em>. Click that tab to open it.<\/p>\n\n\n\n
Assuming you haven\u2019t already set up your MailChimp integration, you\u2019ll receive this message:<\/p>\n\n\n\n
Set your MailChimp API Key in the Integrations Settings. You can also set a different MailChimp API Key by choosing “Custom”.<\/em><\/p>\n\n\n\n
Just click the Integrations Settings<\/em> link to open a new browser tab where you can enter your MailChimp API key. <\/p>\n\n\n\n
Once the key is set there, you will be able to select an Audience<\/em> list from the dropdown in the form\u2019s MailChimp tab. Doing so will automatically add the user\u2019s name and email address to your MailChimp list when they submit the form. If there are any problems with the integration, please see the integration document for the 3rd party platform you are using. In this example, you would read the MailChimp Integration<\/a> document for tips on troubleshooting problems with this integration.<\/p>\n\n\n\n
Redirect Action<\/h3>\n\n\n\n
Finally, let\u2019s add one last Action After Submit. Open the Action After Submit<\/em> tab, click the field and select Redirect<\/em> from the dropdown. This adds a new Redirect tab beneath.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/9-redirect-options.png\")
<\/p>\n\n\n\nClick the Redirect<\/em> tab to open its options and enter the URL<\/strong> of the page you want to redirect the user to once the form is submitted. This can be any page you have previously created for this purpose. For this example, it would be a page that thanks the user for signing up, and supplies the user with the freebie that you are offering or information on how to download it.<\/p>\n\n\n\n
Content > Additional Options<\/h2>\n\n\n\n
Because this is not a multi-step form, skip the Steps Settings<\/em> tab and open the Additional Options<\/em> tab. The Form ID<\/em> is optional, but if you need to target this form with an ID for some custom code, you can enter a unique ID here. Otherwise, leave it blank.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/10-Additional-options.png\")
<\/p>\n\n\n\nSet Custom Messages<\/em> to Yes<\/strong> to be able to enter specific wording desired for each of the messages that might be given to a user. For example, you might want to change \u201cAn error has occurred\u201d to read instead, \u201cSorry, but an error has occurred.\u201d Please note that the Custom Messages are fallback messages when the browser does not display its own error. Very often, users will never see these specific messages.<\/em><\/p>\n\n\n\n
See Additional Options<\/a> documentation for full details.<\/p>\n\n\n\n
Style<\/h2>\n\n\n\n
Now that you have your form in working order, it\u2019s time to style it a bit. Click the widget\u2019s Style<\/em> tab.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/11-Style-form-1.png\")
<\/p>\n\n\n\nEach portion of the form can be styled, including the Form<\/em> itself, the Form Fields<\/em>, the Submi<\/em>t and Multi-Step Buttons<\/em>, the Messages<\/em>, and the Steps<\/em> (if used).<\/p>\n\n\n\n
See Form Style<\/a> documentation for full details on styling each of these areas.<\/p>\n\n\n\n
Test Your Form!<\/h2>\n\n\n\n
Once you\u2019ve styled the form to your liking, you\u2019re done. Publish or update the page, and fill out your form to make sure it works as expected. If you have any problems, check our form troubleshooting guide<\/a> for help.<\/p>\n\n\n\n
More Fun With Forms<\/h2>\n\n\n\n
If you want to learn how to do more fun things with Elementor Forms, read on:<\/p>\n\n\n\n
Subscribe Form Popups<\/h3>\n\n\n\n
If you would like to create a Subscribe Form Popup, see this tutorial:<\/p>\n\n\n\n
- For a typical lead generation form, there is no need for a message field, so delete it by clicking the X<\/strong> at the far right of the field option, leaving just the name and email fields.
- In the Form options panel<\/em>, in the Form Fields<\/em> section give the form a name.
- Open the Elementor Editor.