- Calculation Formula Guide
- Using Calculations in SureForms: A Step-by-Step Guide
- GDPR Compliant Forms
- Conversational Form
- Instant Forms
- Create Multi Step Forms In WordPress
- Create WordPress Forms With Conditional Logic
- How to Create Inline Forms in SureForms
- SureForms Login Block – Step-by-Step Guide
- SureForms Registration Block – Step-by-Step Guide
- Unable to Upload SureForms ZIP: File Unzipped On Download
- Browser Support for SureForms
- Not Getting Update Notifications
- How To Rollback to Previous SureForms Versions
- Publishing Failed: Invalid JSON Response
- Troubleshooting Email Sending In SureForms
- SureForm Submissions Marked as Spam
- API Request Failed – Nonce Verification Error
- Fixing the “Destination folder already exists” Error When Installing SureForms
- srfm_enable_redirect_activation
- sureforms_plugin_action_links
- srfm_quick_sidebar_allowed_blocks
- srfm_integrated_plugins
- srfm_suretriggers_integration_data_filter
- srfm_form_submit_response
- srfm_enable_gutenberg_post_types
- srfm_languages_directory
- srfm_form_template
- srfm_disable_nps_survey
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.
We don't respond to the article feedback, we use it to improve our support content.