Articles in this section

See more

Styling Forms with Stylesheets

Avatar
Leya Wood
  • Updated
Follow

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.

This article will provide information on editing certain content in form stylesheets.

Article Contents

Available With:
Trial ✓  
Essential ✓  
Advanced ✓  
Ultimate ✓  
Toolbar:
FormsForms
Users:
Administrators ✓  
Company Managers ✓  
Marketing Managers ✓  
Sales Managers    
Salespersons    
Jr. Salespersons    


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 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, do the following:

  1. Click Forms in the left toolbar.
  2. Create or edit a form.
  3. Click the Styles tab.
  4. Click the Advanced CSS tab.
  5. Paste an external CSS URL in the External CSS URL field.
  6. Select None in the Select Current Stylesheets section.
  7. Do either of the following in the Submit Button Style section:

       •   Create a custom Submit button.
     
       •   Choose from any of the existing default
            buttons.
  8. Click Save Changes.
   

PasteStylesheet-cropped.gifClick to enlarge.
 
Note: Constant Contact offers Professional Services to assist with custom coding.
 


Creating Stylesheets

You can create stylesheets as needed.

To create a stylesheet and apply it to the form, do the following:

  1. Click Forms in the left toolbar.
  2. Create or edit a form.
  3. Click the Styles tab.
  4. Click the Advanced CSS tab.
  5. Click Add Stylesheet.
  6. Name the stylesheet in the window that appears.
  7. Edit the stylesheet as necessary.
  8. Click Save Stylesheet.
  9. Select the created stylesheet radio button in the Select Current Stylesheets section. 
  10. Click Save Changes.
  

CreateStylesheet-cropped.gif
Click to enlarge.


Editing Stylesheets

You can edit stylesheets as necessary.

To edit existing stylesheets, do the following:

  1. Click Forms in the left toolbar.
  2. Create or edit a form.
  3. Click the Styles tab.
  4. Click the Advanced CSS tab.
  5. Hover over an existing stylesheet.
  6. Click  pencil.png  Edit.
  7. Edit the stylesheet as necessary.
  8. Click Save Stylesheet.
  

EditSylesheet-cropped.gif
Click to enlarge.


Deleting Stylesheets

You can delete stylesheets you no longer need.

To delete stylesheets, do the following:

  1. Click Forms in the left toolbar.
  2. Create or edit a form.
  3. Click the Styles tab.
  4. Click the Advanced CSS tab.
  5. Hover over an existing stylesheet.
  6. Click  1close.png  Delete.
  7. Click Delete Stylesheet in the modal window that appears.
  

DeleteStylesheet-cropped.gifClick to enlarge.

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.


Enabling 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 with custom stylesheets, do the following:

  1. Click Forms in the left toolbar.
  2. Create or edit a form.
  3. Click the Styles tab.
  4. Click the Advanced CSS tab.
  5. Click Enable Visual Styler in the Select Current Stylesheets section. 
  6. Click Enable.
  7. Click Save Changes.
  

VFSStylesheet-cropped.gifClick to enlarge.


Creating Stylesheet Buttons

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

  1. Click Forms in the left toolbar.
  2. Create or edit a form.
  3. Click the Styles tab.
  4. Click the Advanced CSS tab. 
  5. Scroll down to the Legacy Button Styler section.
  6. Enter text into the Submit Button Text field. 
  7. Click Create New Button.
  8. 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
  9. Adjust the following visual attributes in the Advanced tab of the modal window that appears:

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

       •   Hover
            Background
            Color
       •   Active
            Background
            Color
  10. Click Save.
  11. Click Save Changes. 
  

CreateLegacy-cropped.gifClick to enlarge.
Note: Once saved, the form will automatically update with the button.
Note: The Forms tab of the button creation modal window displays which forms the button is currently attached to.

Be aware that the Visual Form Styler should be used when creating buttons for use with forms not using custom stylesheets.


Editing Stylesheet Buttons

You can edit created buttons as necessary.

To edit created stylesheet buttons, do the following:

  1. Click Forms in the left toolbar.
  2. Create or edit a form.
  3. Click the Styles tab.
  4. Click the Advanced CSS tab. 
  5. Scroll down to the Legacy Button Styler section.
  6. Hover over the desired button.
  7. Click  12edit.png  Edit.
  8. Edit available button attributes as desired.
  9. Click Save.
  

EditLegacy-cropped.gifClick to enlarge.
 
Note: The Forms tab of the button creation modal window displays which forms the button is currently attached to.
 


Selecting Stylesheet Buttons

You can set buttons to be used with stylesheets.

To use a specific button with a form stylesheet, do the following:

  1. Click Forms in the left toolbar.
  2. Create or edit a form.
  3. Click the Styles tab.
  4. Click the Advanced CSS tab. 
  5. Scroll down to the Legacy Button Styler section.
  6. Click the radio toggle next to the desired button.
  7. Click Save. 
  

SelectLegacy-cropped.gifClick to enlarge.


Deleting Stylesheet Buttons

You can delete buttons you no longer need.

To delete created stylesheet buttons, do the following:

  1. Click Forms in the left toolbar.
  2. Create or edit a form.
  3. Click the Styles tab.
  4. Click the Advanced CSS tab. 
  5. Scroll down to the Legacy Button Styler section.
  6. Hover over the desired button.
  7. Click  1close.png  Delete.
  

DeleteLegacy-cropped.gifClick to enlarge.


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

Related articles

×

Why was this help article not helpful?

Still didn't find what you are looking for?