Browse By

An Awesome Contact Form 7 HTML Template Code For Your WordPress Site

Update: We have created an online course to help you create custom forms and give you a step-by-step procedure on how to embed your forms into a template file and style the form using CSS. View the course here.

Whether you want to create a new enquiry form using Contact Form 7 or edit an existing one, this HTML template code will work great with any website.

Always remember to add tracking to your contact form in order to monitor which sources of traffic are netting you the most conversions. if you are new to the plugin read my ultimate guide on how to use Contact Form 7.

Contact Form 7 Design

Contact forms are meant to be simple and hassle-free. When users visit your website, they are most likely in a hurry and if the page does not load within 5 minutes they will bounce.

We may earn a small commision at no extra cost to you if you sign up.

You should always use Google Analytics to identify which of your webpages are slowest and use Google’s recommendation to speed up your site to ensure higher conversions.

In order to get lightweight code that does not slow down your site your contact form should be simple. Look at the example below from a coffee machine website:

Contact Form 7 Template Code

The example above uses a nice lifestyle image and a clean contact form design.

Contact Form 7 Template Code

Try our online course to find out how to create custom contact forms beautifully styled using CSS.

In order to get a similar design use the HTML code template below.

<div>[text* your-name placeholder "Your Full Name*"]</div> 
<div>[text* company-name placeholder "Company Name*"]</div> 
<div>[text* your-address placeholder "Business Address*"]</div>
<div>[text* your-postcode placeholder "Postcode*"]</div>
<div id="emailcf7margin">[email* your-email placeholder "Email Address*"] </div>
<div class="telcf7margin">[tel* Telephone placeholder "Phone Number*"] </div>
<div style="display:none;margin-bottom:5px;">[dynamictext* your-subject "CF7_get_post_var key='title'"]</div>
[textarea your-message placeholder "Tell us more about your requirements"]
[submit "Send"]

We have placed everything in a div because it makes it easier to style the entire form.

The above code is also using the Contact Form 7 Dynamic Text Extension which will automatically input the page title into the subject field.

It is a great addition which will ensure that once the email is sent, the page title is immediately visible so that I know where the contact form was filled.

This is the CSS used to style it to create a clean design:

input, select {input, select {        margin-top: 5px;        margin-bottom: 5px; border: 1px solid #E5E5E5; width: 100%; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; }
input[type="submit"]{width: 30px!important;}

You can put the entire code into the Form tab in contact form 7, however the CSS code will need to sit inside the <style></style> tags.

Once you save your contact form you can embed it directly into your WordPress template file using the do_shortcode() function:

<?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>

Designing the Entire Container

Once you sort out the code in contact form you need to design the container that the contact form actually sits in to to finish the design.

For example, if you have a div on the page where your contact form will go, it might look something like this:

<div id="contactformdiv class="cf7div">[contact-form-7 404 "Not Found"]</div>

You need to style the div to add a nice background, some padding on the sides and the top and bottom.

You can do that using the following CSS:

margin-top20px;border-top-width1px;border-right-width1px;border-bottom-width1px;border-left-width1px;padding-top15px;padding-right15px;padding-bottom5px;padding-left15px;background-color#ffffff;border-left-colorrgba(255,255,255,0.75);border-left-stylesolid;border-right-colorrgba(255,255,255,0.75);border-right-stylesolid;border-top-colorrgba(255,255,255,0.75);border-top-stylesolid;border-bottom-colorrgba(255,255,255,0.75);border-bottom-stylesolid !important;border-radius10px;

Contact Form 7 TutorialWhy Use A Contact Form 7 Template?

The template above will save you a lot of time. Just insert the code into your site and you have a beautiful, functional contact form.

It is up to you to then track all the submissions from your new contact form in Google Analytics and then check any pages that may have bad performance because a slow site will hinder conversions.

In addition to tracking contact form submissions you can also track email mailto link clicks with a simple JavaScript code.

Check out our Contact Form 7 tutorial online course to find out more.

You may also like

4 thoughts on “An Awesome Contact Form 7 HTML Template Code For Your WordPress Site”

  1. Jennifer Fernando says:

    Great website. The content is very informative.

    1. Isaac King says:

      Thanks!

  2. Aubrey Rippel says:

    Thank you!

    1. Isaac King says:

      You’re welcome Aubrey!

Leave a Reply

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