Contact Form 7 is one of the most popular form builder plugins for WordPress. It’s completely free to use. Not only you can use Contact Form 7 to create a contact form on your WordPress site. You can also create form types like a booking form or a file upload form. There are 14 field types you can choose when creating a form with Contact Form 7.
One of the common issues about Contact Form 7 is the styling process. Contact Form 7 uses the default styling option of your current WordPress theme. You can use a different style to your form, but CSS skill is required. If you have no CSS skill, you can use Essential Addons to style your Contact Form 7 form.
Essential Addons is an Elementor add-on so the styling process is done via Elementor, the most popular page builder plugin for WordPress. Both Elementor and Essential Addons are freemium plugins. You can use the free version of both to style your Contact Form 7 form.
How to style a Contact Form 7 form using Essential Addons.
Before getting started to customize the style of your Contact Form 7 form, make sure you have installed Elementor and Essential Addons. Once they are installed and activated, create a new page (Pages -> Add New) and edit it with Elementor.
Before you start the styling process, set the page layout by clicking the gear icon on the bottom-left corner. Set the page layout on the Page Layout section.
Add a new section by clicking the plus icon on the canvas area and drag the EA Contact Form 7 widget from the left panel to the canvas area.
Go to the left panel and select a form you want to customize its style.
After selecting a form, go to the Style tab. As you can see, there are several styling options you can set. Here are the common styling options you might want to set.
- Form width, alignment, and background
Under the Form Container option, click the color selector on the Background Type section and set the color you want for the form background. You either use a solid color or a gradient color as the background.
To set the form alignment, simply select your preferred alignment option on the Form Alignment section.
To set the form width, set the value of the form width on the Form Max Width section.
- Field background, width, and border radius
To set the background of the fields, the width, and border radius, you can open the Input & Textarea option. Click the color selector on the Background Color section to set the background. You can also set the field background color of the focus mode by clicking the FOCUS tab.
To set the width of the fields, you can set the value on the Input Width section. Beneath this section, you can also set the width of the text area field.
To set the border radius, simply go to the Border Radius section and set the value of the border that you prefer. You can also set the typography (font family, font size, font style) by clicking the pencil icon on the Typography section.
- Labels
Essential Addons also allows you to customize the style of the labels of your form. You can set the text color as well as the typography. To do so, open the Labels option. Set the text color by clicking the color selector on the Text Color section. To set the typography, click the pencil icon on the Typography section.
- Submit button
To customize the style of the submit button, open the Submit Button option. From here, you can set the alignment of the button, width, background color, text color, border radius as well as the typography.
- Error message
To customize the style of the error message, you can open the Errors option. You can set the text color of the error message, the typography, the background color of the validation error, the text color of the validation error, and so on.
There are several other styling options you can set. You can play around with the left panel until you get satisfied with your form style.
You can add several other elements to your page using the available widgets offered by both Elementor and Essential Addons. Once you are done, click the PUBLISH button on the bottom side of the left panel to publish your page.
Embedding the form to a regular page
After clicking the PUBLISH button, your contact page has basically been published. The page itself is powered by Elementor. If you prefer to add your Contact Form 7 form to a regular page (a page created with Gutenberg, the default editor of WordPress), you can install the Elementor Blocks for Gutenberg plugin. This plugin will convert an Elementor template into a Gutenberg block.
To save your Contact Form 7 form as an Elementor template, click the arrow button next to the PUBLISH/UPDATE button on the left panel and select Save as Template.
Give your template a name and click the SAVE button.
Create a new page (Pages -> Add New) and give it a name like “contact us” “contact” or any name to your liking. Add a new block and select Elementor Library and select the Contact Form 7 form template you have just created.
