WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Combining Bootstrap and CF7 (2 posts)

  1. mckeene
    Member
    Posted 5 months ago #

    Hello

    I'm working with a Bootstrap based theme where i want to implement CF7, but I'm not sure how to combine the two, so the CF7 input fields get the Bootstrap styling.
    E.g. i want to create a select drop-down menu in CF7, but how do i combine it with the button dropdown styling from Bootstrap: http://getbootstrap.com/components/
    I tried adding the classes to the item in CF7, but that didn't totally do the trick.

    I hope someone can help :)

    Cheers

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

  2. buzztone
    Member
    Posted 5 months ago #

    Combining Bootstrap's form styling with CF7 tends to be difficult, requires strong CSS skills and in IMHO makes things unnecessarily complicated.

    Instead just 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.

    See also Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags