contact Form in two columns

Have you thought about trying this?

Your Name [text* your-name] Your Email [email* your-email]

Thanks davejampole tried that it puts the email under the name in same column.

Are you talking about what the user enters or what you receive?

Take a look at one of my forms at <https://lcoc-moaa.org/scholarships/application/&gt; and tell what code you want and I’ll post it to you.

What I want is two columns like one of your lines is :

School ______________ Class Rank _____________ out of ______________

I would call that three columns.

Just trying to put like Name on the left and email on the right.

Name ___________________ Email _______________________

Thanks

Using following (as suggested by davejampole) will give you a very basic solution depending on the width available in the browser.

<p>Your Name [text* your-name] Your Email [email* your-email] </p>

Note you can and should control the width of each field in Contact Form 7 as follows to refine your layout:

<p>Your Name [text* your-name 20/40] Your Email [email* your-email 40] </p>

Your following approach will also a give basic solution provided you set up the classes “form-al-left” & “form-al-right” in the CSS in your theme:

<p class= “form-al-left”>Your Name
[text* your-name] </p>

<p class= “form-al-right”>Your Email
[email* your-email] </p>

I myself wouldn’t use either approach. It is nowadays common to use Fieldsets which you can start learning about at https://alistapart.com/article/prettyaccessibleforms.

louecrawford,

Here’s the code for the line you asked for, modified for what you want:

<div class="onerow">
<label>Name [text* Name class:text class:Name 35/]</label>
<label>E-mail [text* Email class:text class:email]</label>
</div>

If you wrap a logical group of elements in:

<fieldset>
      <legend><strong>Customer Information</strong></legend>
.
.
.
</fieldset>

AND place this code segment in your theme stylesheet (style.css)

fieldset {
	border: 1px solid #CCC;
   	border-radius:10px;
	-moz-border-radius:10px;
	margin: 5px 10px;
	padding-left: 22px;
}

you will get a border around that data with a title, called a legend.

Hope this works.