Best Way to style Contact Form 7

Best Way to style Contact Form 7

We should perceive how we can style individual fields in a contact structure. There are a few kinds of information fields. The most widely recognized field is a solitary line text input field so we should add a style rule for it:

Let Get Started .

Default Form

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]
/*Styling Label of form */
.wpcf7-form label {
    width: 100%;
    float: left;
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase;
/*Styling form Input Field, Textarea */
.wpcf7-form label .wpcf7-form-control {
    float: left;
    margin-top: 10px;
    background-color: #fff;
    border: 2px solid #e5e5e5;
    color: #a7a7c1;
    padding: 8px 28px;
    line-height: normal;
    font-size: 14px;
    min-height: 50px; /*This will use for input field height*/
    border-radius: 0;
    width: 100%;
    outline: none;
    max-height: 125px; /*This will use for textarea field height*/
/*Styling form Input Field On Active,Focus This will change border color  */
.wpcf7-form label .wpcf7-form-control::active,
.wpcf7-form label .wpcf7-form-control::focus{
    outline: 0;
    border-color: #015dc7;
/*Styling of Submit Button */
.wpcf7-form-control.wpcf7-submit {
    background-color: transparent;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 15px;
    border: 2px solid #015dc7;
    border-radius: 0px;
    padding: 15px 60px;
    color: #015dc7;
    transition: all ease-in 0.3s;
/*Styling of Submit Button on Hover */
    background-color: #015dc7;
    color: #fff;
/*Styling of Validation Message */
.wpcf7-form .wpcf7-not-valid-tip {
    float: left;
    width: 100%;
    background-color: #f2f2f2;
    padding: 6px 30px;
    border-left: 4px solid #fe1f0a;
    font-size: 13px;

Output Screenshot

Similar Blog Posts

How to Create Multisite in WordPress

How you can create and set up a WordPress multisite to build a network of…

How to rank my WordPress website on Google?

Search engine optimization is an accumulation of techniques and strategies used to increase the range…

Make a Custom Page Template in a WordPress Theme

Basically all the pages and posts that are created on a WordPress website is handled…