WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Add classes to Jetpack contact form fields (7 posts)

  1. Christian K. Nordtomme
    Member
    Posted 8 months ago #

    I'm working with a custom-built theme built with Bootstrap 3. It uses Bootstrap's classes and form element styles (for search and sign-up forms), and Jetpack for several of its other features.

    So, I'm looking for the best way to use the Jetpack contact forms, styled like the Bootstrap forms.

    While I realize I can duplicate the styles or edit the Bootstrap CSS (or use something other than Jetpack altogether), it seems like the most elegant, light-weight and future-proof solution, would be to add the necessary classes (and maybe even some wrapping tags) to Jetpack's output.

    Is there a good way to do that?

    https://wordpress.org/plugins/jetpack/

  2. Brandon Kraft
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    Hi Christian,

    We don't have filters on the form elements to do that in a clean way. I'm not familiar with Bootstrap (or at least not the recent versions). What is the CSS used for their form elements?

  3. Christian K. Nordtomme
    Member
    Posted 8 months ago #

    Hi, Brandon.

    Thanks for getting back to me.

    Bootstrap has quite a lot of styling going on for forms (after resets, there's 300+ short lines of css for various form elements, and another 350+ lines for buttons), so I won't paste all that in here.

    However, here are are some relevant excerpts from the documentation, to give you an idea of what it all does:

    "Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing."

    "Add .form-inline to your <form> for left-aligned and inline-block controls."

    "Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form."

    "Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line."

    "Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element."

    "Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*."

    I realize that accomodating all of this (even just some of it) is a lot to ask, and I understand the need to balance flexibility/extensibility with ease of use, so if the filters aren't there, I won't ask you to rethink the entire contact form plugin.

    I'll shop around a little bit. But thanks again.

    (To anyone else who comes here looking for something similar, Contact Form 7 and this post might be a good place to start looking.)

  4. Brandon Kraft
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    I don't think we can reasonably tackle all of it, but we should be able to play a bit nicer. No timeline, but I'll give this a swing.

    Thanks for reporting it and asking. :)

  5. Christian K. Nordtomme
    Member
    Posted 8 months ago #

    Thanks.

    I really like Jetpack, how it makes it easy to toggle commonly requested functionality on/off, and how you manage to pack a lot of power into a dead simple interface, so I look forward to seeing what you come up with. :-)

  6. jOt Creative
    Member
    Posted 8 months ago #

    I'd love to see some way to add custom classes to JetPack form elements as well. Quite simply, a RocketTheme I'm using has a class called "button" that styles all the buttons on the theme. When I create a form with JetPack, the submit button is generated with class "pushbutton-wide." It obviously has some JetPack styling, but it doesn't match the rest of my website, and there's no easy way to add the "button" class to it. The alternative would be to add custom CSS to restyle "pushbutton-wide," but because the RocketTheme code is spread out over files and function, this isn't a simple copy-and-paste situation.

  7. Brandon Kraft
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    Without looking at RocketTheme, would it be possible to change RocketTheme from:

    .button {
    awesome CSS here;
    }

    to

    input[type=button], .button {
    awesome CSS here;
    }

    The pushbutton-wide is a throwback to legacy CSS that is no longer used (so if anyone targeted that in the past wouldn't have their form styling break) and there is no CSS in the codebase for that class.

Reply

You must log in to post.

About this Plugin

About this Topic