Styling Forms with Stylesheets

Customize the look of your form using a CSS stylesheet

Pasting External CSS URLs

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:

1. Click the Styles tab.
2. Click the Advanced CSS tab.
3. Paste an external CSS URL in the External CSS URL field.
4. Select None in the Select Current Stylesheets section.
   
   
    
5. Do either of the following in the Submit Button Style section:
   • Create a custom Submit button.
   • Choose from any of the existing default buttons.
6. Click Save Changes.
   
   
    

Note: Constant Contact offers Professional Services to assist with custom coding.

Create a new Stylesheet

To create a new stylesheet and apply it to the form, create or edit a form:

1. Click the Styles tab.
2. Click the Advanced CSS tab.
3. Click Add Stylesheet.
   
   
4. Name the stylesheet in the window that appears.
5. Edit the stylesheet as necessary.
6. Click Save Stylesheet.
   
   
    
7. Select the created stylesheet radio button in the Select Current Stylesheets section. 
8. Click Save Changes.
   
   
    

Edit an existing Stylesheet

To edit an existing stylesheets, ​​​​within the form editor:

1. Click the Styles tab.
2. Click the Advanced CSS tab.
3. Hover over an existing stylesheet and click    Edit.
   
   
    
4. Edit the stylesheet as necessary.
5. Click Save Stylesheet.
   
   
    

Delete a Stylesheet

You can delete stylesheets you no longer need.

To delete stylesheets, within the form editor:

1. Click the Styles tab.
2. Click the Advanced CSS tab.
3. Hover over an existing stylesheet and click    Delete.
   
   
    
4. Click Delete Stylesheet in the modal window that appears.
   
   
    

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.
 

Creating Stylesheet Buttons

You can create buttons for your stylesheets. To create a custom form button for use with stylesheets, within the form editor:

1. Click the Styles tab.
2. Click the Advanced CSS tab. 
3. Scroll down to the Legacy Button Styler section and enter text into the Submit Button Text field. 
4. Click Create New Button.
   
   
    
5. Adjust the following visual attributes in the Basic tab of modal window that appears:

   •   Width    •   Height    •   Border Radius    •   Font Size    •   Button Name

   •   Field Width    •   Button Color    •   Gradient    •   Border

   
   
    
6. Adjust the following visual attributes in the Advanced tab of the modal window that appears:
   Note: The Forms tab of the button creation modal window displays which forms the button is currently attached to.

   •   Top Gradient         Color    •   Bottom Gradient         Color    •   Text Color    •   Hover Text Color    •   Border Color

   •   Hover         Background         Color    •   Active         Background         Color

7. Click Save.
   
   
    
8. Click Save Changes. 
   Note: Once saved, the form will automatically update with the button.
   
   
    

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.
 

Editing Stylesheet Buttons

To edit an existing stylesheet button, within the form editor:

1. Click the Styles tab.
2. Click the Advanced CSS tab. 
3. Scroll down to the Legacy Button Styler section and hover over the desired button. Click    Edit.
   
   
    
4. Edit available button attributes as desired.
   Note: The Forms tab of the button creation modal window displays which forms the button is currently attached to.
5. Click Save.
   
   
    

Select a Stylesheet Button to use in your Form

You can set buttons to be used with stylesheets.

To use a specific button with a form stylesheet, within the form editor:

1. Click the Styles tab.
2. Click the Advanced CSS tab. 
3. Scroll down to the Legacy Button Styler section and click the radio toggle next to the desired button.
4. Click Save Changes. 
   
   
    

Deleting Stylesheet Buttons

To delete stylesheet buttons that you no longer need, within the form editor:

1. Click the Styles tab.
2. Click the Advanced CSS tab. 
3. Scroll down to the Legacy Button Styler section. Hover over the desired button and click    Delete. 
   
   

Switch from Using a Stylesheet to the Visual Form Styler

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:

1. Click the Styles tab.
2. Click the Advanced CSS tab.
3. Click Enable Visual Styler in the Select Current Stylesheets section. 
   
   
    
4. Click Enable.
   
   
    
5. Click Save Changes.
   
   
    

Frequently Asked Questions

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;}

Questions?