WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
contact Form in two columns (7 posts)

  1. louecrawford
    Member
    Posted 1 year ago #

    My Contact 7 Form is to long because I need certain information on the form. I want to use two columns like Name on the left and email on the right. does anyone know the code to use to do this?

    I was trying to use the following but it does not work.

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

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

    Any ideas of code I can use to shorten my form?

    Thanks
    Louis

    http://wordpress.org/extend/plugins/contact-form-7/

  2. davejampole
    Member
    Posted 1 year ago #

    Have you thought about trying this?

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

  3. louecrawford
    Member
    Posted 1 year ago #

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

  4. davejampole
    Member
    Posted 1 year ago #

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

    Take a look at one of my forms at <http://lcoc-moaa.org/scholarships/application/> and tell what code you want and I'll post it to you.

  5. louecrawford
    Member
    Posted 1 year ago #

    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

  6. buzztone
    Member
    Posted 1 year ago #

    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 http://alistapart.com/article/prettyaccessibleforms.

  7. davejampole
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic