How to change the front size in a Jetpack Contact Form

For the theme I’m currently using, the field descriptions on the Jetpack contact form appear really, really small.

After some fiddling (and Googling, which although yielded answers, I didn’t find any that worked) I found a solution.

.contact-form label { font-size: 0.9em; }

You will need to change font-size to something that is more suitable for your own site. What this doesn’t do, though, is affect the font size of the submission button at the bottom. For this you need some additional CSS…

.contact-form .contact-submit input { font-size: 1.2em; margin-top: 10px; }

Again, you’ll need to adjust the font-size appropriately. You’ll also see that I’ve added a margin change as well (again, adjust to taste) – this is because the increase in size of the button causes it to move further up the page towards the last field on your form. The margin addition will push it back down again.

I would recommend making these changes in the CSS option of your theme customiser (Appearance -> Customise). Why? The customiser is theme specific, as are these changes, so if you change themes you won’t wonder why your CSS looks odd, as these adjustments will no longer be in effect. Of course, you can also copy/paste the changes over, if required.

Talk to me!

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