How To create a one row form using contact form 7

Many of my clients, request Lead capture forms using cf7. They ask to display the fields side by side so it looks attractive and more convenient.

So, how to create a one row form using cf7?

In this brief tutorial, I will show you how to create a stunning one row form, using cf7.

First, we will need to create a new contact form and we can create 2 text fields, Name, Email and of course a submit button.

Here is the HTML code for our demo form:

One row form using contact form 7

XHTML

1

2

3

4

5

6

7

8

9

10

11

<div class="contact-container">

<div class="one-half">

[text* Fullname placeholder "Enter your first name"]

</div>

<div class="one-half">

[email* email placeholder "Enter your email"]

</div>

<div class="one-half">

[submit "CONTACT ME"]

</div>

</div>

Now check out, how my form looks, before I add the CSS code.

Of course, this will be different from one person to another, since we are not using the same theme, but we can control the look and feel of the form using css, and you can adjust that code to suite your needs.

here is the CSS code that i created for this form.

one row form using contact form 7: CSS code

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.one-half {

width:190px;

position:relative;

margin-right:1%;

float:left;

}

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

.one-half, .one-third {

width:100%;

margin-right:0;

}

.wpcf7-form .wpcf7-text {

width:100%!important;

margin-bottom:2%;

}

.wpcf7-form input[type="submit"], .wpcf7-submit {

width:100%;

}

}

Lets see how my form looks now.

As you can see the form now shows in one row, but it needs more styling and this is why we will require to adjust the cf7 style to make this fit perfectly into my theme.

Here is the final CSS code.

contact form 7 styling

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

.wpcf7-form .wpcf7-text {

border:1pxsolid#cacaca;

width:190px!important;

font-size:13px;

color:#7c8187!important;

padding:8px15px;

float:left;

margin-right:1%;

height:42.67px;

background-color:#f0f0f0;

font-weight:700;

}

.wpcf7-form input[type="submit"], .wpcf7-submit {

background:transparent;

font-size:13px;

width:190px;

height:42.67px;

border:1px#6eab3dsolid;

color:#6eab3d;

}

And here is the final live form.

if you have any question regarding the brief tutorial, please let me know.