How to Set up Forms in Elementor

In this WPDesigns article, I will take a look at how to Set up Forms in Elementor. I will try to cover all of settings of Form widget here.

Forms play a vital role in a websites ability to capture and gain new leads from visitors and interested parties, making sure your Elementor form is set up is key to this success.

Form Widget

You can easily add a contact form to your website using Elementor. However, you will need to purchase Elementor Pro in order to do so. Because this widget is only available in their premium version. It’s a great widget that includes Elementor, allowing you to get all of the needed features for your contact form, including proper settings and styling. Elementor Pro is highly recommended and the yearly cost is easily offset by the features and functionality you gain.

Every website should have a contact form! Contact forms will generate leads, establish communication, relationships, let users inform you of site issues, and everything else in between, depending on the type of site you have.

By default, when you will drag and drop the from widget into any page you will get a pre-made form. That’s really good to work with. You can customize it easily. Now we will discuss the settings of Elementor Form Widget.

Contact

Form Fields

FORM NAME

In this field, Elementor allows you to set a name for the contact form you are going to do.

ADD ITEM

Here is the field of the contact form. By default, you will get three fields which are name, email, and message. Here you can easily add any item if you want and you can also change the order by drag and drop. When you will add any item you can see two tabs here which are Content and Advanced.

Under the Content tab you can choose the Type here which kind of field you want to add like Text, Email, Textarea, URL, Tel, Radio, Select, Checkbox, Acceptance, Number, Date, Time, File Upload, Password, Html, Hidden, Step, Recaptcha, Recaptcha V3 and Honeypot. You can choose whatever you want to add. If you want to know about more this kind of field please check out this link of W3school.

Then you will get the Label field where you can add your input field label which will show at the top of the input field.

After that, the Placeholder will come in. If you add any text in a placeholder it will show inside the form field. Then you will get the required option here to make the field required. From the column width, you can set the percentage of columns for the field. The Content tab will be different in different types of fields.

Then in the Advanced tab, the first field you will get to set any default value for the field. If you set any default value it will show inside the field and people will see it when they will visit the form and they can edit this text. Next, in the ID field, you can change the id of the field. You have to choose a unique id for every field. Because this id is to identify the field and it will use in shortcode. Then you will see the shortcode. It will automatically be generated by depends on the id field.

If you change the id the shortcode will also change the id from the shortcode. We need the shortcode to use the field info dynamically. Like when someone puts their info into the form, you can use the info dynamically in the email that you will get or want to send automatically.

INPUT SIZE

Here you can control the size of the fields. You will get here 5 options which are extra small, samll, medium, large and extra large

LABEL

You can turn on or off label from here. Like if you wan to show the label turn on this and if not make it turn off.

REQUIRED MARK

If you want to show the required mark make it on and if not make it off.

Buttons

SIZE

You can adjust the size of the fields here. There are five sizes available: extra small, small, medium, large, and extra large.

COLUMN WIDTH

Here you can control the width of column. You will get differnet percentage to set the column width.

ALIGNMENT

You can change the button alignment here. You may, for example, configure the button to be left, center, right, and full-width.

STEP BUTTONS

From here you can easilly set the text for step button like next button and previous button.

SUBMIT BUTTON

You can modify the text for the submit button here. If you like, you can also set an icon for the submit button here. When you will add any icon in button you will get extra two options which are icon position and icon spacing. Icon position allows you to set the icon before or after the button text. And icon spacing will allow you to set the space between button text and icon. Then you can set button id for the submit button in the next field.

Actions After Submit

ADD ACTION

Add actions that will be performed after a visitor submits the form. You can choose from Collect Submissions, Email, Email 2 (Autorespond mail to the user), Redirect, Webhook, Mailchimp, Drip, ActiveCampaign, GetResponse, ConvertKit, Mailerlite, Slack, Discord, and Popup. Those actions are simple to implement after anyone submits the form.

Ensuring that Collect Submissions is on will make sure that you never lose a message for any reason.

Steps Settings

TYPE

Here you can set the type of steps. You will get varient types of options like Text, Icon, Number, Progress Bar, Number & Text and Icon & Text. You can set any of them for steps which will apply on the step form.

SHAPE

You can choose the shape for step types from this dropdown. The shape types would be circle, square, and rounded. When you choose text or progress bar as the step form type, the shape choice will not available here.

Additional Options

FORM ID

Here you can set a id for the form. WHen you will set the id you have to make sure that the id is unique.

CUSTOM MESSAGES

If you enable this option you can edit some custom messages like Custom Messages, Error Message, Required Message and Invalid Message.

Style

Form

COLUMNS GAP

Here you can set the gap between fields columns.

ROW GAP

Here you can set the gap between field rows.

LABEL

There you can set the space between label and form fields. You can also set the color and typography from here.

HTML FIELD

Here you can set the spacing, color, and typography of HTML fields on your form, if any exist in your form.

Field

TEXT COLOR

Here you can set the text color for the form field which will also apply on the placeholder text.

TYPOGRAPHY

Here you can set the typography for the field like font-family, font-size, font-weight, font-style etc.

BACKGROUND COLOR

You can set the background color for the form field.

BORDER COLOR

Her you can set the border color for your form fields.

BORDER WIDTH

Here you can set the width of border of fields.

BORDER RADIUS

If you want to make the border rounded you can make it from here.

Buttons

TYPOGRAPHY

You can set the typography for the button from here.

BORDER TYPE

Here you can set the background type like Solid, Double, Dotted, Dashed and Groove.

NORMAL AND HOVER

From there you can set the Background Color, Text Color and border color for Next & Submit Button and previous button. You can set it as normal and also for hover.

BORDER RADIUS

Here you can make the border rounded of the button.

TEXT PADDING

You can set the text padding of button from here.

Messages

From messages tab you can set the typography and color for the custom messages. You can set individual color for every custom message.

STEPS

Typography

From there you can set the typography for steps numbers.

Spacing

You can set the space between form field and step numbers.

Padding

Here you can set the padding  around the step numbers.

Inactive, Active and Completed

From here you can set the primary and secondary color for the step numbers. You can set those color individually for inactive, active and completed step numbers.

Divider Width

The thickness of the divider line that divides each Step number can be adjusted here.

Divider Gap

The gap spacing between the divider line and each Step number can be set here.

Advanced

The Advanced tab is full of useful features:

• Advanced – Options include; margin, padding, z-index, CCS ID and CSS Class.
• Motion Effects – There are a range of scrolling effects, mouse effects, and you can also choose how the selected element enters the screen, the delay and if it is sticky.
• Background – You can select the background for standard and also for hover.  You can choose from a solid background and a gradient.
• Border – This allows you to add a border to the element when standard and hover along with the border-radius.  You can also add a box-shadow.
• Positioning – You can change how the element is positioned on the page. For the page width, you have default, inline, and custom.  For the page position, you have default, absolute, and fixed.  Check out this article for a deep look into the positioning properties in Elementor.
• Responsive – The responsive options will allow you to hide certain sections or elements on different screen sizes.  This can be useful when redesigning a page for mobile. On certain elements, you can reverse the columns.
• Attributes – (Pro Feature) You can add custom attributes to the element; you can find a full list here.
• Custom CSS – (Pro Feature) You can add CSS to the site or the element through this box.  It is best to add the CSS for the element and add the CSS for the global setting site.  You can use “selector” to target the specific element you have open.