Form-field-in-2-column-contact-form-7-wordpress

How To Display Fields In 2 Columns Contact Form 7 WordPress

Today i want to tell you how to display field in 2 column in contact form 7 wordpress.

Follow below steps:-

Step:1. Install contact form 7 plugin in website.

Step:2. Go to Add New Contact Form. Now you can see deafult layout of form.

Default-Form-Layout
Default-Form-Layout

Step:3. Copy Form shortcode and paste it on page where you want to show. Now save page and view page output. You can see form default layout output.

Step:4. Now you can divide field into 2 column. I`m going show you how to display those fields in 2 columns.

Write HTML code with fields:

HTML Contact From Code:-

<div class=”one-half”>

<label> Your Name (required)

[text* your-name]</label>

</div>

<div class=”one-half last”>

<label> Your Email (required)

    [email* your-email] </label>

</div>

<div class=”one-half”>

<label> Phone No. (required)

[tel* phone]</label> </label>

</div>

<div class=”one-half last”>

<label> Query (required)

    [text* your-subject] </label>

</div>

<label> Message

    [textarea your-message] </label>

[submit “Send”]

HTML-Code-Layout
HTML-Code-Layout

Step:5. Now Copy below css code and paste in your CSS file or Theme Option CSS Section

Save css code. And view page where contact form display.

CSS Code:-

.one-half{

    position: relative;

    margin-right: 4%;

    float: left;

    margin-bottom: 20px;

}

.one-half {

 width: 48%;

 }

 .last {

    margin-right: 0 !important;

    clear: right;

}

@media only screen and (max-width: 767px) {

    .one-half{

        width: 100%;

        margin-right: 0;

    }

}

Step:6. Now you can see form field divide into 2 column.

Final-For-output

Leave a Reply

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