Adding Fields to Elementor Contact Form

To add a field to your Elementor form, click “Add Item“:

This will create a new item in your contact form like so:

As you can see, there’s a range of settings, so let’s take a look at those:

  • Type — this is the type of field that you want to add to the form. There are multiple different field types, including:
    • Text
    • Email
    • Textarea
    • URL
    • Tel
    • Radio
    • Select
    • Checkbox
    • Acceptance
    • Number
    • Date
    • Time
    • File Upload
    • Password
    • HTML
    • Hidden
    • reCAPTCHA
    • reCAPTCHA V3
    • Honeypot

Phew! That’s a lot of field types! Most are self-explanatory.

Next up is the “Label” option. The label is the name of the form field that shows above the contact form. It shows users what input is expected, so ensure it’s something descriptive!

Then there’s the “Placeholder” setting. The placeholder is what shows in the form field when a user hasn’t entered any data. It’s helpful to set the placeholder text as an example of what information you want them to enter.

For example, adding ‘email address’ as the placeholder tells the user you’re expecting an email address in that field.

The penultimate setting is “Required.” This is a simple toggle switch that, when enabled, won’t allow the user to submit the form without filling in the field.

Last is the Column Width setting. Setting the column width allows you to align and stack your fields as required.

For example, if you set the width to 50% and add another area at 50%, the fields will display side-by-side, giving you freedom in how you design your contact form with Elementor.

  • Advanced Tab

Next are the options within the “Advanced Tab” part of the new field settings.

There aren’t as many options on this tab, but if anything, they are more confusing.

  • Default Value — This is the default value of the field and is different from the placeholder. This is an optional setting used when some kind of value is set by default if the user doesn’t add their own. For example, a minimum value or order in a form.
  • ID — The field ID is used to save that field’s data. You usually don’t need to modify this but it has to be unique.
  • Shortcode — The shortcode can be used to retrieve the field anywhere on your page. Generally, you don’t need to use this.

That was a lot of options! Hopefully, now you have a good idea of what they all mean.