CMSHands
Download the free plugin
Menu

Style Gravity Forms to match your site

CMSHands, a free WordPress plugin, adds a chat to your dashboard. Type “Make my contact form match the rest of the site.” See the CSS first; one-click undo.

Block themes only. Shown: a Contact Form 7 run on our test site. Not run on Gravity Forms yet (no license); the tool accepts its forms. How to tell

Download the free plugin

Or do it yourself
Needs WP 6.3 to 7.1 and PHP 8.0 or newer. What it installs

Needs WP 6.3 to 7.1, PHP 8.0 or newer, and an administrator login. One site per install.

The download is a plugin. Turning it on connects your site to cmshands.com and adds 3 small rescue files. Deleting the plugin removes them and everything it stored. What we send

Plugins are installed from a computer. Get the plugin here instead

Free to start: 3 changes with no account, then 10 a month with your email. Questions free, 30 a day. No card.

What's freeIs it safe to install?

  • Nothing changes without your OK
  • Undo in one click, or a warning first
  • No account, no password to share

Gravity Forms is a trademark of its owner. CMSHands is not affiliated with it.

Make my contact form match the rest of the site.

Style Contact form fields and button
Waiting for you
The waiting card with After pressed: the contact form with full-width rounded fields, a dark Submit, then Add the styles
The waiting card with After pressed: the contact form with full-width rounded fields, a dark Submit, then Add the styles
  2. /* CMSHands: Contact form fields and button */
  3. .wpcf7 input.wpcf7-form-control:not([type="submit"]),
  4. .wpcf7 textarea.wpcf7-form-control {
  5. background-color: var(--wp--preset--color--base-2);
  6. border: 1px solid var(--wp--preset--color--contrast-3);
  7. border-radius: .33rem;
  8. box-sizing: border-box;
  9. color: var(--wp--preset--color--contrast);
  10. font-family: inherit;
  11. font-size: var(--wp--preset--font-size--medium);
  12. padding: .6rem .75rem;
  13. width: 100%;
  14. }
  15. .wpcf7 input.wpcf7-form-control:focus,
  16. .wpcf7 textarea.wpcf7-form-control:focus {
  17. border-color: var(--wp--preset--color--contrast);
  18. outline: 2px solid var(--wp--preset--color--contrast);
  19. outline-offset: 1px;
  20. }
  21. .wpcf7 input.wpcf7-submit {
  22. background-color: var(--wp--preset--color--contrast);
  23. border: 1px solid var(--wp--preset--color--contrast);
  24. border-radius: .33rem;
  25. color: var(--wp--preset--color--base);
  26. cursor: pointer;
  27. font-family: inherit;
  28. font-size: var(--wp--preset--font-size--small);
  29. font-weight: 500;
  30. padding: .6rem 1rem;
  31. }
  32. .wpcf7 input.wpcf7-submit:hover,
  33. .wpcf7 input.wpcf7-submit:focus {
  34. background-color: var(--wp--preset--color--contrast-2);
  35. border-color: var(--wp--preset--color--contrast-2);
  36. color: var(--wp--preset--color--base);
  37. }
  38. .wpcf7 label {
  39. color: var(--wp--preset--color--contrast);
  40. font-size: var(--wp--preset--font-size--small);
  41. }
The card with Code pressed: the CSS it would add in green, every rule starting with .wpcf7 and the theme's colors

Styling Contact form fields and button

Add the stylesNot nowCan be undone

I'll find your contact form and see what's in it.

Ready for you to review — the fields and the Submit button now use the same colours, corner rounding and text sizes as the rest of the site's buttons and forms.

A real run on our test site, . From asking to done, it took 50 seconds. Go through it step by step

Watch it style a Contact Form 7 form on our test site

This run styles a Contact Form 7 form on our test site, a WP site we run to try every task before we write about it. It has no Gravity Forms license yet, so we haven't run it on a Gravity Forms form. The chat's styling tool accepts the box Gravity Forms puts around a form, the same way it took Contact Form 7's.

You ask

1 of 6

Make my contact form match the rest of the site.

Make my contact form match the rest of the site.

  1. Looking for what you meant1.5 s
  2. Listing your plugins and themes2.0 s
  3. Looking at your theme’s colours and sizes4.1 s
  4. Reading one of your pages4.4 s
  5. Reading a file on your site14 s
  6. Preparing the new styles for your OK20 s
  7. Previewing the change20 s
Style Contact form fields and button
Waiting for you
The waiting card with After pressed: the contact form with full-width rounded fields, a dark Submit, then Add the styles
The waiting card with After pressed: the contact form with full-width rounded fields, a dark Submit, then Add the styles
  2. /* CMSHands: Contact form fields and button */
  3. .wpcf7 input.wpcf7-form-control:not([type="submit"]),
  4. .wpcf7 textarea.wpcf7-form-control {
  5. background-color: var(--wp--preset--color--base-2);
  6. border: 1px solid var(--wp--preset--color--contrast-3);
  7. border-radius: .33rem;
  8. box-sizing: border-box;
  9. color: var(--wp--preset--color--contrast);
  10. font-family: inherit;
  11. font-size: var(--wp--preset--font-size--medium);
  12. padding: .6rem .75rem;
  13. width: 100%;
  14. }
  15. .wpcf7 input.wpcf7-form-control:focus,
  16. .wpcf7 textarea.wpcf7-form-control:focus {
  17. border-color: var(--wp--preset--color--contrast);
  18. outline: 2px solid var(--wp--preset--color--contrast);
  19. outline-offset: 1px;
  20. }
  21. .wpcf7 input.wpcf7-submit {
  22. background-color: var(--wp--preset--color--contrast);
  23. border: 1px solid var(--wp--preset--color--contrast);
  24. border-radius: .33rem;
  25. color: var(--wp--preset--color--base);
  26. cursor: pointer;
  27. font-family: inherit;
  28. font-size: var(--wp--preset--font-size--small);
  29. font-weight: 500;
  30. padding: .6rem 1rem;
  31. }
  32. .wpcf7 input.wpcf7-submit:hover,
  33. .wpcf7 input.wpcf7-submit:focus {
  34. background-color: var(--wp--preset--color--contrast-2);
  35. border-color: var(--wp--preset--color--contrast-2);
  36. color: var(--wp--preset--color--base);
  37. }
  38. .wpcf7 label {
  39. color: var(--wp--preset--color--contrast);
  40. font-size: var(--wp--preset--font-size--small);
  41. }
The card with Code pressed: the CSS it would add in green, every rule starting with .wpcf7 and the theme's colors

Styling Contact form fields and button

Add the stylesNot nowCan be undone

I'll find your contact form and see what's in it.

Ready for you to review — the fields and the Submit button now use the same colours, corner rounding and text sizes as the rest of the site's buttons and forms.

Make my contact form match the rest of the site.

Style Contact form fields and button
Waiting for you
The waiting card with After pressed: the contact form with full-width rounded fields, a dark Submit, then Add the styles
The waiting card with After pressed: the contact form with full-width rounded fields, a dark Submit, then Add the styles
  2. /* CMSHands: Contact form fields and button */
  3. .wpcf7 input.wpcf7-form-control:not([type="submit"]),
  4. .wpcf7 textarea.wpcf7-form-control {
  5. background-color: var(--wp--preset--color--base-2);
  6. border: 1px solid var(--wp--preset--color--contrast-3);
  7. border-radius: .33rem;
  8. box-sizing: border-box;
  9. color: var(--wp--preset--color--contrast);
  10. font-family: inherit;
  11. font-size: var(--wp--preset--font-size--medium);
  12. padding: .6rem .75rem;
  13. width: 100%;
  14. }
  15. .wpcf7 input.wpcf7-form-control:focus,
  16. .wpcf7 textarea.wpcf7-form-control:focus {
  17. border-color: var(--wp--preset--color--contrast);
  18. outline: 2px solid var(--wp--preset--color--contrast);
  19. outline-offset: 1px;
  20. }
  21. .wpcf7 input.wpcf7-submit {
  22. background-color: var(--wp--preset--color--contrast);
  23. border: 1px solid var(--wp--preset--color--contrast);
  24. border-radius: .33rem;
  25. color: var(--wp--preset--color--base);
  26. cursor: pointer;
  27. font-family: inherit;
  28. font-size: var(--wp--preset--font-size--small);
  29. font-weight: 500;
  30. padding: .6rem 1rem;
  31. }
  32. .wpcf7 input.wpcf7-submit:hover,
  33. .wpcf7 input.wpcf7-submit:focus {
  34. background-color: var(--wp--preset--color--contrast-2);
  35. border-color: var(--wp--preset--color--contrast-2);
  36. color: var(--wp--preset--color--base);
  37. }
  38. .wpcf7 label {
  39. color: var(--wp--preset--color--contrast);
  40. font-size: var(--wp--preset--font-size--small);
  41. }
The card with Code pressed: the CSS it would add in green, every rule starting with .wpcf7 and the theme's colors

Styling Contact form fields and button

Add the stylesNot nowCan be undone
  1. Adding styles to your site50 s
  2. Checking the change50 s
Style Contact form fields and buttonApproved
Approved

Done. I checked afterwards, and the change is in place.

UndoCan be undone
The live contact form before, with narrow plain boxes, and right after, with full-width rounded fields in the theme's colors
  1. Reverting the change59 s
  2. Checking the change60 s

Undone. I checked afterwards, and it's back the way it was.

Quillmoor Pottery, WP 7.1.3, Twenty Twenty-Four. Step times count from the moment the request was sent.

  • It adds CSS, the rules that set how your site looks, kept inside one box on the page, like the one Gravity Forms puts around each form. Block themes only.
  • You see the page before and after in pictures, approve it, and one click undoes it. The run above shows that on a Contact Form 7 form.
  • On an older (classic) theme it writes the CSS for you to paste.

How to style Gravity Forms with CSS in WordPress yourself

In WordPress, open Appearance › Editor › Styles › Additional CSS, add rules that start with your form's ID, like #gform_wrapper_1, then save.

Updated , checked on WP 7.1,

  1. 1. Find your form's ID: go to Forms › Forms and read the ID column next to the form's name.

  2. 2. Write your CSS, the rules that set how your site looks. This makes form 1's field borders dark blue: #gform_wrapper_1 input { border-color: #1e3a5f; }

  3. 3. Change the 1 to your form's ID; it keeps the rule to that form. For every form at once, start with .gform_wrapper instead.

  4. 4. The submit button has its own ID. This makes form 1's button dark blue with white text: #gform_submit_button_1 { background-color: #1e3a5f; color: #ffffff; }

  5. 5. In your dashboard, go to Appearance › Editor › Styles. Open the ⋮ (More) menu and choose Additional CSS.

    Show the picture
    The Styles panel with its ⋮ (More) menu open and Additional CSS outlined, above Reset styles

  6. 6. Paste your rules at the end of the box, under the line that was already there.

    Show the picture
    Additional CSS with the two form rules pasted at the end of the box, under the line that was already there

  7. 7. Press Review 1 change… at the bottom left (the number counts your edits), then Save.

    Show the picture
    Review 1 change… outlined at the foot of the Design panel, under 11 Revisions

  8. 8. Open the form's page in a new tab, and on your phone. Leave a required field empty and press submit to see the error style.

Got an older (classic) theme, one with Appearance › Customize and no Editor? Your rules go in Appearance › Customize › Additional CSS, and Publish keeps them. CMSHands can't reach that box. It writes the rules in the chat for you to paste there.

Gravity Forms puts each form in a box with the class gform_wrapper and an ID of its own: gform_wrapper_ plus the form's ID. Inside it, .gfield_label is a field's label, .gfield_description its help text, .gfield_validation_message an error and .gform_footer the button row. So #gform_wrapper_1 .gfield_label { font-weight: 600; } makes form 1's labels bold. Your rules live in your site's styles, so Gravity Forms updates leave them alone; a new theme starts without them. We checked the WordPress steps on our test site. The Gravity Forms names come from its own documentation, since we can't open its screens there yet.

Or ask for it in the chat

“Make my contact form match the rest of the site.”

Download the free plugin

Get the plugin here instead

Why it won't wreck your site

  • Nothing changes until you press the button. Every change comes as a card that names it. Nothing happens until you press the button or Not now.
  • You see it first. Old words in red, new words in green. For layout, before-and-after pictures on a computer and a phone.
  • One click undoes it. When something can't be undone, like deleting a page or a plugin, the card says so before you press.

What it won't do here

  • Older (classic) themesThat's a theme with Appearance › Customize instead of Editor. It can't add CSS there; it writes the CSS for you to paste in Appearance › Customize › Additional CSS.
  • Building or changing the formIt styles how your form looks. It doesn't add fields, change what the form asks, or touch its settings, notifications or entries.
  • The Gravity Forms block's own style settingsIt leaves the style settings on the Gravity Forms block alone. Its rules go in your site's Additional CSS, where you can read them and change them later.
  • Fonts, pictures and scriptsOnly plain CSS rules. Nothing loaded from other sites, like a web font or a background picture, and no JavaScript, the code that makes a page react to clicks.
  • Not run on Gravity Forms yetOur test site has no Gravity Forms license. The tool accepts its form box, but we haven't seen yet whether the rules it writes beat Gravity Forms' own styles.

More it can do

Same chat, same OK button, on your own site.
  • Health and checkups:

    A security check of your site

    “Check my site for security problems and tell me what to fix first.”

    It took 39 seconds on our test site.

  • Store imports:

    Import a WordPress export (paid plan)

    “Import the posts in this WordPress export file.”

    It took 1 minute 1 second on our test site.

  • Your shop:

    Make a coupon

    “Make a coupon code AUTUMN for 10% off the whole order.”

    It took 13 seconds on our test site.

Everything it can do for a shopDownload the free plugin

Questions

How do I add custom CSS to Gravity Forms?

Put the rules in your site's Additional CSS. On a block theme that's Appearance › Editor › Styles, then the ⋮ menu › Additional CSS. Start each rule with #gform_wrapper_ and the form's ID, so it touches only that form. For one field, open it in the form editor and type a name like big-field under Appearance › Custom CSS Class. Then write #gform_wrapper_1 .big-field input { font-size: 20px; }

How do I change the Gravity Forms submit button?

Use the button's own ID: #gform_submit_button_ and your form's ID, like #gform_submit_button_1. Set its background-color, color, border-radius and padding there. For the color it turns when the mouse is on it, add a second rule for #gform_submit_button_1:hover with a slightly darker background-color.

How do I change the placeholder text color in Gravity Forms?

Add a placeholder rule inside your form's box, with your form's ID in place of the 1: #gform_wrapper_1 input::placeholder { color: #6b6b6b; } For a message box, use textarea instead of input. Pick a grey dark enough to read. A very light one is hard to see, and a very dark one looks like an answer that's already filled in.

Why isn't my Gravity Forms CSS working?

Usually another rule wins. Gravity Forms and your theme both style forms, and when two rules clash, the more specific one wins. Start yours with the form's ID, like #gform_wrapper_1 input. An ID outranks the class names most of those rules use. Check that the number is your form's ID, then clear any cache plugin and reload the page.

Do I need a styling plugin for Gravity Forms?

Usually not. Gravity Forms 2.7 and newer has style settings on the form's block in the editor, for colors, sizes and corners. For the rest, a few lines of CSS do it, each starting with your form's ID. On a block theme, CMSHands can write and add them. We've run that on Contact Form 7, not on Gravity Forms yet.

Is it free?

To start, yes: 3 changes with no account, then 10 a month once you add your email. Questions are free, up to 30 a day.

Written by the CMSHands team. First published .

Try it on your own form

Download the free plugin

Get the plugin here instead
  • Nothing changes without your OK
  • Undo in one click, or a warning first
  • No account, no password to share

Free to start: 3 changes with no account, then 10 a month with your email. Questions free, 30 a day. No card.

What's freeIs it safe to install?

Download the free plugin