How to Add a Subscription Form Using Elementor Pro's Form Builder

Elementor Visual Form Builder is a powerful tool for building complete, beautiful online forms without using any code.

Drag and drop form widgets

firstlyForm widgetDrag it onto the page. the Form widget immediately creates a basic form that already contains theName field, e-mail address field, message text arearespond in singingSubmit buttonThe

Content > Form Fields

existForm Options Panelinform fieldStart naming the form with a section such as "Subscription Form".

Next, we see the 3 fields that are automatically generated when the widget is inserted:Full name, e-mailrespond in singingmessagesThe

For a typical lead generation form, the message field is not required, so it can be accessed by clicking on the rightmost of the field options in theX removes it, leaving only the name and email fields. If you want to add new fields, just click the"Add project"button is sufficient, but for this particular example, we only need two fields.

Now let's take a closer look at the options available for each field.

Contents of fields tab

typology: the field'selementUnder the tab, you can select the fieldstypology. For example, the name field iscopiesfield type, which only allows the user to enter any standard text in a single line field. On the other hand, the email field typeemailIt only accepts text with appropriate email formatting, including @ and dots.

tab (of a window) (computing): Next up.tab (of a window) (computing)Options. This is not required, but we recommend providing the label, even if one decides to hide it for display, as this text will be displayed in the email received when someone submits the form.

placeholder: Next up.placeholderOptions. This is an optional piece of text that helps visitors understand what to place in this field.

mandatory field: Now, if you want the field to be required, set themandatory fieldThe toggle switch is set toYes.if not, please set the required toggle switch to no. For most subscription forms, the name and email fields are usually required, so please set both fields tobe.. At the bottom of the form fields section, you can choose to show or hide themandatory field. If you want the typical red asterisk to appear next to the field label, set it toShow. Above the mandatory marking options are show or hidetab (of a window) (computing)itself as an option. Of course, if the label is hidden, then the required tags will also be hidden, as they are attached to the label.

column width: In many cases, a narrower subscription form is ideal, so instead of taking up too much vertical space, put the name and email fields on the same line. To do this, click on the name field(math.) genusThis will open the options for the field. Set the field'sThe column width has been changed from 100% to 50%.emailThe fields perform the same operation. After setting the column width of both fields to 50%, the two fields should be placed side-by-side on a single line.

Advanced tab for fields

Now let's take a quick look at the field "high level"tab. In most cases, no adjustments need to be made here.

One point to note, however, is that here theIDThe field must never be empty. If for some reason it is empty, enter the ID name manually. Without the ID, the form will not work properly. It will be noted that the short codeincorporateID Name. If you wish to send specific field data, you can copy/paste this short code into the email being sent. By default, emails use the automatically generated short code[all-fields]Send all field data. However, in some cases, it is not desirable to send data for each field in an e-mail. In this case, you can manually enter the short codes for the fields you want to include.

For regular subscription forms, these advanced options can be retained, assuming an ID is assigned to each option.

Contents > Buttons

Now set the options for the form buttons. Most simple forms (such as this one) have only one button - thesubmit (a report etc)Buttons. However, if you want to create a multi-step form, each step should also have a button. 

First, select the form submit button for themagnitude. This option provides some "presuppose"Style, which mainly sets the font size and padding of the button. These can be adjusted later in the Styles tab of the widget, but for a quick setup, this is the place to make your selections.

Next, set the button'sheight. For small forms, the 20% option is usually a good choice, but it's good to use the width that works best for your particular style.

Since this form is not a multi-step form, we can skip the multi-step button option. In thesubmit (a report etc)In the field, enter the text of the button. The default is Send, but other common options may be Subscribe, Start, Register, etc.

Next, if desired, choose aicon (computing)Displayed on the button "submit (a report etc)" next to the text. If you choose to display the icon, two new options appear.icon positionAllows the option of placing the icon in the "submit (a report etc)"Before or after the text.Icon spacingAllows to adjust the spacing between the icon and the "Submit" text.

In some cases, if you wish to add a uniqueButton IDto be used in custom code when needed. Normally, this item is left blank, and for the purposes of this demo's case study, it will be left blank.

Contents > Operation after submission

This section allows to add actions that will be performed after a visitor submits a form. The main default action is to send someone an email containing the form data. Other typical actions might be to redirect the user to a specific page or to connect to a third-party marketing platform (e.g. Mailchimp). In this example, we will perform each of these actions.

Email Action

As mentioned above, the defaults have been added for us toE-mail operations. This can be done in the"Add operation"area to see it. If you don't want the form submission data to be emailed to anyone, you can send it to anyone by clicking next to the EmailXto remove this action. Of course, we usually want to send data via e-mail, so please leave this action in place. Now notice that there is an Email tab under the Actions After Submission tab. Each action added will create its own options tab under this tab. 

The Email tab has several options.

MailChimp actions

Once you've made sure these settings are in order, it's time to add another action. This time, open the"Post-submission operations"tab, and then click the field next to Email to open the drop-down options. In this example, select Mailchimp, which will add a new field under the Email tab calledMailChimpThe new tab of the Click on the tab to open it.

This message is received assuming MailChimp integration has not been set up:

Set your MailChimp API key in the integration settings. You can also set a different MailChimp API key by selecting Customize.

Simply click on the"Integration Settings"The link opens a new browser tab where you can enter your MailChimp API key. 

Once the key is set there, it will be possible to select one from the drop-down list on the MailChimp tab of the formaudienceLists. Doing so will automatically add the user's name and email address to your MailChimp list when the user submits the form.

redirect operation

Finally, let's add one last "Post-submission operations" Open"Post-submission operations" tab, click the field and select from the drop-down list the"Redirection". This will add a new "Redirection" tab below.

click (using a mouse or other pointing device)"redirects"tab to turn on its options, and then enter the page to redirect the user to after the form is submitted in theURL. This could be any page previously created for this purpose. For this example, it would be a page thanking the user for signing up and providing the user with the offered freebie or information about how to download it.

Contents > Additional Options

Since this is not a multi-step form, it can be skipped directly"Step Setup"tab and open the"Other options"Tab.Form IDis optional, but if you need to use the ID of some custom code to locate this form, you can enter a unique ID here; otherwise, leave it blank.

Will customize the messageset tobeIn order to be able to enter the specific wording required for each message that may be sent to the user. If you wish to change "An error occurred" to "Sorry, but an error occurred".
take note of, custom messages are backup messages for when the browser does not display its own errors. Often times, the user will never see these specific messages.

hairstyle

Now that the form is working properly, you can add some styles to it. Click on the widget's"type"Tab.

Each section of the form can be styled, including theform (document)itself,form field,submit (a report etc)respond in singingMulti-step buttons,messagesrespond in singingmove(if used).

Test your form!

Once you've set up the form style to your liking, you're done. Publish or update the page and fill out the form to make sure it works as expected.