WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Bootstrap 3 Horizontal Form (5 posts)

  1. Liam Johnson
    Member
    Posted 5 months ago #

    Hi there,

    How can I make the form display horizontal - I have seen it in the bootstrap css examples .form-horizontal.
    http://getbootstrap.com/css/#forms-horizontal

    I would just the like it to display like this for e.g
    email [your- email]

    instead of

    email
    [your-email]

    Hope this makes sense,
    Thank you

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

  2. Tdude
    Member
    Posted 5 months ago #

    Hi!

    Just add your Bootstrap code to the WPCF7 form. Something like this:

    <div class="form-group">
                <label class="control-label" for="email">Your email</label>
                <div class="controls">
                [email* email /50 id:email class:form-control class:input-md placeholder "YOUR EMAIL"]
                </div>
              </div>

    Note that you append several class declarations by just repeating the class:form-control class:input-md and so on.

    Good luck!
    /T

  3. Tdude
    Member
    Posted 5 months ago #

    Correction: You should add it to the form's ADMIN in WPCF7.

  4. Liam Johnson
    Member
    Posted 5 months ago #

    Inside edit-contact-form.php?

  5. Tdude
    Member
    Posted 5 months ago #

    No, you insert the code inside the WPCF7 main form field, where you create your form in the plugin's WP-admin (wp-admin/admin.php?page=wpcf7).

    The plugin's form field (called "Form") accepts plain html, but to make it work the form fields need to be coded with WPCF7 shortcode.

    Read up on it here: http://contactform7.com/tag-syntax/

Reply

You must log in to post.

About this Plugin

About this Topic