WordPress Tutorials

How to Design Contact Form 7 like an Expert

Contact Form 7 is one of the most Popular plugins to build forms for WordPress website and it’s really simple but powerful and easy to use.

Default Design of Contact form 7 is not very attractive so you need to customize it, in order to match the theme of your website or If you just want to be creative.

Though there are some plugins which help you to design contact form 7 but come on, You shouldn’t use plugin for everything as it can affect performance of your site

How To Customize the Style Of Contact Form 7?

We will use CSS to design our contact form. If you are wondering, Where to Edit Your Contact Form 7 CSS?

The easiest way to Add the CSS in “Additional CSS” tab in your WordPress customizer. or if your theme provides a section in its admin panel for custom CSS you can use that too.

By default contact form 7 design looks similar to the screenshot below. Unless your theme includes some default styling for contact form 7.

 

Before we begin you need to understand the different class selectors for contact form 7 and then we can add styles below it.

Basic Class Selectors for Contact form 7

 

.wpcf7 
// Selector for complete contact form 7 includeing background

.wpcf7 input
// Selector for Input fields, such as name and email

.wpcf7-submit
// Selector for send Message

Now let’s begin Designing our Contact form.

Because contact form looks too big I will add some padding around it to squeeze it little and add a border around it also add color in the background.

For this, we will use the main selector that is .wpcf7 so code CSS example for this would be

.wpcf7 {
    background-color: #ccedf2;
    padding: 40px;
    border: 1px solid black;
}

and Result is:

Now, see that “send” button at the bottom which looks very tiny. Let’s make it full size, change its color
for that we need to select submission class

.wpcf7-submit {
    width: 100%;
    background-color: #f92c8b;}

Hmm… Looks better?

Let’s go Little advanced Now…

Advanced Class Selectors for Contact form 7

.wpcf7-list-item

.wpcf7 select

.wpcf7-validation-errors

.wpcf7-mail-sent-ok

.wpcf7-mail-sent-ng

.wpcf7-mail-sent-ok

 

So, How I design Contact Form 7?

Copy the code below and add in your custom CSS or the child theme.

.wpcf7 input, 
.wpcf7 textarea{
    
    width: 90%;
    padding:10px;
    color:#8e8e8e;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height: 20px;

    border: solid 1px #9f9f9f; 
    
    box-shadow: inset 2px 2px 8px #bababa;
    
    -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
    
}

.wpcf7 .wpcf7-list-item{
  padding-left: 0;
  margin-left: 0;
  margin-right: 25px;
}

.wpcf7 .wpcf7-list-item input{
  border: none;
  padding-left: 0;
  margin-left: 0;
}

.wpcf7 select{
  outline: none;
  font-size:16px;
  font-family:Arial, Helvetica, sans-serif;
}

.wpcf7 input:hover, 
.wpcf7 input:focus, 
.wpcf7 input:active, 
.wpcf7 textarea:hover, 
.wpcf7 textarea:focus, 
.wpcf7 textarea:active {
  background: #ebf7f5;
  outline: none;
}

.wpcf7 input.wpcf7-submit{

    -webkit-transition: 0;
  -moz-transition: 0;
  -o-transition: 0;
  transition: 0;
  
  border: none;
  position: relative;
  
  color: #fff;
  
  text-shadow: 1px -2px 0px black;
  
  text-transform: uppercase;
  
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  
  font-size: 14px;
  
  padding-top: 11px;
  padding-bottom: 10px;
  padding-left: 35px;
  padding-right: 35px;
  
  /* Gradient background */
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#000000));  
  background:  -moz-linear-gradient(top, #4d1b5c, #000000);  
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#000000');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#000000)";
  
  /* Drop Shadow */
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  
}

/* On hover */
.wpcf7 input.wpcf7-submit:hover{
  
  cursor: pointer;
  text-decoration: none;
  
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#6d2f80));  
  background:  -moz-linear-gradient(top, #4d1b5c, #6d2f80);  
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#6d2f80');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#6d2f80)"; 
}

/* On click */
.wpcf7 input.wpcf7-submit:active{
  top: 1px;
  
  color: #d8c6e2;
  
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#4d1b5c));  
  background:  -moz-linear-gradient(top, #4d1b5c, #4d1b5c);  
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#4d1b5c');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#4d1b5c)"; 
  
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* CF7 Messages */
.wpcf7 .wpcf7-validation-errors{
    border:none;
    background-color:#f4ae46;
    margin:0;
    padding:20px;
    
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ok{
    border:none;
    background-color:#7ad33f;
    margin:0;
    padding:20px;
    
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.wpcf7 .wpcf7-mail-sent-ng{
    border:none;
    background-color:#cf2d38;
    margin:0;
    padding:20px;
  
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  
    color: white;
}

.wpcf7 span.wpcf7-not-valid-tip{
    border:none;
    background-color:#cf2d38;
    padding:10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius:10px;
    width: 180px;
    color: white;
    
    /* Drop shadow */
    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

.wpcf7-form .fleft{
  float: left;
}

.wpcf7-form .mright20{
  margin-right: 20px;
}

.wpcf7-form .mright40{
  margin-right: 40px;
}

.wpcf7-form .clear{
  clear: both;
}

WRAP UP

There are plenty of ways you can style your contact form7 with just CSS and yes without any plugins. If need any particular element to design please let me know.

I Hope this helped to create your contact form 7. If any questions, please leave a comment below.

If you liked this article, then please give us thumbs up on Twitter and Facebook for future updates.

Show More

One Comment

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close
Close