PHPMatters Help You Better Hosting Your PHP-based Sites
How to Create a Styling WordPress Contact Form using Contact Form 7

How to Create a Styling WordPress Contact Form using Contact Form 7

Having a contact form on your site is essential for achieving an effective communication between you and your online readers. Via this special form, people can easily tell you what they think of your content, what they want to learn from the next posts, what are the hottest topics in the recent days, what aspect you need to improve for the further optimization of your site and many more. In addition, readers are more likely to trust what you have said if they can contact you in the real world.

In this case, if you haven’t added such kind of special form, you can check below steps about how to create a WordPress contact form with the full customization.

Create a WordPress Contact Form using Contact Form 7

In fact, there are a lot of WordPress form plugins available, with which you can add a contact form to your site quickly. But this time, we’d like to take the plugin named as Contact Form 7 as an example, which is the most popular contact form plugin that has been downloaded for more than 1 million times, along with the frequent update for better functionality.

Now, you need to enter into your WordPress dashboard and search for this plugin from the Plugins tab for the proper installation and activation. After that, you can find a new tab added in the admin called as Contact. Simply click it.

Note that upon the successful activation, this special plugin will generate a contact form for you automatically. In this case, if you only want to showcase a single contact box on your site, there is no need for you to click the Add New button from the drop-down menu.

New Contact Form

Here, you can find a line of shortcode for this contact form exclusively. You simply need to copy and paste it into the webpage that you want to showcase this special form. Personally, we recommend you to publish a Contact Us page and include the shortcode into it.

That’s it! The contact form just looks as the below screenshot. Note that the display style is somewhat based on the design of your currently used website template.

Contact Form

Customize Your Contact Form for the Unique Style

To be frank, the default contact form generated by this plugin has a very plain looking, which may not be as properly designed as some other elements on your website. But thankfully, this great tool gives you enough freedom and flexibility for customizing your form with the simple markup and CSS coding stuff.

Here, simply click the name of your contact form for entering the settings page.

Modify the Form Options

By default, the contact form includes the fields of name, email address, message subject, message details and the send button. However, if needed, you can remove these current options or add some new ones such as telephone number, website URL, checkboxes, radio buttons, file, quiz, submit buttons and many more. There is a special Tag Generation bar that allows you to add any option you want.

Tag Generation Bar

For instance, if you want to add the file submission option, you simply need to click the file tag. Here, you can be presented with a pop-up box that requires you to determine whether this is a required field and decide the tag name, file size and file types. Note that different tags may require you to finish different settings.

Add File Tag

Set Up the Message Options

After people clicking the Send button for sending you the contact information, you need to give them a feedback of whether they have sent successfully or not. If not, tell them what is wrong.

In fact, this plugin has already offered the correct words for these messages. However, if you have your own idea, you change these textual contents easily.

Message Options

Configure the Additional Settings

In fact, you can add some additional settings for your contact form by entering the code snippets into the field of Additional Settings. By default, this plugin supports three types of extra settings with the following lines of coding stuff displayed in the below screenshot.

Additional Settings

  • Demo – If the form is in the demo mode, it will pass the process for sending mails but just showcase a “Success” message as a response.
  • Acceptance – This setting ensures that all the acceptance checkboxes work the same way as the validation mechanism, and showcase the error message when people fail to check the boxes.
  • Sent or Submit – This setting gives you an alert when the mail is sent or when the form is submitted successfully.

Add the reCAPTCHA System

It is possible that some spammers will leverage your contact form to send you the spam and junk messages. In this case, to protect your site away from the potential abuse and spam, you’d better add the reCAPTCHA service.

You can make use of the Integration system of this plugin to achieve the goal. Here, you simply need to click the Integration button from the Contact drop-down menu. Here, you can find a Configure Keys button. Simply press it.

Configure Keys

Next, you are required to enter the Site Key and the Secret Key for the proper utilization of the reCAPTCHA system. To get the keys, you need to enter this page and click the Get reCAPTCHA button. In the next screen, you can register your site to enjoy the service by entering the right domain and label.

Register for reCAPTCHA

A few seconds later, you can get the required keys. After entering them into the right fields, you can check your contact form to figure out whether the reCAPTCHA system is added.

Change the Overall Appearance

If you want to change the appearance of this form with unique color schemes and fonts, you need to utilize the CSS coding into the stylesheet of your current theme.

For this, you need to click the theme editor button from the Appearance tab and hit the StyleSheet option. In this coding area, you can search for your contact page and enter the CSS coding beneath the default settings. In the following, we have showcased the sample coding that changes the background color, padding, border and font of the contact form.

Change Contact Form Appearance

The detailed coding knowledge of this plugin can be found from this Docs of Contact Form 7.

Add the Popup Function

For some reasons, you may want to add a popup contact form on your website. To achieve this, only having the Contact Form 7 installed is not enough. You also need the help of Popup Maker.

Once you have installed it, you need to click the Add New button from the Popup Maker tab. Then, you simply need to enter the shortcode of your contact form in the body section of the editing screen, decide a name for the popup form, choose the targeting conditions for showing the form and publish it. Thus, you can add the popup function for the contact form successfully.

Popup Maker

Even, you can decide some display settings for this popup form.

  • Size – You can decide the size from Nano to X Large, along with the options of Responsive Size and Custom Size. Also, the minimum and the maximum width can be decided.
  • Animation – There are 5 types of popup animation, along with unlimited animation speed.
  • Position – You can showcase the contact form at any place you want, and determine the margins based on your webpage design.
  • Auto Open – If needed, you can display your popup contact form automatically.