Single Row Email Form

Resolved joshdraha
(@joshdraha)

11 years, 4 months ago
I’m trying to get 3 input fields and a submit button in 1 row in a contact form but I can’t for the life of me figure out what is wrong with the coding.

My website is: http://northstarproviders.com/registration/

The first field should be: NAME, the second: EMAIL, the third: PHONE NUMBER, and the last field should be: SUBMIT>

The code I have in place right now in Contact Form 7 is:
```
<div class="form-inline form-register form-register-small">
	<div class="form-group">
		  [text* name class:form-control class:fullname placeholder "Name"]
	</div>

	<div class="form-group">
		[email* email class:form-control class:email placeholder "Email"]
	</div>

     <div class="form-group">
		  [text* phone class:form-control class:fullname placeholder "Phone"]
	</div>

	<div class="form-group submit-wrap">
		[submit  class:btn class:btn-primary class:btn-md "Submit"]
	</div>
</div>
```
Any help would be greatly appreciated.

https://ww.wp.xz.cn/plugins/contact-form-7/

Viewing 6 replies - 1 through 6 (of 6 total)

djijoecustodio
(@djijoecustodio)

11 years, 4 months ago

Same here. Have you realized how to work it out?
Thread Starter joshdraha
(@joshdraha)

11 years, 4 months ago
In the CSS change the percentages to:
```
.form-register-small .form-group .wpcf7-form-control.fullname { width:25%; }
.form-register-small .form-group .wpcf7-form-control.email { width:25%; }
.form-register-small .form-group .wpcf7-form-control.password { width:25%; }
```
Neil Murray
(@buzztone)

11 years, 4 months ago
I use Ordered List elements to display multiple fields on single line.

HTML:
```
<ol class="singleline">
<li> <label for="cf7-phone">Phone</label> [text cf7-phone 15/]</li>
<li> <label for="cf7-mobile">Mobile</label> [text cf7-mobile 15/]</li>
</ol>
```
Added to Form section of CF7 interface. Labels are added for improved accessability.

CSS:
```
.wpcf7-form .singleline ol {
list-style: none;
margin: 0;
}

.wpcf7-form .singleline li{
display: inline-block;
float: left;
margin-right: 10px;
padding-right: 10px;
}
```
Add via Child Theme or use custom CSS plugin.
djijoecustodio
(@djijoecustodio)

11 years, 4 months ago

.form-register-small .form-group .wpcf7-form-control.fullname { width:25%; }
.form-register-small .form-group .wpcf7-form-control.email { width:25%; }
.form-register-small .form-group .wpcf7-form-control.password { width:25%; }

Hi @joshdraha. Thanks for the reply. Besides, your code like shown quoted, doesn’t align the fields in the same line. Am I missing something on html?

For @buzztone, thank you very much. Your code actually works, but the left indent for the fields are not what I need, because they aren’t aligned with the left margin of the rest of the form. I guess the reason we are putting everything inside a list.

Best Regards to both of you.

djijoecustodio
(@djijoecustodio)

11 years, 4 months ago

The best way I found to solve this is as follows:

1 – CSS:
Find these on your CSS:
.wpcf7-form-control-wrap{ display:block !important; }
.wpcf7-form-control{
display: block;
width: 100%; }

Change to this:
.wpcf7-form-control-wrap{ display:inline-block !important; }

.wpcf7-form-control{
display: inline-block;
width: 100%; }
2 – WP:
Simple put the slugs in the same line, like this:
<p>Telefone:
[tel tel-561 class:tel_ddd] [tel tel-155 class:tel_phone]</p>

And, Voillá!

Best Regards.

dianasierra
(@dianasierra)

10 years, 11 months ago

Hi djijoecustodio!

I just did what you said and it’s the best solution i’ve found for this, except that the submit button is at the bottom of the form, creating a third line and using the whole widht.

Visually, it looks like this:

[Name ] [E-mail ] [Telephone ]
[Select one ] [Select one ]
[Submit button uses the whole with of the form]

But I want it to look like this (2 lines):

[Name ] [E-mail ] [Telephone ]
[Select one ] [Select one ] [Submit]

Any idea to change submit button size?

Thanks!