WordPress.org

Forums

Contact Form 7
Bootstrap 3 Horizontal Form (6 posts)

  1. Liam Johnson
    Member
    Posted 1 year 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 1 year 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 1 year ago #

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

  4. Liam Johnson
    Member
    Posted 1 year ago #

    Inside edit-contact-form.php?

  5. Tdude
    Member
    Posted 1 year 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/

  6. goldenmean
    Member
    Posted 6 months ago #

    In case anybody comes looking for this answer. I found a fantastically thorough solution to integrating Contact Form 7 with Bootstrap 3. Just add these lines to your forms.less file or theme.less file and recompile Bootstrap.

    input[type="text"].wpcf7-form-control,
    input[type="password"].wpcf7-form-control,
    input[type="datetime"].wpcf7-form-control,
    input[type="datetime-local"].wpcf7-form-control,
    input[type="date"].wpcf7-form-control,
    input[type="month"].wpcf7-form-control,
    input[type="time"].wpcf7-form-control,
    input[type="week"].wpcf7-form-control,
    input[type="number"].wpcf7-form-control,
    input[type="email"].wpcf7-form-control,
    input[type="url"].wpcf7-form-control,
    input[type="search"].wpcf7-form-control,
    input[type="tel"].wpcf7-form-control,
    input[type="color"].wpcf7-form-control,
    select.wpcf7-form-control
    {
        .form-control
    }
    
    .wpcf7-checkbox .wpcf7-list-item
    {
        .checkbox
    }
    
    .wpcf7-checkbox.checkbox-inline .wpcf7-list-item
    {
        .checkbox-inline
    }
    
    .wpcf7-radio .wpcf7-list-item
    {
        .radio
    }
    
    .wpcf7-radio.radio-inline .wpcf7-list-item
    {
        .radio-inline
    }

    Then, recompile bootstrap using a command like this:
    lessc -x bootstrap.less > path/to/my/folder/bootstrap.min.css
    I hope this helps someone.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic