WordPress.org

Support

Support » Plugins and Hacks » Bootstrap 3 Horizontal Form

Bootstrap 3 Horizontal Form

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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

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

    Inside edit-contact-form.php?

    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/

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Bootstrap 3 Horizontal Form’ is closed to new replies.