Using custom CSS in a webform can be a great way to add style or functionality to webforms. However, editing CSS in the old version of the webforms interface was not a simple process. It required you to actively track down the selector that you wanted to modify using either the raw source code or a browser extension which could assist in finding the correct name to be used. With the new webforms interface however, we’ve made it very easy to see the CSS and find the correct portion to edit if you want to make very specific changes. This post will walk you through using the new webform builder to find and edit the CSS code to truly personalize your webforms.
Before we begin, please note that this guide will not tell you what changes to make to the CSS, simply where to find it in the new webforms builder.
Step 1: Choose your Webform
The new webform builder allows you to edit the CSS for any of the webforms available to you, from an Add contact form to a Manage Preferences page. The first step is just deciding which form you would like to edit. When you’ve decided, you can click either the name of the form, or the pencil icon off to the right.
Step 2: Click the ‘Styles’ link
The next step is to simply click on the Styles button on the upper right of the form editor screen. This will bring up a lightbox that contains all of the CSS code for the current webform. You can see that the CSS is well commented, which means you should be able to tell which selector controls which portion of your form content.
Step 3: Check the checkbox
In order to make sure that you are able to edit the CSS, you’ll just need to make sure that the Use the custom stylesheet below checkbox is checked. This will enable the text field with the CSS in it, and you will be able to make any edits that you would like.
Resetting the form
If you make a few too many edits and accidentally hide your email address field or something, we also offer a quick way to revert back to the default CSS stylesheet. If you need to do this, just click the Styles link one more time and then click the link at the very bottom of the lightbox, the link is pictured below.
Hopefully this post illustrates the ease with which you can now find and edit specific styles on your webforms. If you have any questions or suggestions, feel free to leave them in the comments section below.
Lucas Weber,
Bronto Client Services
Related posts:
- Getting Comfortable With New Webforms Bronto’s Spring 2010 Release is finally here, and with it,...
- Webforms and Subscriber Confirmation Back in February, Lucas Weber gave us a great post...
- Creating New Webforms Coming soon to a Bronto near you, our new webforms...
Follow Bronto on Twitter
{ 1 trackback }
{ 0 comments… add one now }