Contact form is a vital component for any website, and adding it to the website enhances its appearance and makes it look more professional to your visitors.
Having a contact form on a website helps in generating leads, reducing spam & keep your site secure.
Thanks to the WPForms plugin, one of the best drag & drop form builders. It helps you to design a contact form, donation forms, order forms, and other working forms on a WordPress website. You can easily create an amazing contact form, or you can choose from the hundreds of pre-built form templates.
In this post, we will see how you can create and style a contact form using the WPForms widget for Elementor
Style WPForms with Elementor
If you would prefer to watch a video, you can check it out here.
First, you need to activate & create a form through the WPForms plugin. For this, you can check out WPForms documentation to get started with WPForms.
Once you create a form, we can go to all customizations & styling options of the contact form.
Open a page in Elementor editor. Now drag & drop the WPForms widget in the “Drag widget here” section.
WPForms widget for Elementor: Content Tab
First, you need to select a form from the drop-down menu. As soon as you choose the form, it will appear right away in the editor.
As you saw, the above contact form has default settings. With WPForms Widget for Elementor, you can style & customize these settings, & make them look more attractive.
You can add Eye-Catching Headline with Custom Title & Description.
Apart from this, you can also Enable or Disable Labels, Texts, and Placeholders.
In case anything goes wrong while submitting the Contact Form, you can easily display an Error Message to your users from this section.
WPForms widget for Elementor: Style Tab
From the Style tab, you can change the look and appearance of the Form. Here you can style Text Area, Labels, Radio Buttons, Checkboxes, and Submit buttons.
It also allows you to change the Text Color & Typography of the Title & Description, Labels, and Placeholder. Moreover, you can change the alignment of the background & text color.
You can also add custom styling to the Radio Checkbox Button in your Form.
Additionally, you are allowed to style Submit Button & Error Messages as per your preference.
Styling options for Input & Textarea
Text input fields are the most common elements of the contact form. With WPForms Widget, you can easily style input & text filed areas.
You can set Background & Text Color for the input areas.
Also, it gives you the flexibility to adjust Input Text Indent, Width & Height as per your preference.
Customize Radio & Checkbox Button
This widget also allows you to add custom styling to the Radio & Checkbox button of the contact form.
For adding a custom style, first, you have to enable the Custom Styles button from Radio & Checkbox section.
You can choose a custom size & color for the checkbox button. Choose a border-radius for both Radio & Checkbox buttons to make the contact form more attractive.
Add Custom style to the Submit Button
Submit button is the essential component contact form. It helps you to collect your user’s information. If you would like to change & customize submit button settings you can easily do with the WPForms widget.
It allows you to add impressive style to submit buttons that fit your site’s design & appearance.
Here you can select text & background color. Choose border type for the box and for adding more styling, you can give a little box shadow & padding.
Moreover, you can customize typography & add border radius as per your preference.
Style Error Messages
With the WPForms widget, you can not only display error messages but simultaneously you can add styling to it.
You can add text color and can easily customize Error Field Box for highlighting error messages to the users.
Here I change the typography for each text content and give a little box shadow for highlighting the boxes. Also, I added a little padding & margins to the elements so that the form won’t look compact.
After making all the changes, this is what the final design looks like:
Here are some more impressive designs of contact forms made with Elementor