WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Can I add columns in a form? (4 posts)

  1. Fame Webdesign
    Member
    Posted 10 months ago #

    Hello, is it possible to add colums in a form? As example of what I mean, check http://www.weberautos.nl/cms/cform.aspx?smid=42691&did=3293&pw=1&wid=42685

    This form has two columns.

    Is there a way to create this?

    Thanks for your answer!
    Martine

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

  2. buzztone
    Member
    Posted 10 months ago #

    This is a CSS styling issue.

    To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

    The most common and preferred method is to create a Child Theme and make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don't loose your changes when you update the theme.

    Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

    Also good idea to target CSS classes & ids used within your CF7 forms only, so that your CSS changes don't inadvertantly effect other elements on your website.

    If you are uncomfortable editing CSS style sheets you may prefer to use a custom CSS plugin like My Custom CSS.

  3. ScienceOfficerSpock
    Member
    Posted 10 months ago #

    here is an example of two columns:
    <table><tr><td>
    <p>Your Name (required)
    [text* your-name] </p>

    <p>Your Email (required)
    [email* your-email] </p>

    <p>Your Phone (required)
    [text text-33] </p>

    <p>Subject
    [text your-subject] </p>
    </td><td>
    <p>Your Message
    [textarea your-message] </p>

    <p>[submit "Send"]</p>
    </td></tr></table>

  4. Fame Webdesign
    Member
    Posted 10 months ago #

    Thanks ScienceOfficerSpock! That works! :-)

    Is it also possible to change the width of a "select" tag? Check http://www.autobedrijfcauberg.nl/wp/test-formulier/

    I would like to enlarge the fields "soort kenteken", "conditie" etc. so they will have the same width as the other fields.

    Thanks for your help!

    Martine

Reply

You must log in to post.

About this Plugin

About this Topic

Tags