3 columns in Contact Form 7

  • Hi,

    I’ve looked through all of the Contact From 7 FAQ’s and googled, but I can’t find the information needed to modify this:

    <div class=”flex-row form-flat medium-flex-wrap”>
    <div class=”flex-col flex-grow”>
    [email* your-email placeholder “Your Email (required)”]
    </div>
    <div class=”flex-col ml-half”>
    [submit class:button primary “Sign Up”]
    </div>
    </div>

    to include 3 columns (i.e. to include a text first name field)
    Can anyone please help me with the modification needed to make this 3 columns?

    Thanks in advance!
    Crystal

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Crystalmaree

    (@crystalmaree)

    To be clear… this is what I have:

    <div class=”flex-row form-flat medium-flex-wrap”>
    <div class=”flex-col flex-grow”>
    [text* your-name placeholder “Your first name”] [email* your-email placeholder “Your email address”]
    </div>
    <div class=”flex-col ml-half”>
    [submit class:button primary “ACTIVATE FREE SHIPPING CODE”]
    </div>
    </div>

    James

    (@jgraham719)

    I found creating the contact forum within a table to give a bit more flexibility with formatting. Definitely test display with other browsers, but so far I’ve not ran into issues using a table.

    Created a CSS entry for said table to deal with spacing:

    table#somename
    {
    border-collapse:separate;
    border-spacing:0 10px;
    }

    Then in contact form you could try something like:

    <table id=”somename” style =”width:100%” cellspacing=”2″>
    <tr>
    <td>[text* your-firstName watermark “First Name”]</td>
    <td>[text* your-lastName watermark “Last Name”]</td>
    <td rowspan=”2″>[submit class:button primary “ACTIVATE FREE SHIPPING CODE”]
    <tr>
    <td colspan=”2″>[email* your-email watermark “E-mail:”]</td><td></td>
    </tr>
    </table>

    Hope this helps!

    -james

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘3 columns in Contact Form 7’ is closed to new replies.

Tags