Side by side fileds

  • I realise this may have been talked about before but I can’t seem to get it to work.

    I need to layout my contact form with side-by-side fields for first two filed.

    For example: “name” and “phone” field on one line.
    Then “email” on next
    And finally “messsage” on the last line.

    I also need it to that when you tab between then it goes from “name” to “phone” to “emmail” to “messages”

    I really hope that makes sense!

    Thank you for any help you can provide me.

    JAmes

Viewing 1 replies (of 1 total)

  • Hello –

    I do this regularly on my sites, the trick is to use column classes. Here’s an example that hopefully you can modify to suit your exact needs.

    First, define your form using ‘one-half’ and ‘first’ classes like so:

    <label class="one-half first">First Name*
    [text* your-first-name] </label>

<label class="one-half">Last Name*
    [text* your-last-name] </label>

<label class="one-half first">Company*
    [text* your-company] </label>

<label class="one-half">Title
    [text your-title] </label>

<label class="first">Email*
    [email* your-email] </label>

<label>Message
    [textarea your-message] </label>

    Then, add some CSS to your theme’s style.css (or use the WP Customizer to enter Additional CSS):

    .one-half {
	float: left;
	margin-left: 4%;
	width: 48%;
	margin-bottom: 24px;
}

.first {
	clear: both;
	margin-left: 0;
}

    I hope this helps, best regards.

Viewing 1 replies (of 1 total)
  • The topic ‘Side by side fileds’ is closed to new replies.