Your goal is to create a custom design for a Contact Form 7 Form in a WordPress website. You can use the following steps to accomplish this.

custom style design contact form

Everyone desires to have a unique and attractive look to their contact form of a website. Adding custom Style CSS to a Contact Form 7 Form is Simple.

We will take this snippet of CSS code for example.

.wpcf7-form label, .wpcf7-form p
{
font-weight: bold;
color: black;
}
.wpcf7-form-control-wrap input.wpcf7-text,
.wpcf7-form-control-wrap input.wpcf7-date,
.wpcf7-form-control-wrap input.wpcf7-file,
.wpcf7-form-control-wrap textarea.wpcf7-textarea,
.wpcf7-form-control-wrap select.wpcf7-select,
.wpcf7-form-control-wrap div.select-arrow
{
color: #c7c4c5;
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
border-bottom: 1px solid #c7c4c5;
}
.wpcf7-form-control-wrap input.wpcf7-file
{
outline: 0;
border: 0;
}
.wpcf7-form-control-wrap input.wpcf7-text:focus,
.wpcf7-form-control-wrap input.wpcf7-date:focus,
.wpcf7-form-control-wrap input.wpcf7-file:focus,
.wpcf7-form-control-wrap textarea.wpcf7-textarea:focus,
.wpcf7-form-control-wrap select.wpcf7-select:focus,
.wpcf7-form-control-wrap div.select-arrow:focus
{
outline: none;
border-top: none !important;
border-right: none !important;
border-left: none !important;
border-bottom: 2px solid darkgray !important;
}
input.wpcf7-submit
{
background-color: #5bce93 !important;
border-radius: 8px !important;
transform: translateY(15px);
transition-duration: 0.4s;
}
input.wpcf7-submit:hover, input.wpcf7-submit:focus
{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
transform: translateY(10px);
}
.wpcf7-form
{
border: 3px solid #5bce93;
padding: 25px;
}
.wpcf7-form > p:nth-of-type(1)
{
color: #1a3045;
font-size: 1.5em;
font-family: sans-serif;
padding: 10px 0 20px 0;
}
span.wpcf7-not-valid-tip
{
font-size: 0.75em;
}

Step 1.

Go to edit the page that contains this contact form 7 form.

If you’re using Avada theme with Fusion builder, you may add CSS to it’s Custom CSS Area as shown in the image.

Similarly, there are other Page builders with similar option to Add Custom CSS which you may use to Add CSS.

WPBakery – Visual Composer

If these options are not available to you, you may use WPCode Plugin to Add Custom CSS to your page that consists of Contact Form 7 Form.

First you have to install and activate WPCode free plugin to your WordPress website dashboard. Either by searching or this link.

 

Then as shown in the image you have to go to it’s option +Add Snippet.

 

In the next Screen, Copy and Paste CSS to Editor, Select Code Type –  CSS snippet, Add name to this snippet, Toggle status to Active and Press Update. As shown in this image.

 

Lastly scroll down in this page to see these two options, Auto Insert and Shortcode. In this window click on shortcode and copy this shortcode.

Then, go back to your edit page screen, and paste this shortcode in visual editor to use custom CSS in this page.

After publishing this page. (Make sure contact form 7 form is used in this page that’s edited.) You will be able to see the custom style CSS applied to it’s form in page.

Categories: Programming Tutorials

by ajithimself@yahoo.com

Share

Get In Touch for Free Consultation!




    Send Whatsapp Message to
    +91 8793326974

    Email Requirement to hello@ajitsing.in
    Geo Co-Working Space,
    Vishal Nagar, Pimple Nilakh
    411027
    Pune.
    Near Wakad.