Are you wondering how to customize contact form in WordPress? Do you want to modify the contact form style in WordPress? If so, then this article, which shows you a step-by-step guide to customize the contact form in your WordPress site, is perfect for you.
Although WordPress doesn’t come with a built-in contact form, there are hundreds of WordPress plugins that you can use to add the contact form to your site.
However, it might be difficult for you to modify the contact form in WordPress further. So, to ease your task, we’ve created this article to help you modify the contact form style in WordPress.
Let’s get started!
Why Customize Your Contact Form in WordPress?
When you go live on the internet with your website, your site’s design must provide a better user experience; everything on your site must look attractive and user-friendly. Since contact forms are the way visitors interact with you, you have to make them beautiful and easy to use as well.
Besides, you might also not like the default style of the contact form that you get from the plugins. You may want your contact form to match your WordPress theme and even want your font style and font size of the contact form to go together with other site content.
Since forms are an essential part of your website, you must take care of them seriously. They play a vital role in increasing the conversion rate of your site. Because of all these and many other reasons, you need to customize the contact form in WordPress. And it’s possible as well.
So, let’s learn how to customize contact forms in WordPress in detail.
How to Customize Contact Form in WordPress?
Customizing the contact form is not a big deal for developers, but it’s undoubtedly a difficult task for non-tech savvy people. So, you need to choose a plugin that lets you easily modify the contact form in WordPress.
Let’s find out which contact form plugin we’ve chosen and how to customize the contact form in WordPress using it.
1. Choose the Best WordPress Form Plugin
While many WordPress contact form plugins are available in the WordPress repository, not all of them are beginner-friendly or flexible enough. Also, very few form builder plugins allow you to modify contact forms in a WordPress site without you having to add CSS code.
After reviewing many WordPress contact form builder plugins, we’ve chosen Everest Forms as the best WordPress form plugin. The Everest Forms plugin lets you fully customize the contact form without requiring you to change a single line of code. Its drag and drop interface is highly flexible and enables you to design your contact form in no time.
You can effortlessly change font size, font color, spacing, background color, margin, and many more through the customized panel of Everest Forms. Additionally, it has a live editing panel that lets you preview the changes live. Besides, you can also use its pre-designed templates to create the forms.
Therefore, we recommend you use Everest Forms to create any forms on your WordPress site, like multi-step forms, survey forms, donation forms, and many more.
2. Install and Activate Everest Forms Plugin
Installing the WordPress plugin is the step you should follow to use any plugins, and you’re also required to install and activate the Everest Forms plugin to use it. So, to perform this action, find your WordPress login URL and log in to your WordPress dashboard.
Now, navigate to Plugins >> Add New on your dashboard.
Then, a new page appears on your screen with the search bar. Search for Everest Forms in the search bar, and it shows you the search results showing the Everest Forms plugin. Without waiting for anything, click on the Install Now button and install the Everest Forms plugin on your WordPress site.
Immediately you’ll see the Activate button, so press it and activate the Everest Forms plugin on your site.
3. Install and Activate Style Customizer Addons
You just installed a free version of the Everest Forms plugin that’s sufficient to add a simple contact form on your site. But, to customize the contact form on the WordPress site, you’ll require a premium version of Everest Forms.
Everest Forms has four plans under its premium version: Personal, Plus, Professional, and Agency. And it provides Style Customizer addon, which is a styler for WordPress forms, on all of its premium plans.
So, to purchase a suitable plan, visit the official site: wpeverest.com. Once you’ve bought a plan, you’ll receive the login credentials in the email address you’ve entered during the purchase.
When you log into wpeverest.com as a customer, it shows you a dashboard of the Everest Forms plugin. So, go to the Downloads tab and find the Everest Forms Pro and Everest Forms Style Customizer files. Now, click on the Download button of each file, and it saves the zip files on your device.
It’s now time to go back to your WordPress dashboard and navigate to Plugins >> Add New.
From here, click on Upload Plugin to install Everest Forms Pro. Hit the Choose File button to select the file you just downloaded, and finally click on Install Now button.
Also, activate the plugin as soon as you install the pro version of Everest Forms, hitting the Activate button.
You’ll then see a message at the top reminding you to enter the license key for the plugin.
The license key is available under the License Keys tab in your account’s dashboard in wpeverest.com.
Enter the license key and proceed.
To install the Style Customizer addon, click on Plugins >> Add New. Then, choose the zip file for the addon from your device and click on Install Now.
Click on the Activate Plugin button as soon as you see it. Thus, your plugin page now shows you three plugins that you just installed.
4. Create a Contact Form
You now have everything you’ll require to modify the contact form in your WordPress website. But for that, let’s create a new contact form; you can also use the pre-built templates and style them.
In this tutorial, we’re creating a new contact form. Thus, go to Everest Forms >> Add New and click on Start From Scratch.
Now, give a proper name to the form and click on Continue.
It will take you to the form editor, where you can drag and drop the fields you wish to add from the left side to your form on the right side.
After you feel that you’ve completed adding the required form fields, save the form.
5. Customize Your Contact Form Using Style Customizer
You’ll see the Style Customizer on the bottom right corner of your form editor, —something like the image below.
Clicking on it takes you to the form customizer from where you can modify the contact form of your WordPress site. The interface may look something like this:
It will enable you to change various sections of your form. Let’s discuss the options available under Style Customizer in detail below:
i. Active Template
It is one of the major customization options available in very few plugins. It allows you to choose between the default and classic template of the form to change its overall layout. You can see the live preview on your screen as you select the layout.
ii. Form Wrapper
Next, it has a Form Wrapper that resembles your contact form’s overall outline and background. From here, you can customize various components:
Width: Using it, you can increase or decrease the width of your contact form’s field. Simply drag the point towards the right to increase the width and drag it to the left to decrease the width.
Font Family: It has a drop-down menu that lets you choose the font family from the available options.
Background Color: This option lets you change the background color of the contact form. To change the color, click on the Select Color button and choose the color of your choice. You can instantly go back if you don’t like the changes by hitting the Default button.
Background Image: You can select the image to add it as your background for the contact form. The pictures you want to add in the background should be in your media library.
Border Type: It’s another feature of the form wrapper that lets you customize the border of your contact form. Several options such as hidden, dotted, dashed, solid, and so on are available that you can use as the border around your form.
Border Width: It lets you customize the border’s width. If you want to keep the width equal on all sides, select the link-like icon at the end while unselecting it lets you set the border width individually on each side.
Border Color: As the name implies, it allows you to set the border color of your contact form.
Border Radius: You can change the contact form’s border’s radius form here; increasing it increases the curves of the corner in the border and vice-versa.
From Margin: It allows you to set the margin of the form on your page or post. You can set the margin individually by selecting the icon or set the margin equally on all the sides by unselecting the icon.
Form Padding: Padding is the space between the border and the field of the form. Here also, you can customize the padding individually or equally all at once.
iii. Field Labels
Field Labels customizer allows you to customize the labels of your form’s fields. It has the following customizer options:
Font Size: It allows to increase and decrease the font size of the labels. Drag the pointer toward the right to increase the font size and drag it back to decrease the font size.
Font Color: From here, you can change the color of your fonts by selecting the color of your choice.
Font Style: This option allows you to change your label’s format as bold, italics, underline the label and capitalize every letter. You can choose by clicking on them.
Text Alignment: You can align the label to your contact form’s left, center, or right side. Hit the alignment that you like, and it’s done.
Line Height: You can increase and decrease the row’s height in the form by dragging the pointer forward and backward, respectively.
Margin: Margin lets you increase or decrease the space between your contact form fields. You can increase the margin by clicking on the upward arrow and decrease it by clicking on the downward arrow.
Padding: It allows you to increase and decrease the space between the field labels and the border of the fields. It also has upward and downward arrows to increase and decrease the padding.
iv. Field Sublabels
The Field Sublabels are similar to the field labels and have the same customizing option. The only difference is that it allows for styling the sublabel of the form.
v. Field Description
Field Description lets you customize the description of your form’s fields.
You can add the descriptions to the field label to make users more transparent on what to insert in the field.
It allows you to increase and decrease the font size of the description, change fonts color font style, and align the text from here. The process is the same as we’ve mentioned above for the Field Labels, as the options available are also similar.
Besides that, it lets you set the description’s line height, margin, and padding.
vi. Field Styles
Field Styles is for customizing the fields of the forms where users enter their information asked. Like the field label, it has customization options such as Font Size, Font Color, Font Style, and Alignment.
Additionally, you can change the field color for the placeholder of your contact form by selecting the color through Placeholder Font Color.
Again, just like the option available for the border of the form under the Form Wrapper, the same options are available to customize the border of the field as Border Type, Border Width, Border Color, Border Radius, Background Color, Field Margin, and Field Padding.
In addition, it also has Border Focus Color that you can set as per your choice. It changes the border color of the field when the user places their cursor in the field.
vii. File Upload Styles
File Upload Styles is available for you to style your file upload field. From here, you get the following options for customization:
Font Size: You can increase or decrease the font size of the text in your file upload field from here.
Font Color: It lets you change the font color of the text in the file upload field by selecting the color of your choice.
File Upload Background: This option is for changing the background color of the file upload field. Simply pick the color that you like, and it’s done.
Icon Background: The file upload field has a small icon indicating the file upload feature. You can change its background color into any color you like from this option.
Icon Color: It lets you change the icon’s color that shows file upload-like notation.
The other options available for customizing the file upload field are for border: Border Type, Border Color, Border Radius, File Upload Margin, and File Upload Padding.
viii. Radio/Checkbox Style
The radio button allows users to choose only one item from the list.
On the other hand, checkbox buttons enable users to choose more than one item from the list of options. If your form has multiple choices or a single choice, you can add those buttons to your form.
Everest Forms also allows you to customize those buttons through Radio/Checkbox Style. For the labels of the button, you can increase or decrease the font size, color, style, and alignment.
For the radio or checkbox, you can use the following options:
Style Variation: To change its style. It has three options: Default, Outline, and Filled.
Form Margin: You can increase or decrease the margin of the items using this option. You can also change all sides of the margin at once or apply the changes to individual sides.
ix. Section Title
Section Title is one of the advanced fields of Everest Forms that you can add to your form. It’s the title that you can add to some particular section of your form to group the fields into different sections.
For further customization, you get the options for changing its font size, color, style, text alignment, and line-height. Also, you can increase or decrease the margin and padding of the section title through From Margin and Form Padding, respectively.
x. Button Styles
Button Styles is for styling the submit button you add to your contact form. You can change the submit button color, modify the font size of the button name, its font style, font color, and button color. Also, you can change the hover color of the button’s label and the button.
For styling the button’s border, you can change its type using the drop-down menu of Border Type. The other styling options for the button are Border Width, Border Color, Border Radius, Line Height, Button Margin, and Button Padding.
xi. Form Messages
Form Messages are those that appear when a user submits the form. It has styling options for the following messages: Success Message, Error Message, and Validation Message
For styling the font of the messages, you can change its size, style the text, align text to right, center, or left. Also, you can easily change the font color and background color.
You can change the border type, its width, color, and radius for the border of the messages.
xii. Additional CSS
If you’re familiar with designing using CSS code, this option is for you. You can add your CSS code here further to customize the appearance and layout of your WordPress site.
It has the CSS editor at the left side of the customizer, where you can add the CSS code.
Lastly, make sure you save the changes you perform for your form. The Save button is available on the left side of the customizer at the top. Hit the button, and that’s all.
6. Configure Form Settings
Since we’ve guided you to style your contact form in WordPress, it’s now time to configure the form settings.
For that, go to Settings >> General of the contact form.
It shows you the General page where you can set or reset the form’s elements like Form Name, Form description, Form disabled message, Successful form submission message, and many more.
Next, you can go to Settings >> Email to manage your email notifications.
You can set To Address and From Address from here.
Other options like Reply To, Email Subject, Conditional Logic, and so on are also available.
7. Publish the Contact Form on Your WordPress Website
As the form is all set, you can now publish it on your WordPress site. To do so, go to Posts or Pages, where you want to add the form.
Choose the page or the blog post and open it to add the form. As soon as you open the page or post, you’ll see the block inserter icon [+] at the top. Click on it.
Now, type Everest Forms on the search bar to search for the contact form you created and customized. Hit the Everest Forms block once it shows up in your search result.
The block then shows up in the editor at the left. Use its drop-down menu and select the contact form you just created and customized.
Give an appropriate title to the form as we’ve given:
To see the appearance of the form on your site, preview the form by clicking on the Preview button.
When you feel everything is good and ready, you can hit the Publish button.
Congratulations! You’ve successfully created a contact form with Everest Forms, customized it thoroughly, and published the form on your site.
Wrapping Up
And that’s a wrap-up for our guide on how to customize contact form in WordPress. As you might have noticed, modifying contact forms in WordPress is extremely easy with Everest Forms.
So, you can use the Everest form on your WordPress site and create a beautiful and user-friendly contact form following our guide.
It has many other features like unlimited form fields, email marketing tool integration, spam protection, smart tags, etc. You can read our review of Everest Forms if you’re interested in learning more about this plugin.
Wait! We also have other articles that guide you through adding CAPTCHA in WordPress form, creating repeatable fields in WordPress forms, and many others.
You can visit our blog to find any kinds of articles related to WordPress and follow us on Twitter and Facebook to get alerts for every new article.
