How to Add a Subscribe Form Using JupiterX Form Builder

Creating a subscribe form on your website is a great way to connect with your visitors and grow your mailing list. In this article, we'll guide you through the process of adding a simple lead capture subscription form with JupiterX Form Builder.

Step 1: Drag and Drop a Form Widget

Go to your Elementor page editor.
Locate the Form widget from the Elementor panel.
Drag the Form widget into the desired section of your page.

Step 2: Configure Form Fields

Once the Form widget is in place, click on it to open the Form options panel.
Under Content > Form Fields, give your form a unique name such as "Subscribe Form".
You'll see three default fields: Full Name, Email, and Message.
We don't need the Message field for this form, so click the X to remove it, leaving only the Name and Email fields. To add more fields, use the Add Item button.

Step 3: Customize Each Field

For the Name and Email fields:

Type: Choose "Text" for the Name field and "Email" for the Email field.
Label: Provide a label for identification. You can hide it if needed, but it helps when receiving submission emails.
Placeholder: Enter a helpful hint that tells users what information to enter in the field.
Required: Toggle to "Yes" to make the field mandatory, as you'll want to ensure visitors provide this information.
Column Width: Set both the Name and Email fields to "50%" to have them appear side by side.

Step 4: Advanced Field Options

Go to the Advanced tab if you need to customize further.
Ensure each field has a unique ID; this is crucial for the form to function correctly.
Shortcodes: By default, the auto-generated shortcode [all-fields] sends all fields' data via email. Use specific field shortcodes if you wish to include only certain data.

Step 5: Customizing the Submit Button

In the Elementor editor, find the Submit Button settings under the Content tab.
To change the button's width, select an option that suits your form's design. A width of 20% often works well for compact forms.
If you want to add an icon to your button, select one from the list. Upon choosing an icon, you'll have additional options to position the icon before or after the text and adjust the spacing between the icon and text.

Step 6: Setting Up Form Actions

After configuring the button, it's essential to define what happens after the form is submitted.

Navigate to the Settings tab within the form widget.
You will find that the Email action is already set up by default in the Actions area.

Step 7: Email Action

If you do not wish to receive form submissions via email, you can remove this action.
If you decide to keep the Email action, you can configure the email recipient, the content of the email, and other settings in the Email tab under Settings.

MailChimp Action

To add users to your MailChimp list:

Click on the Add Action field, select MailChimp from the dropdown.
You need to input your MailChimp API Key in the Integrations Settings if you haven't done so already.

Redirect Action

For a more user-friendly experience:

Choose Redirect from the Add Action dropdown.
In the Redirect tab, enter the URL where you want to send users after form submission. This could be a thank you page or a download page for the free gift mentioned earlier.

Custom Messages

Toggle Custom Messages to Yes if you want to provide specific messages for different form responses.
Customize the wording for successful submissions, errors, and other feedback provided to the user.

Styling Your Form

Now it's time to add some visual flair to your form.

Click on the Style tab in the form widget.
You can style the form container, fields, buttons, messages, and steps (if applicable).

Test Your Form!

Once you styled the form to your liking, publish or update your page.
Fill out the form yourself to check that everything works smoothly.
If you encounter any issues, consult our form troubleshooting guide for solutions.

Remember, testing your form is a crucial step to ensure your visitors have a smooth experience when subscribing to your mailing list. Enjoy personalizing your form with JupiterX and Elementor!

That's it! You've now successfully created a sleek and functional subscription form for your website using the JupiterX Form Builder. Make sure to preview and test your form to ensure it's ready for your audience.

If you encounter any issues or have additional questions, don't hesitate to reach out to our support team for assistance. We're here to help you make the most of your JupiterX theme!