How To Add Forms with Elementor in WordPress Sites

How To Add Forms with Elementor in WordPress Sites
0:00
/
1:00
1x

Adding forms to your WordPress site helps gather user data and boosts customer-business interaction. When visitors fill out the form, they input their names, email addresses, and other relevant details, giving you (the business) access to that information with the click of a button. Some websites also use forms to get customers’ feedback and questions to improve customer satisfaction.

As a WordPress user, you’re probably familiar with the basics of creating forms. However, you can add advanced forms to your WordPress site using the Elementor plugin. Elementor is a powerful page builder plugin that allows you to create beautiful, responsive, and custom WordPress websites without coding. With its extensive library of widgets, you can create forms or customize templates.

In this article, we’ll show you how to add advanced forms to your WordPress site using Elementor. We’ll also share some types of forms you can add to your website and how to go about it.

How to add regular contact forms with Elementor

The Elementor page builder makes creating a contact form easy. You can include multiple fields and customize the form to suit your needs. Follow the steps below to get started with creating your contact forms.

Step 1. Open Elementor Editor

From your WordPress dashboard, click on the plugin icon on the menu list on the left side of the screen.

Open Elementor Editor

Select Add New.

Open Elementor Editor 2

Search for Elementor in the search box.

Open Elementor Editor 3

Click the Install Now button in the Elementor website builder block. After installing, select Activate.

Open Elementor Editor 4

Next, go to Pages in the left-hand column and choose the page where you want to add the form.

Open Elementor Editor 5

Once you select the desired page, click the Edit with Elementor button at the top of the screen.

Open Elementor Editor 6

After clicking the Edit with Elementor button, a new window will appear, showing an Elementor sidebar on the left side of the screen.

Open Elementor Editor 7

Step 2. Create a new section

Before we continue with adding a form, we need to discuss the building blocks of the Elementor editor. The editor consists of three components that control the creation or editing of any website page. These components are:

  • The Elementor widget. The smallest unit of design and the tool you’ll use to add to your design.
  • The Column. This houses the widgets and defines where a widget can stay within a section.
  • The Section. This is the largest component for designing in WordPress. It divides the page into several logical parts like header, footer, and catalog.

At this point, we will create a new section where the form will stay. To create a new section, click the Add New Section button on the canvas.

Create a new section

Step 3. Select and nest the columns

After creating the section, you can create a column and embed it. Move your cursor to the Elementor sidebar on the left side of the screen. Click and hold the inner section icon and drag it into your created section.

Select and nest the columns

Step 4. Add a form widget

The next step is to add the Contact Us widget to your column. Again, go to the Elementor sidebar, click the Contact Us widget and drag it to the column.

At this point, you may add the form widget to your page. Go to the Elementor Pro section in the sidebar to drag and drop the form builder widget into the column.

Add a form widget

The image below shows a replica of the form you can expect to see in your column.

Add a form widget 2

Step 5. Resize the form widget

Now that you have your form widget in your column, edit it to suit your specific purpose. Elementor allows you to make modifications, such as changing the form height and width or adding new fields.

To begin editing your WordPress form, right-click on the column where your form is and select the context menu that appears. A small window will appear, and you can select the Edit Column option.

Resize the form widget

Once you choose Edit Column, styling options will appear on the panel on the left side of your screen. The sidebar will help you design a widget with the dimensions of your choice. The content width and the full height are all editable to suit your needs.

Resize the form widget 2

Step 6. Customize the form fields

To customize the form fields, click on the widget and the edit menu. On the Context tab, click on the Form Fields drop-down menu.

Customize the form fields

You can name your form by filling in the Form Names field. Next, select the add item button to generate new fields. Click on your new field to access the edit options available.

Customize the form fields 2

Select the Type drop-down menu to select your preferred input for your new field. You can choose from several field types, including text, email, telephone number, checkbox, date, time, file upload, password, and re CAPTCHA.

The Label field allows you to name the field to direct visitors on what you expect them to fill in. On the other hand, you can fill the placeholder to give visitors an example of what their response should look like. For instance, you can use DD-MM-YYYY as a placeholder where you want visitors to input their date of birth.

Setting the Column Width allows you to determine how wide the field should be. Having two consecutive fields at 50% will automatically place them side by side.

Customize the form fields 3

The Advanced Tab has several valuable fields. The Default Value field allows you to input preset answers if the visitors leave a field unanswered when filling out the form. Filling in this section is optional. The ID setting helps you track and group all the data that come in through that field. You should ensure that each field in your Elementor form has a unique ID.

The Shortcode field provides a unique code that allows you to track that field from anywhere on the page. You do not have to modify this setting.

Customize the form fields 4

A new item is now created on your contact form, which contains the Type, Label, and Placeholder, as seen below.

Customize the form fields 5

Step 7. Adjust the size of the form

Before leaving the Content tab you can size the form by adjusting the input size. We will just put the input size in the middle for this tutorial. To do that, click on the drop-down menu next to Input Size and select Medium.

Adjust the size of the form

Step 8. Curve the corners of the form

Now, we customize the form style to be more appealing to visitors. We'll head to the Style Tab in the form editor taskbar.

Curve the corners of the form

Go to Field and locate the Border Radius setting from the drop-down. Set the border radius to 50 to create a round edge for the form fields.

Curve the corners of the form 2

Step 9. Center the Submit button

Next, go to the Button drop-down menu and adjust the border radius as you did for the form fields. Again, set the Border Radius value to 50 to maintain a round-edged submit button. You may also set the form button color, text color, and font from this window.

Center the submit button

Return to the Content tab and select the Submit Button menu. Go to the alignment option and select Center. You can also edit the call to action (CTA) on the button. To edit the button text, select the field next to the Submit Button menu.

Step 10. Increase the row gap of the form

The row gap is basically the vertical distance between the form field and another in the consecutive line. Adding row gaps helps the form to appear that it's well laid out. To add your rows gap, go to the Style tab of the form editing tasks bar and select the form menu.

Increase the row gap of the form

Go to the Rows Gap and move the slider towards the right to increase the space between the rows. Although you can move it all the way to 100, setting the value at 20 gives a decent gap between the form fields.

Increase the row gap of the form 2

Step 11. Write a title and a description

Now that our design is set, we will need to create a title and include a description to help visitors understand the form's purpose. Click on the square button at the top right corner of the Elementor editor.

Write a title and a description

Move your cursor towards the Title Widget. Click and hold the icon, then drag it to the main section just above the column where your form is.

Click on the text area of the widget to edit the title. Then, align the title to the center.

You can also edit the title by clicking on the style column on the editing taskbar on the left side of the screen. There, you can change the color, size, alignment, typography, etc.

To include your description, click on the square button at the top right corner of the Elementor editor taskbar. Drag and drop the Text Description widget below the form title. Click on the text area of the description to add your description. As with the title, you can also style the description using tools in the style column. And there you have it: you have successfully added a form to your WordPress website.

Types of forms

From the beginning of this tutorial to this point, we have discussed how to create and embed an Elementor contact form into your WordPress website. There are many other form types besides the contact form, each offering unique features and designs.

Here we will highlight a few of these forms and discuss how you can embed them in your web page.

Elementor Gravity Forms

Gravity forms are a type of form that enables the user to register for an event or service. It allows for more than one person to be registered at a time and for the form to be completed offline and online.

The Gravity form does not come with Elementor, including the pro and free versions. You will need to download a WordPress plugin to extend Elementor’s functionality. Follow these steps to create a Gravity form for your WordPress site.

  • On another tab in your browser, visit Gravityforms.com to download the Gravity form plugins.
  • Log into your WordPress website and navigate to the Elementor page builder.
  • On the left sidebar, find the Plugins and Add New.
Elementor Gravity Forms

  • Select Choose File to navigate to the document path on your computer. Once you locate the document, select Install Now.
Elementor Gravity Forms 2
  • Once it installs, you will have a Form widget in the appearance section of the Element tab of the sidebar. You can locate the widget faster by typing Gravity Form into the search box at the top of the sidebar.
  • There you have your Gravity Form. You can use the edit options on the sidebar to style your new form.
Elementor Gravity Forms 3

Elementor Registration Forms

The user registration, or sign-up, process involves creating a new account on your WordPress website. Typically, every new member must submit personal data, such as their names, email addresses, and consent, during the sign-up process. They will also have to provide a private key or password to access their account.

As a result, websites provide a form called the user registration form that collates all necessary information during the sign-up process. The form also handles technicalities like ensuring the password meets some set requirements and that the Enter Password and Confirm Password entries match.

  • To input a registration form on your web page, first, download the Ultimate Elementor addons.  
  • Next, open your WordPress dashboard and hover around the Plugins option on the sidebar. Select New Plugin at the top of the page. Click Choose File and choose the file location of the Ultimate Elementor Addons you just downloaded. When you find it, choose Upload.
Elementor Registration Forms 1

  • Now, go to the Settings icons on the taskbar on the left side of the screen. Next, select General.
  • Scroll down the setting menu and click on Membership. Next, select a default role for new users by selecting a role from the drop-down menu in front of the  New User Default Role block.
  • Select Subscriber as the new role.  Check the Anyone Can Register box to ensure that your website can accept registration from all visitors.
Elementor Registration Forms 2

  • Navigate to the page where you want the form to be. Go to Pages from the taskbar and select your desired page. If you want to design a new page, select Add New at the top of your screen.
Elementor Registration Forms 3

  • Create a new section.
Elementor Registration Forms 4

  • After creating your section, search for User Registration Form on the search tool at the top of the sidebar. Drag and drop the forms widget into the new section.
  • The form widget gives the default template containing a Username, Password, and Email fields. However, you can edit the parameters to suit a user registration model.
Elementor Registration Forms 5

  • From the form fields options, you can add and remove data columns on your form. Click the × button next to a field to remove it, or use the Add Item button to include new fields.
Open Elementor Editor 6

  • As we did with the contact form, you can input names, labels, and placeholders in appropriate fields. The advanced tab also allows you to select input parameters for each field. For example, you can require that all entries in the label field must contain letters.
Open Elementor Editor 7

  • You can also include fields for the password, mobile number, and several other pieces of data you wish to collect during the registration process.
  • Once you're done creating the form, you can move on to the Edit Registration button section. There, you can change the text name to sign up, start here, subscribe, or other calls-to-action you may choose.
  • The next step is to update the new user role. Go to the General Settings. Click the drop-down menu next to New User Role and select a preferred role you want for new users.
Open Elementor Editor 8

  • You can include a login and lost password links and the check password strength widgets. Toggle the buttons on and off to add or remove a feature.
  • When you complete your settings, go to the next option on the Content tab.
  • Select After Register Actions. Whatever you choose here dictates what will happen when visitors click the register button. You can also include a link to the CTA.
Open Elementor Editor 9

  • Save and update your changes by clicking the Upload button at the bottom of the screen. The user registration form is also compatible with other page builders like WooCommerce.

Hire an Elementor expert or work as one yourself

The extensive functionalities Elementor provides help ease WordPress processes. Users can create custom pages and posts with drag-and-drop ease. While it is possible to create a page from scratch with Elementor, many users prefer to hire an expert who can help them save time and avoid common WordPress development errors. Visit Upwork to find and hire Elementor experts for your WordPress website development.

Besides helping people hire experts, Upwork also connects freelancers to various opportunities. The platform hosts numerous e-commerce and WordPress development projects. If you're a freelance Elementor expert, look for Elementor job opportunities on the Upwork platform.

Upwork is not affiliated with and does not sponsor or endorse any of the tools or services discussed in this article. These tools and services are provided only as potential options, and each reader and company should take the time needed to adequately analyze and determine the tools or services that would best fit their specific needs and situation.

Heading

asdassdsad
Projects related to this article:
No items found.

Author Spotlight

How To Add Forms with Elementor in WordPress Sites
The Upwork Team

Upwork is the world’s work marketplace that connects businesses with independent talent from across the globe. We serve everyone from one-person startups to large, Fortune 100 enterprises with a powerful, trust-driven platform that enables companies and talent to work together in new ways that unlock their potential.

Get This Article as a PDF

For easy printing, reading, and sharing.

Download PDF

Latest articles

X Icon
Hide