Opens in a new tab
Free SureForms CSS Reference

The SureForms
CSS Cheat Sheet.

Look up any SureForms variable or selector, copy a tested recipe, or build an AI prompt that writes the CSS for your form.

No sign-up
Free and Business CSS
Copy-ready recipes

Every SureForms CSS variable and selector, checked against SureForms 2.12.9 and SureForms Business.

How it works

SureForms styles forms with CSS variables that start with --srfm-. For each form it prints a small style block that sets them on .srfm-form-container-{id}, and its stylesheet reads them. Change a variable and everything that uses it follows.

Find your form ID

Right-click the form, choose Inspect, and find the outer div whose class starts with srfm-form-container-. The number is the form’s ID.

page-source.html
<div class="srfm-form-container srfm-form-container-456 …">

Where to put your CSS

Appearance → Additional CSS, or a child theme

Start with both container classes: .srfm-form-container.srfm-form-container-456. For every form, repeat the class: .srfm-form-container.srfm-form-container.

Form editor → Custom CSS

Already limited to that form. Leave out the ID and container class, set variables on .srfm-form, and don’t use > or &.

Why two classes? SureForms prints its values inside the page, after your stylesheet. With just .srfm-form-container-456 both rules are equally strong and SureForms’ comes last, so it wins. The second class makes yours stronger. The same goes for element rules: SureForms’ selectors are usually four to six classes long, so copy its path and start it with both container classes rather than reaching for !important.

Input tints (borders, backgrounds, placeholders) are worked out from the colors in the Style tab when the page is built. Changing --srfm-color-scheme-text in CSS doesn’t recalculate them, so set the specific variables too, or change the colors in the Style tab.

With SureForms Business, per-side borders, shadows and the extra button controls only apply when the form has .srfm-custom-stylings. SureForms adds it when the form’s theme is Custom, Baseline, Minimal, Dark or a saved preset, not on Default.

Unofficial reference by Nahnu Media, not made or endorsed by the SureForms team. Checked against the SureForms 2.12.9 source code. SureForms can change these names in any update, so test on a staging site first.

AI prompt builder

Fill this in, copy the prompt, and paste it into Claude or ChatGPT. Then paste your form’s HTML under it and add a screenshot if you have one.

My SureForms plan
Your prompt

How It Works

Three Steps To
An On-Brand Form.

  1. Find Your Form ID

    Right-click your form and choose Inspect. The outer div’s class, like srfm-form-container-456, holds the ID.

  2. Pick Your CSS

    Search the variables and selectors, copy a tested recipe, or build an AI prompt that knows SureForms’ rules.

  3. Paste And Check

    Add it under Appearance → Additional CSS, swap in your form ID, and check the form on a staging site first.

SureForms Styling

Common
Questions.

Want your forms styled for you? Get in touch and we will take a look.

Where do I put custom CSS for SureForms?

In Appearance → Additional CSS or your child theme, starting each selector with .srfm-form-container.srfm-form-container-456 (your form ID instead of 456). Or use the form editor’s Custom CSS box, which is already limited to that form: leave out the form ID there.

Why isn’t my SureForms CSS working?

Usually because the selector starts with only .srfm-form-container-456. SureForms prints its own values in the page after your stylesheet, so they win. Add the second class, .srfm-form-container, in front. For element rules, copy SureForms’ selector path and start it the same way.

How do I find my form ID?

Right-click the form on your site and choose Inspect. Find the outer div whose class starts with srfm-form-container-. The number after it is the form ID. It’s also in the address bar when you edit the form.

Can I change the colors without CSS?

Yes. The form’s Style tab sets the main color and text color, and SureForms works out borders, backgrounds and placeholders from them. Use CSS when you need more control than the Style tab gives you.

Do I need SureForms Business?

No. Most of the reference works on the free plan. The Business tabs cover the paid fields and controls, like multi-step forms, uploads, per-side borders and button gradients. Some of those only apply when the form’s theme isn’t set to Default.

Will my CSS break when SureForms updates?

It can. Variables change less often than class names, so use them where you can. The reference shows which SureForms version it was checked against. Test updates on a staging site before your live one.

How does the AI prompt builder work?

Enter your form ID and what you want, then copy the prompt into Claude or ChatGPT and paste your form’s HTML under it. The prompt includes the whole reference and SureForms’ styling rules, so the CSS you get back fits your form.

Is this made by SureForms?

No. It’s a free, unofficial reference made by Nahnu Media from the SureForms source code. It isn’t endorsed by the SureForms team.

Forms Built In

Want It Done
For You?

We build WordPress sites for fitness brands with on-brand forms, tracking and speed handled from the start. No fluff, no cookie-cutter proposals.

Start Your Project View Portfolio
Custom-built, not templated
Bunny CDN edge hosting
Fitness industry expertise

This website uses cookies to enhance your browsing experience and ensure the site functions properly. By continuing to use this site, you acknowledge and accept our use of cookies.

Accept All Accept Required Only