Contact form that stands out – simple steps guide

Custom-contact-form

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.

Custom contact form

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”.

Custom contact form

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.

Custom contact form

Here is how our form looks like without any customization.

Custom contact form

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">

Custom contact form

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:

Custom contact form

(clean form)

Custom contact form

(form with an error)

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:

Custom contact form

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.

READY TO TAKE YOUR BUSINESS TO THE NEXT LEVEL?

Let us help you turn your ideas into reality.

Start my project
Rafal Pajak
Rafal Pajak Managing Director, Online Marketing Specialist

I'm a Web Developer driven by a passion for user experience. For me, every project is special and needs that extra personal touch. I work towards achieving the best results for our clients and their businesses. No detail is too small to be insignificant. After hours I enjoy spending time with my family and planning trips around the world.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to get started? Start my project
Want to get started? Start my project