You don't have javascript enabled. Good luck with that. Customize the contact 7 form in WordPress with these simple steps

Customize the contact 7 form in WordPress with these simple steps

Thursday, June 30, 2022 / WordPress Plugin / admin

customize contact form 7 in wordpress


Contact Form 7 is a popular WordPress plugin that lets you customize it as per your requirements. It enables you to personalize the contact form email for both users and administrators.


You can choose the most appropriate email template from the pre-developed formats and easily modify it to meet your needs.


Contact Form 7 allows you to create multiple contact forms from the simple HTML markup that it creates. Once formed, each form can be easily deployed by inserting its correlating shortcode into the page, post, or widget area where you want the form to show up.


It is among the most widely used WordPress plugins and is free to utilize. Forms can be used throughout your website and even displayed in a pop-up window.


What are the reasons behind the increasing popularity of contact 7 Form? 


Contact Form 7 is one of several WordPress form alternatives, but it is also one of the best-known and most popular. It has over 5 million users and has some useful and interesting functionalities.


Let’s look at why businesses use it:


  • It is extremely simple to use.
  • The form fields are easily customizable;
  • It is completely free to use.
  • It has a wide range of plugins available to enhance the functionality 
  • Using the short code, you will be able to quickly add your form anywhere you want to!
  • You can set up and manage multiple contact forms at once.
  • It continues to support all types of anti-spam filtration and captcha; 



Step 1 – Install & Activate the plugin 


First and foremost, if you haven’t already, install and activate the Contact Form 7 plugin. Begin by going to the left-hand admin dashboard and simply click on Plugins, then choosing the Add New alternative.


Scroll to the bottom until you locate the Contact Form 7 browser extension, then tap the “Download Now” button to activate it.


Go to Plugin -> Add New -> Look for Contact Form 7 -> Install -> Activate, and that’s all there is to it.


You must first create a form before you can use custom CSS to personalize it. The plugin allows users to create a form and use a short code to showcase the form on your website’s specific pages.


Step 2 – Creating a form 


After activating the plugin, you need to simply navigate to contact -> Add New on the dashboard. Let’s now complete the headline of your form and customize it to your liking.


When you create a new form, this extension will manually incorporate the name, subject, email, and text fields for you. You can, nevertheless, add other fields as per your requirements.


Don’t ignore saving your settings after you’ve finished developing a new form. The following step is to replicate the shortcode under the title.


Now, navigate to the post or page to which you would like to add the contact form. 


If you’re using the WordPress Block Editor, go to the ‘+’ symbol -> Add a Shortcode Block -> Enter the shortcode into the block. Remember to save it and refresh the post/page to keep all of your adjustments.


Step 3 – Customizing your Form using CSS 


You will need to style your forms using CSS because Contact Form 7 lacks embedded style alternatives.


For forms, Contact Form 7 comes up with a code that complies with standards. If you are familiar with CSS, it is simple to customize the form because each element has a specific ID and CSS class assigned to it.


Above everything, keep a close eye out for any syntax mistakes. These can cause errors and unforeseen consequences on your webpage. Use a sub-domain as a testing phase if you are unfamiliar with the CSS.


Here’s how you can do it? 


  • Select Personalize from the Appearance menu in the left-hand admin dashboard by clicking on Appearance.
  • Select Customize from the Appearance menu.
  • On the left, select the Additional CSS alternative. You can add custom CSS to your website here.


Step 4 – Styling your Contact Form 7 


This plugin provides two options for form styling. Readymade forms are the first and simplest to use. There are both festive and professional formats to choose from.


  • Navigate to the form you would like to modify.
  • The plugin should now include a new Contact Form 7 Style Template tab. Click on it.
  • Select the Contact Form 7 Style Template option.
  • You can now select which template to use on your form. You can change this at any time.


The 2nd approach is to make a custom layout. 

  • Click Contact Style and then Add New on the left-hand admin side.
  • Pick the Add New option under Contact Style.
  • You can customize the margins, background image, border color, button appearance, text box color, and other elements as needed. 


As a result, even if you are unfamiliar with CSS, the plugin is extremely useful.


Note – A very thorough demo video on how to personalize a form can be found on the Contact Form 7 Style plugin page. 


Custom Pre-developed Contact Form 7 Email Templates

18+ Pre-developed responsive email templates


How to customize multiple forms? 


The issue with the CSS is that it will be added to all of your website’s CONTACT FORM 7 forms. You must use the unique identifier generated by contact form 7 for each form if you use multiple contact forms and want to stylize them differently.


All you need to do is open the page that contains the form you would like to change. Drag the mouse pointer to the form’s top field, then use the right-click menu to choose “Check the Element.”


Note – You will be able to view the page’s source code after the browser screen splits. We must find the form code in the source code.


The id characteristic is a one-of-a-kind identifier created by Contact Form 7 for this specific form.


It is a mixture of the form id and the post id to which this form has been added. To style and substitute our contact form, we can utilize this ID in our CSS and replicate wpcf7 in our initial CSS snippet with #wpcf7-f113-p114-o1.


You can now repeat the procedure for all of your forms, replacing the form ID for each Contact form 7  you would like to personalize.


How to add reCAPTCHA to your contact form on your website? 


The steps listed below will allow you to add reCAPTCHA to your Contact Form 7 form to stop spam.


First and foremost, you must register your WordPress website. To proceed, let’s open the My reCAPTCHA page and complete the necessary fields. Simple steps include entering the Label, selecting reCAPTCHA v3, adding the domains for your website, and clicking the Accept Terms of Service button. 


You simply need to click the Submit button to proceed to the next step after that and copy the site key and the private keys for your WordPress site.


The following action is returning to your WordPress admin dashboard. Then, navigate to contact -> integration, locate the reCAPTCHA segment, and tap Setup Incorporation.


Finally, all you have to do is paste the site key and secret key that you had previously copied. Remember to save all of your changes.


Last but not the least, focus on functionality! 


Here is a quick piece of advice from our end: don’t get carried away with customizing the form to the point where it looks cluttered; instead, concentrate on making it more useful.


For example, you might want to be creative and use unusual colors for your forms, which can work most of the time. Even so, there may be times when you make it extremely difficult for some visitors to read.


Many newbies cannot take into account, colorblind customers. That’s right, you may think you’re clever by using unusual colors, but they may be difficult to read for these people. Introducing too many stuff and features will also frustrate users.


So, make it simple and functional for your visitors.


To wrap it up! 


This concludes this brief but useful tutorial. If you are familiar with CSS, you can easily style the Contact Form 7 form. We hope you have found it useful and will use it in potential CF7 forms that necessitate personalizations.


It is quite true, that some back & forth is required, but that is to be predicted for an unrestricted plugin.


I believe that the lack of customization options by default is a big reason why the plugin appears to work so well for so many people. So it’s only fair for anyone who gets a great deal of value from it and wants more style to add to their form!