Alter Contact Form HTML classes to make compatible with Bootstrap

I don’t think our developers are likely to change the HTML of the contact form simply because it doesn’t match up with the CSS rules from a specific theme.

You can either take Bootstrap’s existing form styles and simply change the selectors to match those of the Contact Form, ro I might be able to do it myself if you can paste in your site URL here (though I am no CSS expert). ??

I dont expect the authors to change the html for me, but I would like to know if there is a reasonably simple way of doing this myself by editing the php or javascript file that outputs the html.

And by the way this is not a specific theme I am talking about, this a theme based off a CSS framework called bootstrap.

Bootstrap has pretty much been considered to be the industry standard for CSS responsive design frameworks for nearly 5 years now.

I am also really surprised that no one on jetpack seems to know anything about Bootstrap’s css framework, it is quite well known, loved, and used by CSS designers as it is mobile device first fully responsive CSS framework (it targets, mobiles, tablets, computers with a single stylesheet to respond and adapt to all device sizes). https://getbootstrap.com/

I have also seen several other people make the same comment about lack of bootstrap framework support, or CSS responsive framework support in general (https://foundation.zurb.com/ is another popular and well known one) on jetpacks support forums only to be met with responses which clearly shows they dont know or care about standard CSS best practises

This really is a big shame, and its just not jetpack that doesnt seem to know or care about this, unfortunately it also seems to be wordpress plugin developers in general.

I dont expect the authors to change the html for me, but I would like to know if there is a reasonably simple way of doing this myself by editing the php or javascript file that outputs the html.

You technically can edit Jetpack’s file to do whatever you like, but I would strongly suggest that you not. This is because core plugin files will be overwritten when plugins updates, so the changes you made will just disappear when a new version of Jetpack comes out.

As I said earlier, if you want to apply Bootstrap’s styles to the Contact Form, simply locate the form rules in Bootstrap’s CSS and change those to target the existing id’s and classes the contact form uses.

@davywavy: If you use SASS/SCSS, LESS or Stylus, then you can apply styles using mixins.

Since the plugin author has been of no help whatsoever, I’ve looked in the code and discovered that there are some limited WP hooks and CSS classes to customise the contact form’s style and output without needing to edit the plugin’s PHP file. What follows is not an exhaustive list, but it should be enough to get you started.

Personally, I think Contact Form 7 is much better as it provides more customisation options and AJAX functionality (no page refreshes!). But Jetpack’s contact form is nice for a small version that works OK.

Hook: grunion_contact_form_success_message
Changes the success message header after user has successfully submitted message. Usage: takes one HTML string as argument and outputs an HTML string

These are the CSS classes available I’ve found that you can target:

form.contact-form
… is the most generic targeting the form

form.contact-form > div
Gets the input field containers

form.contact-form > div input[type="text"]
Text input field

form.contact-form > div input[type="email"]
Email input field

form.contact-form > div textarea
Textarea input field

form.contact-form > div label.grunion-field-label
Field labels

form.contact-form > p.contact-submit
The area where the submit button goes

form.contact-form > p.contact-submit input[type="submit"].pushbutton-wide
The submit button itself

Success message CSS is pretty general and relies on knowing the contact form’s ID unless you’re happy with targeting a generic blockquote element:

div#contact-form-{ID} blockquote

Targeting form error CSS is general too, unless you know the ID of the contact form (targeting is either too general or too generic to be really useful):

div#contact-form-{ID} div.form-error
Form error container

div#contact-form-{ID} div.form-error ul.form-errors > li.form-error-message
Individual form error messages