Jetpack contact forms: remove the empty lines

Jetpack contact forms with empty lines

Empty lines appeared between the labels and the fields

On a WordPress blog, when using the Jetpack contact forms ([contact-form] tag), you may see some useless empty lines. To work around this behavior, edit the CSS (Dashboard > Appearance > Edit CSS) and add this code:

Technical explanation

I checked in the HTML code of the result and found out a small “<br>” generated between each “<label>” and “<input>”. Why is it here ? I don’t know, maybe one day I will ask the Jetpack developers.

First, I tried to edit the CSS properties of the “grunion-field-label” class. Unfortunately, the changes are interpreted before the CSS file of Jetpack (called “grunion.css”), so they are not considered. The workaround I used was pretty simple: instead of focusing on the label, I make the “<br>” disappear.

As long as the CSS class of the form will be “contact-form”, this small trick will work.

Now the empty lines have disappeared!

Now the empty lines have disappeared!

About Nicolas Form

I'm Nicolas Form, multi-skill programmer, aesthete and joyful French guy. On this blog I share my tips and tutorials about programming and IT in general. I am freelance, so you can also contact me about a website, an Android app or any other software you need. Check my portfolio and drop me a line!
This entry was posted in Wordpress and tagged , , , . Bookmark the permalink.

2 Responses to "Jetpack contact forms: remove the empty lines"

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Jetpack contact forms: remove the empty lines

by Nicolas Form time to read: 1 min