Contact form that stands out - simple steps guide

Let's assume that you have a new page or new post to publish on your website and you want to insert a custom contact form. You could insert shortcode with a generic form from your default contact form plugin or you could create a form that will stand out and attract visitors. Are you interested in the second variant? Follow this guide to create your own custom contact form.


First things first

We will not be installing WordPress here. But we will work on Twenty Seventeen template. Let's jump straight into the process.

1. First of all, we need to install the plugin "Contact Form 7". To do that go to Plugins > Add New > in search box type Contact Form 7.

Contact form that stand out - simple steps guide - 01

The plugin that we need should show up first on the list. Go ahead, install it and then activate.

Now you should have a new position on the side menu called Contact.

2. Create new contact form ( Contact > Add New ), give it a name - in our example, we will call it "My Custom Form".

Contact form that stand out - simple steps guide - 02

Add an id to each field tag (id: name, id: email, id: subject, id: message in turn). Now save it and voila, we have a new contact form.

Just remember to save those id names for later use.

3. Paste shortcode into your post/page. In our case, the shortcode looks like this

[ contact-form-7 id="5" title="My Custom Form" ]

In your case, it will look a bit different.

Contact form that stand out - simple steps guide - 03

Here is how our form looks like without any customization.

Contact form that stand out - simple steps guide - 04

Ok, now we can start the fun part and create a little bit of code to change the appearance of the contact form.


Let's find the line we need

Now we need to find the ID of our form and classes to customize our fields. In this example, we are using Chrome, but you can check that in most of the modern web browsers.

4. Hit CMD + OPTION + I on Mac or CTRL + ALT + I on PC.

The Developer Tools window should pop up on the right and your website window will shrink a little. Next hit CMD + SHIFT + C on Mac or CTRL + SHIFT + C on PC and click anywhere on your newly created contact form and then scroll up in Developer Tools window and look for

<div role="form" class="wpcf7" id="wpcf7-f5-p9-o1" lang="en-GB" dir="ltr">
Contact form that stand out - simple steps guide - 05

What we need from here is the ID name **wpcf7-f5-p9-o1** of our form. (numbers 5, 9 and 1 will be different in your case, but the syntax stays the same). Keep it for the next step.


Start the customization

5. Go to Appearance > Customise and click Additional CSS.

Remember the ID we saved in the last step? Now we will need that.

Example #1

We will create code to make our contact form looks like this:

Contact form that stand out - simple steps guide - 06 Contact form that stand out - simple steps guide - 07

6. Copy the code below to the Additional CSS window.

First, we want to customize the main box in which the form lives.

#wpcf7-f5-p9-o1 {
 background-color: #e8256f;
 border-radius: 8px;
 padding: 30px;
}

Now let's customize the labels:

#wpcf7-f5-p9-o1 label {
 font-size: 12px;
 color: #fff;
 font-weight: normal;
}

If we want to change the look of the input fields:

#wpcf7-f5-p9-o1 #name,
#wpcf7-f5-p9-o1 #email, #wpcf7-f5-p9-o1 #subject, #wpcf7-f5-p9-o1 #message { border-radius: 6px; border-color: #f1f1f1; padding: 7px 20px; }

To customize the submit button copy the code below. First part modifying the look of a button untouched and the second part is customizing the button when it is on hover:

#wpcf7-f5-p9-o1 input[type="submit"] {
 border-radius: 6px;
 color: #e8256f;
 background-color: #fff;
}

#wpcf7-f5-p9-o1 input[type="submit"]:hover {
 box-shadow: 3px 5px 15px rgba(0,0,0,0.2);
}

And the last part. Let's customize the look of an error message:

.wpcf7-not-valid-tip,
.wpcf7-response-output { 
 border: 1px solid red !important;
 border-radius: 6px;
 color: red;
 background-color: rgba(255,255,255,0.7);
 margin-top: 4px;
 border-radius: 4px;
 padding: 4px;
}

Just to make it easier for here you have whole code in one place. Copy and paste the code below into your Additional CSS window.

#wpcf7-f5-p9-o1 {
 background-color: #e8256f;
 border-radius: 8px;
 padding: 30px;
}

#wpcf7-f5-p9-o1 label {
 font-size: 12px;
 color: #fff;
 font-weight: normal;
}

#wpcf7-f5-p9-o1 #name,
#wpcf7-f5-p9-o1 #email,
#wpcf7-f5-p9-o1 #subject,
#wpcf7-f5-p9-o1 #message {
 border-radius: 6px;
 border-color: #f1f1f1;
 padding: 7px 20px;
}

#wpcf7-f5-p9-o1 input[type="submit"] {
 border-radius: 6px;
 color: #e8256f;
 background-color: #fff;
}

#wpcf7-f5-p9-o1 input[type="submit"]:hover {
 box-shadow: 3px 5px 15px rgba(0,0,0,0.2);
}

.wpcf7-not-valid-tip,
.wpcf7-response-output { 
 border: 1px solid red !important;
 border-radius: 6px;
 color: red;
 background-color: rgba(255,255,255,0.7);
 margin-top: 4px;
 padding: 4px;
}

Example #2

We will create code to make our contact form looks like this:

Contact form that stand out - simple steps guide - 08

The first field in the example above is on hover, that's why the border is in a different colour.

7. Ok, let's start.** Copy the code below like in the previous example to make changes to your default form look.

#wpcf7-f5-p9-o1 {
border: 2px solid rgba(35, 131, 221, 0.2);
border-radius: 12px;
padding: 20px 32px;
}

#wpcf7-f5-p9-o1 label {
font-size: 12px;
color: #fff;
font-weight: normal;
}

#wpcf7-f5-p9-o1 #name,
#wpcf7-f5-p9-o1 #email,
#wpcf7-f5-p9-o1 #subject,
#wpcf7-f5-p9-o1 #message {
border-radius: 30px;
border: none;
border-bottom: 2px solid rgba(35, 131, 221, 0.2);
padding: 7px 20px;
}

#wpcf7-f5-p9-o1 #name:focus,
#wpcf7-f5-p9-o1 #email:focus,
#wpcf7-f5-p9-o1 #subject:focus,
#wpcf7-f5-p9-o1 #message:focus {
border-bottom: 2px solid rgba(35, 131, 221, 1);
}

#wpcf7-f5-p9-o1 input[type="submit"] {
border-radius: 30px;
border: 2px solid #2383dd;
color: #2383dd;
background-color: #fff;
text-transform: uppercase;
}

#wpcf7-f5-p9-o1 input[type="submit"]:hover {
border: 2px solid #2383dd;
color: #fff;
background-color: #2383dd;
}

.wpcf7-not-valid-tip,
.wpcf7-response-output {
border: none !important;
color: red;
background-color: rgba(255,255,255,0.7);
margin-top: 4px;
padding: 4px;
}

In this article, we've only scratched the topic of customizing contact form to make it looks the way you want it to look. If you having problems with customizing your contact form or if you want to propose what should be the topic of our next article you can contact us **(CLICK)**. Stay tuned for the next article.