Adding a Subscription Form with the Elementor Pro Form Builder (Full Tutorial)

Elementor Visual Form Builder is a powerful tool that helps you create complete and beautiful online forms in minutes without any coding.

This article shows a simple subscription form with the following three functions:

• Visitors can enter information to subscribe to mailing lists
• User information will be synchronized to the MailChimp and other third-party mail systems
• Successful submission jumps to a page to claim a giveaway, such as an eBook, worksheet or white paper

Drag-and-drop form widgets

First, set the "Form form (document)The "Widget" is dragged into the page. The widget generates a base form by default, including name, email, and message, as well as a submit button.

Content > Form Fields

In the Form Forms panel, the Form Fields section allows you to set the name of the form, e.g. "Subscription Form".

Three fields are generated by default: Full Name, Email and Message.

This form does not require a message field, click the X to the right of the field to delete it, leaving only the name and email. If you need to add fields, click Add Item. In this example, only two fields will remain.

The "Content" tab of a field

Each field can be set up individually with content included:

• Type: The Name field is of type Text, the Mailbox field is of type Email, and the Mailbox field only accepts formats with "@" and "." format.
• Label Label: It is recommended to set up labels, even if they are not displayed on the page. The label will appear in the notification emails you receive.
• Placeholder: Serves as prompt text in the field, prompting the user to fill in the content.
• Required: It is recommended to set both name and email to "Yes".

At the bottom of "Form Fields", you can set whether to show asterisks to mark required fields and whether to show labels. When you hide the label, the asterisk will be hidden as well.

• Column Width: If you want the form to be more compact, you can set the Name and Email fields to 50% so that they are displayed side-by-side.

Advanced tab of the field

Generally no modifications are required. However, care should be taken:

• The ID of the field cannot be left blank. If it is empty, please fill it in manually. Otherwise, the form may generate an error.
• The shortcode contains an ID that can be inserted into the email to call the content of the corresponding field. By default, the [all-fields] Insert all field information. If you do not wish to insert all field contents, you can manually call the short code for the desired field.

Usually it is sufficient to leave the default settings for such subscription forms.

Contents > Button Settings

Most basic forms have only one button, the Submit submit button. If it is a multi-step form, there will be other step buttons.

• Size: Fonts and button spacing can be quickly set.
• Width: The common value is 20%. The actual setting is determined by the page style.
• button text: The default value is Send, which can be changed to Subscribe, Get Started, Sign Up, and so on.
• Icon settings: If you need to add icons to the left or right of the buttons, you can select them here and adjust the spacing.

Button ID Can be used for custom code calls, generally left blank.

Contents > Actions After Submit

This section defines the behavior of the visitor after submitting the form. Examples include sending an email, connecting MailChimp or jump pages.

Email Email notification (added by default)

Email actions are added by default. It is usually recommended to keep it. Click the Email tab to set this:

• Incoming mailbox
• Email Title
• What field information is included
• Formatting of e-mail content, etc.

Mailchimp access

Go ahead and add an action: Mailchimp.

• Click on the drop-down box in "Actions After Submit" and select Mailchimp.
• The Mailchimp tab appears, click on it
• If Mailchimp access has not been set up, you will be prompted to enter API Key. Click on the prompt to jump to the Elementor Settings page, fill in your API Key.

Once set up, return to the Mailchimp tab to select an Audience list. When a user submits a form, their information will be automatically added to the list.

Redirect Page Jump

Add another action: Redirect.

• Select Redirect in "Actions After Submit".
• After adding Redirect tab, enter the jump address

This page is generally a thank you page that provides instructions or download links for users to pick up materials.

Contents > Additional Options

This form is not a multi-step form, so you can skip "Steps Settings" and go directly to "Additional Options".

• Form ID: If you want to identify this form with a custom code, you can set a unique ID, which is usually not required.
• Custom Messages: When enabled, you can set a personalized prompt text. For example, change the default prompt to "Sorry, the submission failed, please try again later".

These alert texts usually appear when the browser does not display its own error message.

Styles > Form Style Settings

After the function is set, you can adjust the style in the "Style" tab.

The following sections can be customized:

• Form area (Form)
• Input Fields (Form Fields)
• Submit Button
• Messages
• Steps style (if any)

Test Your Forms

After completing the styling adjustments, publish or update the page. It is recommended to fill out the form once on your own to confirm that it submits properly. This subscriptionform (document)Includes information collection, third-party access and retargeting functions, and is an integral part of the marketing system.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off