If you would not prefer to use the Visual Form Styler to create your forms, you can instead use CSS stylesheets. Lead Gen & CRM forms can be edited or otherwise styled using the form stylesheet, which provides another option to customize your form's code and design.
Administrators | ✓ | |
Company Managers | ✓ | |
Marketing Managers | ✓ | |
Sales Managers | ||
Salespersons | ||
Jr. Salespersons |
When using stylesheets with forms, you have the option of bringing in CSS from external sites. External CSS URLs are necessary only if you have a stylesheet that is already associated with your site and want the form to have the same look and feel. Otherwise, consider creating a new stylesheet.
To use an external CSS stylesheet for your forms, you will need to paste the URL of the desired CSS stylesheet.
To paste external CSS URLs into your forms, create a new or edit an existing form:
Note: Constant Contact offers Professional Services to assist with custom coding.
To create a new stylesheet and apply it to the form, create or edit a form:
To edit an existing stylesheets, within the form editor:
You can delete stylesheets you no longer need.
To delete stylesheets, within the form editor:
Be aware that stylesheets cannot be recovered when deleted. Also, stylesheets cannot be deleted if they are associated with any form, even ones you are not currently creating or editing. You will need to associate those forms with different stylesheets before you can delete the stylesheet.
You can create buttons for your stylesheets. To create a custom form button for use with stylesheets, within the form editor:
• Width |
• Field Width |
• Top Gradient |
• Hover |
Please be aware that if you are not using a custom stylesheet for your form, the Visual Form Styler should be used when creating buttons instead.
To edit an existing stylesheet button, within the form editor:
You can set buttons to be used with stylesheets.
To use a specific button with a form stylesheet, within the form editor:
To delete stylesheet buttons that you no longer need, within the form editor:
If you are using a stylesheet and want to instead use the Visual Form Styler, you can change to the Visual Form Styler.
To enable the Visual Form Styler for forms using custom stylesheets, within the form editor:
Q: Where can I learn about CSS?
A: Refer to this external series of help documentation hosted by w3schools for information on editing CSS content.
Q: How do I center the Submit button?
A: Reference the paragraph container class=”clear” that holds the button and set it to align as centered in the frame..clear {text-align: center !important;}
Q: How do I change the label color?
A: Reference the label element and modify the color. label {color: #0000FF !important;}
Q: How do I change the format of radio button to display vertically?
A: Reference the element’s class (“radio-option”) and set it to display in a list rather than in a row. By default, radio buttons are set to display in a row..radio-option {display: list-item !important;}
Q: How do I hide labels?
A: Reference the label element and set it to display nothing.label {display: none !important;}
Q: How do I change the format of checkboxes to display vertically?
A: Reference the element’s class (“checkbox-option”) and set it to display in a list rather than in a row. By default, checkboxes are displayed in a row..checkbox-option {display: list-item !important;}
Q: How do I hide labels (or something similar), but only for certain fields?
A: Refer to this external documentation for a step-by-step process. label[for="field_123456789"]{display: none !important;}
Q: How do I change input for just a certain field type?
A: Refer to this external documentation for a step-by-step process. input[type="text"]{color: #0000FF !important;}
Q: How do I accommodate users who may be using a screen reader due to visual impairment?
A: In this case, Constant Contact does not recommend using display: none
, because it will remove the element from the page completely. Constant Contact recommends using the following to ensure that it is still visible to a screen reader while being invisible to the human eye:
label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
Copyright © 2025 · All Rights Reserved · Constant Contact · Privacy Center