Free Community Tool by Nahnu Media
The Complete
SureForms
CSS Reference
Every CSS variable, selector and recipe for SureForms in one searchable tool. Stop guessing. Start styling.
SureForms CSS (v2.10.1)
CSS Tier:
Free plan
Paid plan (all paid tiers include all features)
SureForms uses CSS custom properties (variables) prefixed with --srfm-*. PHP generates a scoped style block per form that sets these variables, and the plugin stylesheet reads them. Override the variables on the form container class to restyle the entire form.
Three Ways to Target
Retheme one form
Set variables on .srfm-form-container-{id} to change that form's entire look in one CSS block.
Target one element
Scope a selector: .srfm-form-container-{id} .srfm-block-label. Only affects that element in that form.
Apply to all forms
Use .srfm-form-container with no ID to apply to every SureForms instance on the site.
Find Your Form ID
Right-click your form and click Inspect. Find the outermost div with a class starting with srfm-form-container-. The number at the end is your form post ID. That full class is your CSS scope.
find-form-id.css
/* The div in your page source looks like: */ <div class="srfm-form-container srfm-form-container-456"> /* Use that scoped class to target your specific form: */ .srfm-form-container-456 { --srfm-color-scheme-primary: #1d6ef5; }
Where to Put Your CSS
Per-form custom CSS
Form editor, right sidebar, Form tab, Advance section, Custom CSS. Scoped automatically.
Appearance, Additional CSS
Global overrides that apply across all SureForms on the site.
Child theme style.css
Best for production. Survives theme updates.
All variables below work on the free SureForms plan. Override them on .srfm-form-container-{id} and the plugin stylesheet picks them up automatically.
Brand Colors - the three primaries that cascade into everything
| --srfm-color-scheme-primary | Main brand color. Drives button background, focus ring, checkbox fill, selected states, and progress bar. |
| --srfm-color-scheme-text-on-primary | Text on the submit button. Usually #fff on a dark button. |
| --srfm-color-scheme-text | Body text color. SureForms derives every input color from this using opacity fractions automatically. |
| --srfm-body-input-color | Direct input text color override, bypasses the derived value. |
| --srfm-btn-color-hover | Button background on hover. Default is primary at 90% opacity. |
Input Colors
| --srfm-color-input-background | Input background. Default is text-color at 2% opacity. |
| --srfm-color-input-background-hover | Input background on hover. Default is text-color at 5%. |
| --srfm-color-input-background-disabled | Disabled input background. Default is text-color at 7%. |
| --srfm-color-input-border | Input border. Default is text-color at 25%. |
| --srfm-color-input-border-hover | Border on hover. Default is primary at 65%. |
| --srfm-color-input-border-focus-glow | Box-shadow glow on focus. Default is primary at 15%. |
| --srfm-color-input-border-disabled | Border when disabled. Default is text-color at 15%. |
| --srfm-color-input-label | Label text color. Equals text-color by default. |
| --srfm-color-input-description | Help text color. Default is text-color at 65%. |
| --srfm-color-input-placeholder | Placeholder text. Default is text-color at 50%. |
| --srfm-color-input-text | Typed text color. Equals text-color by default. |
| --srfm-color-input-prefix | Prefix and suffix icon color. Default is text-color at 65%. |
| --srfm-color-input-selected | Selected option background. Default is primary at 10%. |
| --srfm-disabled-background-color | Full background override for disabled state. |
| --srfm-disabled-border-color | Full border override for disabled state. |
| --srfm-disabled-color | Text color override for disabled state. |
| --srfm-error-color | Validation error message text color. |
| --srfm-error-color-border | Input border color in error state. |
| --srfm-error-color-border-glow | Box-shadow glow when an input has a validation error. |
Typography
| --srfm-label-font-size | Label font size. |
| --srfm-label-line-height | Label line height. |
| --srfm-label-font-weight | Label font weight. |
| --srfm-input-field-font-size | Input text font size. |
| --srfm-input-field-line-height | Input text line height. |
| --srfm-input-field-font-weight | Input text font weight. |
| --srfm-font-size | Base font size for the entire form. |
| --srfm-description-font-size | Help text font size. |
| --srfm-description-line-height | Help text line height. |
| --srfm-description-font-weight | Help text font weight. |
| --srfm-description-margin-top | Top gap above description text. |
| --srfm-error-font-size | Error message font size. |
| --srfm-error-font-weight | Error message font weight. |
| --srfm-error-line-height | Error message line height. |
| --srfm-btn-font-size | Submit button font size. |
| --srfm-btn-line-height | Submit button line height. |
| --srfm-btn-font-weight | Submit button font weight. |
Spacing and Sizing
| --srfm-form-padding-top/right/bottom/left | Form container padding per side. |
| --srfm-form-border-radius-top / right / bottom / left | Form container corner radius per corner (four independent properties). |
| --srfm-row-gap-between-blocks | Vertical gap between form fields. |
| --srfm-column-gap-between-blocks | Horizontal gap in multi-column layouts. |
| --srfm-input-height | Input field height. |
| --srfm-input-field-padding | Inner padding of input fields. |
| --srfm-input-field-margin-top | Space above the input, below the label. |
| --srfm-input-field-margin-bottom | Space below the input field. |
| --srfm-input-field-border-radius | Input corner radius. |
| --srfm-input-label-gap | Gap between label and input. |
| --srfm-btn-padding | Button inner padding shorthand. |
| --srfm-btn-border-radius | Button corner radius. |
| --srfm-check-ctn-width / height | Checkbox container dimensions. |
| --srfm-check-svg-size | Checkmark icon size. |
| --srfm-check-gap | Gap between checkbox and label. |
| --srfm-checkbox-input-border-radius | Checkbox corner radius. |
| --srfm-dropdown-font-size | Dropdown text size. |
| --srfm-dropdown-font-weight | Dropdown font weight. |
| --srfm-dropdown-option-padding | Dropdown option row padding. |
| --srfm-dropdown-menu-padding | Open dropdown menu container padding. |
| --srfm-dropdown-badge-padding | Multi-select tag padding. |
| --srfm-dropdown-badge-gap | Gap between multi-select badges. |
| --srfm-dropdown-badge-icon-gap | Gap between badge text and its delete icon. |
| --srfm-dropdown-badge-delete-icon | Delete icon size inside a multi-select badge. |
| --srfm-dropdown-menu-icon-gap | Gap between the dropdown chevron icon and the input text. |
| --srfm-expandable-menu-background | Background of the expandable dropdown panel. |
| --srfm-gap-between-icon-text | Gap between a field icon and its adjacent text. |
| --srfm-flag-section-padding | Padding around the phone flag/dial-code section. |
| --srfm-multi-choice-horizontal-svg-size | Icon size in horizontally-laid-out multi-choice options. |
| --srfm-check-svg-left / --srfm-check-svg-top | Fine-tune checkmark SVG horizontal and vertical position inside the checkbox container. |
| --srfm-checkbox-description-margin-left | Left margin on the description text beside a checkbox. |
Background
| --srfm-bg-color | Form background color. |
| --srfm-bg-image | Background image URL. |
| --srfm-bg-position / size / repeat / attachment | Background image position, size, repeat mode, and attachment (fixed/scroll). Individual properties also available as --srfm-bg-position, --srfm-bg-size, --srfm-bg-repeat, --srfm-bg-attachment. |
| --srfm-bg-gradient | Background gradient value. |
| --srfm-bg-overlay-color | Overlay color on top of a background image. |
| --srfm-bg-overlay-opacity | Overlay opacity 0–1. |
| --srfm-bg-overlay-gradient | Overlay gradient value. |
| --srfm-bg-overlay-image | Separate image layer rendered as the overlay. |
| --srfm-bg-overlay-position / size / repeat / attachment | Overlay image display properties. Individual properties also available as --srfm-bg-overlay-position, --srfm-bg-overlay-size, --srfm-bg-overlay-repeat, --srfm-bg-overlay-attachment. |
| --srfm-bg-overlay-blend-mode | CSS mix-blend-mode for the overlay layer. |
Always prefix your selectors with the form container class. Using .srfm-form-container-{id} .srfm-input-common targets inputs only in your specific form.
Form Structure
| Selector | What it targets |
|---|---|
| .srfm-form-container | Outermost wrapper div around the form. |
| .srfm-form-container-{id} | Specific form by post ID - the scoped root for all your CSS. |
| .srfm-form | The HTML form element. |
| .srfm-form-title | Form title heading if displayed. |
| button#srfm-submit-btn | The submit button element. |
| .srfm-svg-container | Wrapper around inline SVG icons rendered inside form fields (prefix/suffix, checkbox mark, etc.). |
| .srfm-submit-button | Submit button wrapper div. |
| .srfm-submit-wrap | Inner wrap inside the submit button area. |
| .srfm-success-box | Success message container shown after submission. |
| .srfm-success-box-description | Text inside the success message. |
| .srfm-password-protected-form | Password protection prompt shown before form loads. |
| .srfm-loader | Loading spinner shown during form submission or async operations. |
| .srfm-captcha-container | Wrapper around CAPTCHA verification widgets. |
| .srfm-test-mode-notice | Banner shown when a payment gateway is in test/sandbox mode. |
| .srfm-instant-form-wrn-ctn / .srfm-wrn-text-ctn | Warning container and text for instant (embed) forms. |
| .srfm-welcome-screen / .srfm-welcome-screen-active | Conversational form welcome screen and active state. Also available as .srfm-cf-welcome-screen. |
| .srfm-welcome-heading / .srfm-welcome-message | Heading and body text inside the welcome screen. Also available as .srfm-cf-welcome-heading / .srfm-cf-welcome-message. |
| .srfm-welcome-image-ctn / .srfm-welcome-image | Image container and image element on the welcome screen. Also available as .srfm-cf-welcome-image-ctn / .srfm-cf-welcome-image. |
| .srfm-cf-content | Content area wrapper inside a conversational form question. |
| .srfm-cf-btn | Primary action button inside a conversational form step. |
| .srfm-start-btn | Start button on the conversational form welcome screen. |
| .srfm-steps-page-title | Page title text displayed at the top of each multi-step page. |
| .srfm-head-error / .srfm-footer-error | Form-level error banners at the top and bottom. |
| .srfm-preset-dark | Added to the form container when the dark preset is active. |
Field Blocks
| Selector | What it targets |
|---|---|
| .srfm-block | Every field block wrapper, regardless of field type. |
| .srfm-block-single | A single-column field block. |
| .srfm-block-wrap | Inner wrap of a field block. |
| .srfm-block-content-wrap | Content area within a block. |
| .srfm-block-label | The field label element. |
| .srfm-block-legend | Fieldset legend for checkbox and radio groups. |
| .srfm-description | Field help and description text. |
| .srfm-required | The required field asterisk. |
| .srfm-error-message | The validation error message. |
| .srfm-error-wrap | Wrapper around the error message. |
| .srfm-hidden-block | Hidden fields that do not render visually. |
| .srfm-block-width-100 / 75 / 66-66 / 50 / 33-33 / 25 | Column width utility classes applied to block wrappers for multi-column layouts. |
| .srfm-with-icon | Applied to input blocks that include a prefix or suffix icon. |
| .srfm-char-counter-wrap / .srfm-char-counter / .srfm-char-counter--error | Character count display, wrapper, and error state for textarea fields. |
Input Elements
| Selector | What it targets |
|---|---|
| .srfm-input-common | Universal input class. Applies to all text, email, URL, number inputs, and textareas. |
| .srfm-input-textarea | Textarea fields only. |
| .srfm-input-number | Number fields only. |
| .srfm-input-phone | Phone fields only. |
| .srfm-input-time-picker | Time picker field input element. |
| .srfm-input-upload | File upload input element. |
| .srfm-input-address-autocomplete | Address autocomplete input element. |
| .srfm-input-checkbox | The actual checkbox input element. |
| .srfm-input-gdpr | The GDPR acceptance checkbox input. |
| .srfm-input-focused | Added by JavaScript when an input is focused. |
| .srfm-input-hovered | Added by JavaScript on hover. |
| .srfm-input-content | Content wrapper inside an input for prefix/suffix fields. |
| .srfm-input-icon | Icon element inside an input that has a prefix or suffix icon. |
| .srfm-number-prefix / suffix | Prefix and suffix text on number inputs. |
| .srfm-icon-container / .srfm-icon | Icon container and SVG inside input fields. |
Free Field Types
| Selector | What it targets |
|---|---|
| .srfm-dropdown-common | The dropdown input element. |
| .srfm-dropdown-common-wrap | The dropdown outer wrapper. |
| .srfm-cbx | Custom checkbox visual element. |
| .srfm-checkbox-block / .srfm-gdpr-block | Checkbox and GDPR block wrappers. |
| .srfm-multi-choice-block | Multi-choice field wrapper. |
| .srfm-multi-choice-single | Single option card in multi-choice. |
| .srfm-multi-choice-icon | Checked state icon in multi-choice. |
| .srfm-option-container / .srfm-option-image | Option item and image in multi-choice. |
| .srfm-address-block / .srfm-address-block-wrap | Manual address field wrapper and inner container. |
| .srfm-address-country-wrap | Country selector wrapper inside the address block. |
| .srfm-address-autocomplete-search-wrap / .srfm-address-autocomplete-map-preview | Search input wrapper and map preview inside the address autocomplete block. |
| .srfm-dropdown-block / .srfm-dropdown-common | Dropdown field block wrapper and shared dropdown element class. |
| .srfm-html-block / .srfm-html-block-placeholder | HTML content block (paid) wrapper and the placeholder shown when the block is empty. |
| .srfm-email-confirm-block | Email confirmation second input block wrapper. |
| .srfm-number-block / .srfm-number-prefix / .srfm-number-suffix | Number field wrapper and its prefix/suffix display elements. |
| .srfm-classic-upload-label | Classic (button-style) file upload label element. |
| .srfm-phone-block / .srfm-flag-section-padding | Phone field wrapper and country flag area. |
| .srfm-richtext / .srfm-quill-editor-focused | Rich text editor field and its focused state. |
Payment Fields
| Selector | What it targets |
|---|---|
| .srfm-payment-field-wrapper | Outer wrapper for a payment field block. |
| .srfm-payment-input-wrapper | Inner wrapper around the payment amount input. |
| .srfm-payment-amount-wrapper | Container that holds the displayed amount value. |
| .srfm-payment-methods-accordion | Accordion container for selecting payment method. |
| .srfm-payment-method-radio | Individual payment method radio option. |
| .srfm-payment-active | Applied to the currently selected payment method. |
| .srfm-single-payment-method | Wrapper when only one payment method is available. |
| .srfm-variable-amount-display | Displays the computed amount for variable-price fields. |
| .srfm-paypal-button-container | Container for the rendered PayPal button. |
State and Utility Classes
| Selector | What it targets |
|---|---|
| .srfm-custom-wp-paragraph | WordPress paragraph blocks inside an HTML field. |
| .srfm-accordion-item / .srfm-accordion-header / .srfm-accordion-content | Accordion structure used in payment method selection. |
| .srfm-has-dark-bg | Added to blocks when the form background is dark. |
| .srfm-high-z-index | Utility class that forces a higher stacking context. |
Dark Theme
dark-theme.css
/* Replace 456 with your actual form ID */ .srfm-form-container-456 { --srfm-color-scheme-primary: #1d6ef5; --srfm-color-scheme-text-on-primary: #ffffff; --srfm-color-scheme-text: #e2e8f0; --srfm-color-input-background: #1e2430; --srfm-color-input-background-hover: #252d3d; --srfm-color-input-border: #334155; --srfm-color-input-label: #cbd5e1; --srfm-color-input-text: #f1f5f9; --srfm-color-input-placeholder: #64748b; --srfm-color-input-description: #94a3b8; --srfm-error-color: #f87171; --srfm-error-color-border: #ef4444; --srfm-bg-color: #0f172a; }
Full-Width Submit Button
full-width-btn.css
.srfm-form-container-456 .srfm-submit-button { display: flex; width: 100%; } .srfm-form-container-456 .srfm-submit-button button { width: 100%; justify-content: center; }
Compact Form
compact.css
.srfm-form-container-456 { --srfm-row-gap-between-blocks: 12px; --srfm-input-field-padding: 8px 10px; --srfm-input-height: 36px; --srfm-label-font-size: 12px; --srfm-btn-padding: 8px 20px; --srfm-form-padding-top: 16px; --srfm-form-padding-right: 16px; --srfm-form-padding-bottom: 16px; --srfm-form-padding-left: 16px; }
Gradient Submit Button
gradient-btn.css
.srfm-form-container-456 button#srfm-submit-btn { background: linear-gradient(135deg, #1d6ef5, #6366f1) !important; border: none; } .srfm-form-container-456 button#srfm-submit-btn:hover { background: linear-gradient(135deg, #1251c4, #4f46e5) !important; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(29,110,245,.4); }
Targeting - Instant Form vs Embedded
targeting.css
/* Instant Form standalone page only */ .single-sureforms_form.postid-456 { --srfm-color-scheme-primary: #10b981; } /* Same form embedded on other pages */ body:not(.single-sureforms_form) .srfm-form-container-456 { --srfm-color-scheme-primary: #1d6ef5; }
All paid SureForms plans include every feature - the only difference is the number of sites. When any paid plan is installed, the plugin adds .srfm-custom-stylings to the form container, unlocking per-side borders, radii, and box shadows on all fields.
Per-Side Field Borders and Shadows PAID
| --srfm-field-border-width-top/right/bottom/left | Per-side input border widths. Default 1px each. |
| --srfm-field-border-radius-top/right/bottom/left | Per-side input corner radius. Default 6px each. |
| --srfm-field-box-shadow-normal | Box shadow on inputs at rest. |
| --srfm-field-box-shadow-focus | Box shadow on inputs when focused. |
Advanced Button Variables PAID
| --srfm-button-padding-top / right / bottom / left | Per-side button padding (four independent properties). |
| --srfm-button-border-radius-top / right / bottom / left | Per-side button corner radius (four independent properties). |
| --srfm-button-border-style | Button border style, for example solid or none. |
| --srfm-button-border-color | Button border color (resting state). |
| --srfm-button-border-hover-color | Button border color on hover. |
| --srfm-button-background-color-normal | Solid button background (resting state). |
| --srfm-button-background-color-hover | Solid button background on hover. |
| --srfm-button-background-gradient-normal / hover | Gradient background per state. Use with .srfm-btn-bg-gradient class on button. |
| --srfm-button-text-color-normal / hover | Button text color per state. |
| --srfm-button-border-width-top/right/bottom/left | Per-side button border widths. |
| --srfm-btn-color-disabled | Submit button text color in the disabled state. |
Multi-Step and Page Break PAID
| --srfm-page-break-indicator-size | Step circle width and height. |
| --srfm-page-break-indicator-text-color | Text color inside the step indicator. |
| --srfm-page-break-steps-filled / unfilled | Completed and pending step indicator colors. |
| --srfm-page-break-connector-active / pending | Connector line colors between steps. |
| --srfm-page-break-unfilled-progress | Background track color for the progress bar. |
| --srfm-page-break-next-btn-bg-normal / hover | Next button background per state. |
| --srfm-page-break-next-btn-color-normal / hover | Next button text color per state. |
| --srfm-page-break-back-btn-background | Previous button background. |
| --srfm-page-break-back-btn-text-color | Previous button text color. |
| --srfm-page-break-next-btn-border-color-normal | Next button border color (resting state). |
| --srfm-page-break-next-btn-border-color-hover | Next button border color on hover. |
| --srfm-page-break-next-btn-color-normal | Next button text color (resting state). |
| --srfm-page-break-next-btn-color-hover | Next button text color on hover. |
| --srfm-page-break-back-btn-bg-normal | Previous button background (resting state). |
| --srfm-page-break-back-btn-bg-hover | Previous button background on hover. |
| --srfm-page-break-back-btn-border-color-normal | Previous button border color (resting state). |
| --srfm-page-break-back-btn-border-color-hover | Previous button border color on hover. |
| --srfm-page-break-back-btn-color-normal | Previous button text color (resting state). |
| --srfm-page-break-back-btn-color-hover | Previous button text color on hover. |
| --srfm-page-break-connector-checked | Connector line color after a step is completed. |
| --srfm-page-break-steps-pending-text-color | Text color of step numbers that are not yet reached. |
| --srfm-page-break-steps-progress | Current step indicator color while the step is in progress. |
| --srfm-page-break-row-gap | Vertical gap between page-break step indicator rows. |
Paid Field Type Variables PAID
| --srfm-signature-canvas-height | Height of the signature drawing canvas. |
| --srfm-signature-button-bottom | Bottom offset of the clear/undo buttons inside the signature canvas. |
| --srfm-rating-icon-size | Rating star/icon size. |
| --srfm-rating-icon-gap | Gap between rating icons. |
| --srfm-slider-margin-top | Top margin of the slider track. |
| --srfm-slider-thumb-shadow-color | Drop shadow color of the slider drag handle. |
| --srfm-slider-label-font-size | Font size of slider min/max labels. |
| --srfm-slider-label-line-height | Line height of slider min/max labels. |
| --srfm-slider-label-top-padding | Top padding of the slider label text. |
| --srfm-slider-error-gap | Gap between the slider track and its error message. |
| --srfm-upload-vertical-padding | Vertical padding inside the file upload drop zone. |
| --srfm-upload-inner-gap | Gap between icon and text inside the upload area. |
| --srfm-upload-preview-size | Thumbnail size for uploaded image previews. |
| --srfm-upload-file-margin-top | Top margin above the file list after uploading. |
| --srfm-upload-text-line-height | Line height of text inside the upload drop zone. |
| --srfm-datepicker-dropdown-input-gap | Gap between date input and calendar popup. |
| --srfm-expandable-menu-background | Background for calendar, time picker, and dropdown menus. |
| --srfm-password-strength-weak / medium / strong | Strength bar fill colors for each level. |
| --srfm-password-strength-weak-border-color | Input border color when the password is weak. |
| --srfm-password-strength-weak-border-glow | Focus glow when the password is weak. |
| --srfm-password-strength-medium-border-color | Input border color at medium strength. |
| --srfm-password-strength-medium-border-glow | Focus glow at medium strength. |
| --srfm-password-strength-strong-border-color | Input border color when the password is strong. |
| --srfm-password-strength-strong-border-glow | Focus glow when the password is strong. |
| --srfm-conversational-element-width | Max width of question elements in a conversational form. |
| --srfm-row-gap-between-fields / col-gap-between-fields | Repeater sub-field gaps. |
| --srfm-login-row-gap | Row gap inside the login block. |
| --srfm-common-heading-font-size | Font size for headings shared across paid field types (NPS, slider, rating). |
| --srfm-common-heading-line-height | Line height for those shared headings. |
| --srfm-common-message-font-size | Font size for message text in paid field types. |
| --srfm-common-message-line-height | Line height for message text in paid field types. |
Address Field Typography PAID
| --srfm-address-label-font-size / line-height | Font size and line height for sub-field labels inside address blocks. |
| --srfm-address-description-font-size / line-height | Font size and line height for help text inside address blocks. |
| --srfm-address-input-margin | Margin around inputs inside the address block. |
| --srfm-gap-below-address-label | Gap between the address block label and the first input row. |
Checkbox and Multi-Choice Typography PAID
| --srfm-checkbox-label-font-size / line-height | Font size and line height for the main checkbox option label. |
| --srfm-checkbox-description-font-size / line-height | Font size and line height for description text beside each checkbox. |
| --srfm-color-multi-choice-svg | SVG icon color in a multi-choice option (used for custom check icons). |
| --srfm-multi-choice-outer-padding | Outer padding of the entire multi-choice field container. |
| --srfm-multi-choice-internal-option-gap | Gap between label text and icon within each option card. |
| --srfm-multi-choice-vertical-padding | Vertical padding inside each vertically-laid-out option card. |
| --srfm-multi-choice-vertical-svg-size | SVG icon size in vertical layout options. |
| --srfm-multi-choice-vertical-image-size | Image thumbnail size in vertical layout options. |
| --srfm-multi-choice-horizontal-image-size | Image thumbnail size in horizontal layout options. |
Misc Paid Variables PAID
| --srfm-quill-editor-color | Text color inside the Quill rich-text editor field. |
| --srfm-label-text-color | Alias for the main label color used in some paid field layouts. |
| --srfm-col-gap-between-fields | Column gap between repeater sub-fields. |
| --srfm-form-container-width | Max width of the form container (used in embed/instant form mode). |
| --srfm-instant-form-padding-top/right/bottom/left | Per-side padding for instant (embed) form mode. |
| --srfm-instant-form-border-radius-top/right/bottom/left | Per-side border radius for instant form container. |
| --srfm-dropdown-gap-between-input-menu | Gap between the dropdown trigger input and the open menu panel. |
| --srfm-dropdown-multiselect-font-size / line-height / padding | Typography and padding inside multi-select dropdown inputs. |
| --srfm-dropdown-option-selected-icon | Checkmark icon size shown next to a selected dropdown option. |
| --srfm-dropdown-padding-right / padding-right-icon | Right padding of the dropdown trigger, with or without icon present. |
| --srfm-dropdown-badge-background / background-hover | Multi-select badge background at rest and on hover. |
Paid Dropdown Granular Variables PAID
| --srfm-dropdown-icon-color | Dropdown chevron icon color. |
| --srfm-dropdown-icon-disabled | Dropdown chevron color in disabled state. |
| --srfm-dropdown-input-background-hover | Dropdown trigger background on hover. |
| --srfm-dropdown-menu-border-color | Border color of the open dropdown panel. |
| --srfm-dropdown-option-background-hover | Option row background on hover. |
| --srfm-dropdown-option-background-selected | Option row background when selected. |
| --srfm-dropdown-option-text-color | Option row text color. |
| --srfm-dropdown-option-selected-text | Text color of the selected option. |
| --srfm-dropdown-placeholder-color | Placeholder text color inside the dropdown trigger. |
Paid Plan Selectors PAID
| Selector | What it targets |
|---|---|
| .srfm-signature-block / .srfm-input-signature | Signature field and canvas element. |
| .srfm-slider-block / .srfm-slider-wrap / .srfm-slider | Slider field wrapper, track container, and range input. |
| .srfm-slider-thumb / .srfm-slider-tooltip / .srfm-tooltip | Slider drag handle, floating value tooltip, and the generic tooltip element used across field types. |
| .srfm-fill | Filled portion of the slider track (the active range left of the thumb). |
| .srfm-round | Applied to the slider thumb to give it a circular appearance. |
| .srfm-rating-block | Rating field block wrapper. |
| .srfm-nps-block / .srfm-nps-buttons | NPS field wrapper and buttons container. |
| .srfm-nps-btn / .srfm-nps-btn.srfm-nps-selected | Individual score button and its selected state. |
| .srfm-nps-labels / .srfm-nps-label-high | Low/high label row and the high end label. |
| .srfm-nps-detractor-bg / .srfm-nps-passive-bg / .srfm-nps-promoter-bg | Background states on NPS buttons: scores 0-6, 7-8, and 9-10 respectively. |
| .srfm-upload-block / .srfm-upload-wrap | File upload block and inner drop zone wrapper. |
| .srfm-upload-preview | Uploaded image preview thumbnail. |
| .srfm-upload-data / .srfm-upload-data-details | File info row and its details section. |
| .srfm-upload-data-filename / .srfm-upload-data-size | Filename and file size text in the uploaded file row. |
| .srfm-datepicker-block / .datepicker-picker | Date picker field and calendar popup. |
| .datepicker-cell.selected / .datepicker-cell.disabled | Selected and disabled calendar dates. |
| .srfm-time-picker-block | Time picker field block wrapper. |
| .srfm-address-autocomplete-block | Address autocomplete field block wrapper. |
| .srfm-page-break / .srfm-page-break-header-container | Form step wrapper and step indicator header area. |
| .srfm-page-break-steps / .srfm-steps-container / .srfm-steps-content | Step indicator list, its container, and content wrapper. |
| .srfm-steps-count-wrap / .srfm-steps-label / .srfm-step-count | Step number wrapper, step label text, and step count element. |
| .srfm-page-break-buttons | Wrapper around next/previous navigation buttons. |
| .srfm-page-break-progress / .srfm-page-break-progress-container | Progress bar fill element and its outer container. |
| .srfm-progress-connector | Connector line between step indicator circles. |
| .srfm-nxt-btn / .srfm-pre-btn | Next and previous step buttons. |
| .srfm-circle-shape / li.active .srfm-circle-shape / li.filled .srfm-circle-shape | Step indicator circles — default, active, and completed states. |
| .srfm-circle-text | Step number text rendered inside a circle indicator. |
| .srfm-cf-wrap / .srfm-cf-block.srfm-active | Conversational form wrapper and active question. |
| .srfm-cf-progress-bar-fill / .srfm-cf-start-btn | Conversational form progress bar and start button. |
| .srfm-save-resume-link | Save and resume later link on multi-step forms. |
| .srfm-repeater-block / .srfm-repeater-item | Repeater field wrapper and row. |
| .srfm-repeater-add-btn / .srfm-repeater-remove-btn | Add and remove row buttons. |
| .srfm-password-block / .srfm-password-confirm-block | Password field block and the confirm-password block wrapper. |
| .srfm-password-validate | Strength meter displayed below the password input. |
| .srfm-strength-1 / .srfm-strength-2 / .srfm-strength-3 / .srfm-strength-4 / .srfm-strength-5 | Password strength state classes applied to the strength meter (1 = very weak, 5 = very strong). |
| .srfm-login-block / .srfm-register-block | Login and registration block wrappers. |
| .srfm-lost-password-block / .srfm-lost-password | Lost password form block wrapper and the inline lost-password link element. |
| .srfm-logged-in-message / .srfm-form-restriction-wrapper | Already-logged-in message and access gate. |
.srfm-custom-stylings must be present on the form container for per-side border and shadow variables to work. It is added automatically when any paid plan is installed and active.
Underline-Only Inputs PAID
underline-inputs.css
.srfm-form-container-456.srfm-custom-stylings { --srfm-field-border-width-top: 0px; --srfm-field-border-width-right: 0px; --srfm-field-border-width-bottom: 2px; --srfm-field-border-width-left: 0px; --srfm-field-border-radius-top: 0px; --srfm-field-border-radius-right: 0px; --srfm-field-border-radius-bottom:0px; --srfm-field-border-radius-left: 0px; --srfm-field-box-shadow-normal: none; --srfm-field-box-shadow-focus: none; --srfm-color-input-background: transparent; }
Multi-Step Progress Theme PAID
multi-step.css
.srfm-form-container-456 { --srfm-page-break-indicator-size: 28px; --srfm-page-break-steps-filled: #1d6ef5; --srfm-page-break-steps-unfilled: #e2e8f0; --srfm-page-break-indicator-text-color: #ffffff; --srfm-page-break-connector-active: #1d6ef5; --srfm-page-break-connector-pending: #e2e8f0; --srfm-page-break-unfilled-progress: #e2e8f0; --srfm-page-break-next-btn-bg-normal: #1d6ef5; --srfm-page-break-next-btn-bg-hover: #1251c4; --srfm-page-break-back-btn-background: #f1f5f9; --srfm-page-break-back-btn-text-color: #374151; }
Password Strength Colors PAID
password-strength.css
.srfm-form-container-456 { --srfm-password-strength-weak: #ef4444; --srfm-password-strength-medium: #f59e0b; --srfm-password-strength-strong: #10b981; --srfm-password-strength-weak-border-color: #ef4444; --srfm-password-strength-strong-border-color:#10b981; }
Gradient Button via Paid Mode PAID
gradient-btn-paid.css
/* Enable gradient in the form editor, then override the gradient value */ .srfm-form-container-456.srfm-custom-stylings .srfm-button.srfm-btn-bg-gradient { --srfm-button-background-gradient-normal: linear-gradient(135deg, #1d6ef5, #6366f1); --srfm-button-background-gradient-hover: linear-gradient(135deg, #1251c4, #4f46e5); --srfm-button-text-color-normal: #ffffff; --srfm-button-text-color-hover: #ffffff; }
Disclaimer: This is an unofficial reference tool created by Nahnu Media and is not affiliated with, endorsed by, or maintained by the SureForms team. It is provided free of charge as a community resource. All CSS variable names, selectors, and behaviors are sourced from the SureForms plugin source code and are subject to change without notice. Use this reference at your own risk. Nahnu Media makes no guarantees about accuracy, completeness, or fitness for any particular purpose. Always test your CSS in a staging environment before deploying to production.
AI Prompt Builder
Generate a complete Claude prompt loaded with the full CSS reference, your form HTML, and your design goals.
Jump to Section
Reference Stats
| Version | v2.10.1 |
| Free variables | 55+ |
| Paid variables | 50+ |
| Total selectors | 170+ |
SureForms AI Prompt Builder
Generates a complete, detailed prompt to paste into Claude. The prompt embeds the full CSS reference so Claude has everything it needs to write accurate CSS for your specific form.
How to use this prompt with Claude for the best results
This builder generates the CSS reference and your form details. You add your form HTML and any screenshots. Together, Claude has everything it needs to write CSS that matches your exact form and brand.
1
Copy your form HTML from the browser inspector
Right-click your SureForms form on your live site and click Inspect. Find the div.srfm-form-container wrapper, right-click it, and choose Copy outerHTML. This gives Claude the exact classes on your specific form.
Why it matters: A five-field contact form has a completely different HTML structure from a multi-step registration form. Claude needs your actual HTML to write selectors that target the right elements.
2
Share your website URL or paste your brand colors
Paste your site URL below and Claude will visit it to extract your brand colors, typography, and aesthetic. Or describe your colors directly in the goal field.
3
Screenshot your form and paste any CSS you like
Upload screenshots directly into the Claude chat alongside the prompt. Claude reads images and uses them as visual reference when writing the CSS. If you have found CSS online or have a snippet you like, paste it into the field below — Claude will adapt it to your exact form structure.
What to screenshot: The full form on your live site, a zoomed-in button or field, a design from another site you want to match, or any section showing the color and spacing feel you’re after.
Example CSS: Found a style you love in a tutorial or on another site? Paste it in the CSS field below. Even partial or rough CSS gives Claude a concrete starting point — it will rewrite the selectors to target your specific form.
Example CSS: Found a style you love in a tutorial or on another site? Paste it in the CSS field below. Even partial or rough CSS gives Claude a concrete starting point — it will rewrite the selectors to target your specific form.
4
Paste the prompt into Claude, then add your form HTML below it
Open a new Claude conversation at claude.ai. Attach screenshots first, paste the prompt, then paste your copied form HTML right after the separator at the bottom. Send it all as one message.
Generated prompt - paste into Claude, then add your form HTML after the separator
Loading…
Our Plugin Portfolio
Like What We Build?
Like What We Build?
Check Out Our Plugins
This tool is one of many things we build for the WordPress community. Nahnu Plugins is our growing suite of professional-grade WordPress plugins.
Browse Nahnu Plugins
Professional WordPress plugins for CDN management, consent, performance, and more.
How It Works
SureForms CSS in
SureForms CSS in
Three Concepts
SureForms uses CSS custom properties prefixed with --srfm-*. Understanding these three things gets you styling in minutes.
Variables Drive the Style
SureForms generates a scoped style block per form that sets --srfm-* CSS variables. Override them to restyle any part of your form without touching plugin files.
Find Your Form ID
Right-click your form and click Inspect. Find the outermost div with a class starting with srfm-form-container-. The number at the end is your form ID and CSS scope.
Copy and Paste
Find the variable or selector in the reference, copy it, set your value and paste it into your form's custom CSS, Appearance > Additional CSS, or your child theme's style.css.
Work With Us
Need Help Styling
Need Help Styling
Your SureForms?
If you want someone to handle the CSS for you, Nahnu Media builds and maintains WordPress sites for growing brands. Get in touch and we will take care of it.