Best Way To Style Contact form 7

Best Way to style Contact Form 7

On this page, we’ll take a look on how to style contact form 7 Text Field , Phone Field, Placeholder,Radio , checkbox,  Submit button, validation .

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


  • October 19, 2020


    Best View i have ever seen !

  • February 23, 2021

    Best view i have ever seen !

  • March 24, 2021

    Best view i have ever seen !

Leave A Reply