How to Add Custom CSS for Specific Elements in SureForms

Customizing your website’s forms with custom CSS is an essential part of maintaining branding consistency and improving user experience. SureForms allows you to modify form styles easily using CSS variables, providing flexibility without breaking the core structure of your forms.

This guide will walk you through the process of adding custom CSS and targeting the right elements, including how to apply styles specifically to the “Instant Form” while avoiding other instances.

Steps to Add Custom CSS

1. Identify the Target Element

To begin, you need to determine which element you want to style. In this example, we are targeting the form block label.

2. Apply Basic Custom CSS

Once you’ve identified the element, add your custom CSS in the appropriate stylesheet or the WordPress Customizer under Appearance > Customize > Additional CSS.

Example:

.srfm-block .srfm-block-label {
    color: #4c1de8 !important;
}

This will apply the styles to all SureForms labels.

3. Targeting Specific Elements (Instant Form Only)

By default, the custom CSS might be applied to multiple instances, such as embedded forms and instant forms. To ensure it only applies to the Instant Form, follow these steps:

• Open the Developer Tools in your browser (Right-click > Inspect Element or press F12).
• Identify the parent selector unique to the Instant Form.

• Copy the class name of this parent element.
• Modify your CSS to include this parent class as a selector.
• Navigate to form editor Click on right sidebar Form > Advance, click on  Custom CSS a pop-up will appaer paste Custom CSS

Example:

.single-sureforms_form.postid-1830 .srfm-block-label {
    color: #ff0000 !important;
}

This ensures that the custom CSS applies only to the Instant Form and not the embedded form.

4. Verifying Changes

After adding the CSS:

• Clear Cache: Ensure your browser cache is cleared.
• Hard Reload: Press Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac) to refresh the page forcefully.
• Check Different Pages: Verify the styles are only applied where needed.

5. Troubleshooting

• If the changes are not reflecting, ensure your CSS is properly written.
• Use !important in your CSS rule to override other styles if necessary.

.instant-form-container .sure-form-label {
color: red !important;
}

• Check if the correct parent selector is being used.
• Inspect the page source to confirm the correct class names are applied.

Examples of CSS Customization

Changing Typography

.srfm-block .srfm-block-label {
font-size: 18px !important;
color: #4c1de8 !important;
}

Modifying Button Styles

button#srfm-submit-btn {
    background-color: #ff0000 !important; 
}

button#srfm-submit-btn:hover {
    background-color: #1a30b2 !important; 
}

Adjusting Form Spacing

.sureforms-field {
  margin-bottom: 15px;
  padding: 10px;
}

Field Background Color

.srfm-form-container .srfm-form .srfm-block .srfm-input-common {
background-color:#ffffff !important;
}

Notes on Compatibility

• If SureForms updates its default styles, check your custom CSS to ensure it remains compatible.
• For complex changes, consider using a child theme’s stylesheet instead of the WordPress Customizer.

Conclusion

Adding custom CSS to SureForms is a straightforward way to enhance your form’s appearance and ensure it aligns with your website’s branding. By following the steps in this guide, you can achieve a more professional and user-friendly form design.

With the right CSS tweaks, your SureForms-powered forms will seamlessly integrate into your site’s aesthetics, providing an optimal experience for users.