In the fast-paced digital landscape of 2023, functionality has become one of the most important aspects of web design and user experience. As discussed in our Elementor “Form” widget blog, this widget is a powerful tool that allows users to create and implement forms with ease. One of the best features of this widget is that it comes with a full-range of customization options. From adjusting form settings to changing fonts and colors, Elementor has everything you need to create a form that aligns with your needs and style. In this blog, we will dive into the “Content” and “Style” tabs of Elementor’s form widget, exploring the wide array of options available that’ll help enhance your form’s functionality. Join us as we unlock the full potential of Elementor’s forms.
Maximize Your Form’s Potential with Elementor’s Content Tab
With its comprehensive set of options and functionalities, the “Content” tab empowers you to create highly interactive forms that engage your users and drive conversions. From designing appealing layouts to customizing form fields, the Content tab offers a wealth of tools to help you enhance the functionality. Aside from form fields, let’s take a look at the various features and capabilities of the Content tab.
Buttons:
- Size: Select the size of your submit button.
- Column Width: Set the width of your button.
- Alignment: Set the alignment. Choose between left, center, right or justified.
- Step Buttons: If you chose “Step” for a field, you can adjust it’s text here.
- Next: Enter your desired text for the “Next” button.
- Previous: Enter your desired text for the “Previous” button.
- Submit Button:
- Submit: Enter your desired text for the submit button
- Icon: If desired, select an icon to be displayed in the submit button. If chosen, you have the ability to adjust it’s positioning and spacing.
Actions After Submit: This option allows you to define what happens after a user submits a form on your site. This provides various options to automate specific actions and help streamline your workflow. Choose from a range of actions such as displaying a popup, redirecting to a different link, or even integrating external services such as MailChimp, Slack, Discord and more! Whichever action you decide to add, it’s settings will be displayed in the “Content” tab for quick and easy access.
Email: This part of Elementor’s form allows you to configure the email settings for form submission. It provides the options to define the recipient, subject, and content of the email that you receive when a user submits a form. By configuring the email section, you can ensure that your receive accurate notifications whenever a submission is made.
- To: Enter the email address for where form submissions should be sent. You can include multiple recipients by separating emails with a comma.
- Subject: Enter the subject line for you email notifications.
- Message: Enter the message you’d like included in the email notifications. By default the “all-fields” option is in place, or you can use form fields to create the message.
- From Email: Enter the email address that you’d like to appear as the sender. It is recommended to use a valid email associated with your domain.
- From Name: Enter the name, title, company, etc. you wish to appear as the sender.
- Reply-To: Enter the email address of the sender.
- CC: Enter the email address for the CC’d recipient.
- Bcc: Enter the email address for the Bcc’d recipient.
- Meta Data: Add or remove additional meta data displayed at the bottom of the form. By default, all options will be selected.
- Send As: Choose whether the form is sent as HTML or plain text.
Step Settings: If you chose to include steps to your form, you can adjust some of the settings here.
- Type: Select your step indicator. Choose between None, Text, Icon, Number, Progress Bar,
Number and Text, or Icon and Text. - Shape: Choose the border type around the step indicator. Pick between Circle, Square, Rounded or None.
Additional Options:
- Form ID: Additional option that allows you to add a custom ID to your form.
- Form Validation: The process of checking user-submitted data to ensure it meets requirements. This is a great way to ensure accuracy throughout submissions. Choose between the browser default validation or your own custom form validation.
- Custom Messages: Set to “YES” if you would like to add custom messages. You can add custom messages such as a Success Message, Form Error, Server Error or Invalid Form. Please note that the custom messages are fallback messages when the browser doesn’t display it’s own error.
Customizing the Style of Your Elementor Form
The “Content” tab of Elementor’s form widget is where you have the ability to add or remove form fields, set your form’s settings, and set the overall foundation of your form. The “Style” tab on the other hand is where you can really take things to the next level. The Style tab offers an abundance of customization options that allows you to create appealing forms that align with your site’s overall style and design. From typography and colors to spacing and borders, the Style tab has everything you need to fine-tune the appearance of your form. Let’s take a look at the customization options that fall under the Style tab.
Form
- Columns Gap: Control the space between columns.
- Rows Gap: Control the space between rows.
- Label: Control the spacing, color and typography settings of the labels.
- HTML Field: If any HTML fields exist on your form, control the spacing, color and typography settings here.
Field
- Text Color: Set the color of the field text. (This is the text that users input)
- Typography: Set the typography settings of the input text.
- Background Color: Set the background color for the fields. (The text boxes where users input information)
- Border Color: If desired, set the border color of the fields.
- Border Width: If desired, set the border width of the fields.
- Border Radius: If a border is in place, set the border radius here. This controls corner roundness.
Buttons
- Typography: Adjust the typography settings of your button.
- Border Type: Select a border type. If a border is chosen, you will have the ability to adjust it’s width and color as well.
- Hover Animation: You can set an animation for your button. Simply click the “Hover” tab and select an animation from the animation dropdown list.
- Submit & Next Button: Please note that the “Next” button is only displayed if you chose to have steps as a form field.
- Background Color: Set the background color for the submit and next button.
- Text Color: Set the text color for the submit and next button.
- Previous Button: Please note that the “Previous” button is only displayed if you chose to have steps as form field.
- Background Color: Set the background color of the previous button.
- Text Color: Set the text color of the previous button.
- Border Radius: Set the border radius and control corner roundness.
- Text Padding: Set the padding around your button text. You can also use padding to adjust the button size and width.
Messages
- Typography: Set the typography settings for your messages.
- Success Message Color: Set the color of your success message.
- Error Message Color: Set the color of your error message.
- Inline Message Color: Set the color of your inline message.
Steps: If you chose to include steps in your form, you can adjust all of it’s settings here.
- Typography: Set the “Steps” typography settings.
- Spacing: Control the spacing between your steps and the first row of your forms.
- Padding: Control the padding of your steps. This can be used to adjust the sizing of your step icon.
- Inactive/Active/Completed
- Primary Color: Select the primary color for when steps are inactive, active or completed.
- Secondary Color: Select the secondary color for when steps are inactive, active or completed.
- Divider Width: Control the width of the divider between steps. If no border is desired, simply enter “0” into the divider width box.
- Divider Gap: Control the gap of the dividers between steps. The lower the number, the longer the divider and vice versa.
Conclusion
In conclusion, Elementor’s form widget is a game-changer when it comes to enhancing the functionality and interactivity of your website. Whether you just need a simple contact form or a multi-step application, Elementor Pro offers a wide range of features that will fit your needs. With it’s simplicity, you can easily create and design every aspect of your form such as the form fields, layout, styling and more. Elementor’s form widget goes beyond just fancy customization options. It also offers a range of advanced features for email notifications and integrations with applications such as Slack, Discord and MailChimp. These advanced features allow you to go beyond the traditional settings of the widget and create an effective way to manage user data, collect responses, automate processes and start relationships with your audience. By incorporating Elementor’s form widget into your website, you can greatly enhance engagement, improve communication, and ultimately drive conversions. Whether you’re a local business, electrician, or simply looking to promote your product and services, Elementor has the tools you need. Elevate your website’s performance and deliver an exceptional user experience. With Elementor Pro, the possibilities are endless.
