Styling Forms with Stylesheets

Article Contents

• Utilizing Form Style Settings
• Creating Stylesheets
• Editing Stylesheets
• Deleting Stylesheets
• Frequently Asked Questions
• Ready to Learn More?

To access and modify Styles settings, do the following:

1. In SharpSpring's top toolbar, click
   Content > Forms.
2. Create or edit a form.
3. In a SharpSpring form, click  
     Options > Edit Form.
4. Click the Styles tab.
5. In the Form CSS section, do one of the following:
   
      •   Paste an External CSS URL.
      •   Create, edit, or delete Current
           Stylesheets. 
6. In the Submit Button Style section, do one of the following:
   
      •   Create a custom Submit button. 
      •   Choose from any of the existing default buttons.
7. Click Save Changes.

Click to enlarge.

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

1. In SharpSpring's top toolbar, click
   Content > Forms.
2. Create or edit a form.
3. In a SharpSpring form, click  
     Options > Edit Form.
4. Click the Styles tab.
5. Click Add Stylesheet.
6. In the window that appears, name the stylesheet.
7. Edit the stylesheet as necessary.
8. Click Save Stylesheet.
9. Select the created stylesheet radio button. 

Click to enlarge.

To edit existing stylesheets, do the following:

1. In SharpSpring's top toolbar, click
   Content > Forms.
2. Create or edit a form.
3. In a SharpSpring form, click  
     Options > Edit Form.
4. Click the Styles tab.
5. Hover over an existing stylesheet.
6. Click    Edit.
7. Edit the stylesheet as necessary.
8. Click Save Stylesheet.

Click to enlarge.

To delete stylesheets, do the following:

1. In SharpSpring's top toolbar, click
   Content > Forms.
2. Create or edit a form.
3. In a SharpSpring form, click  
     Options > Edit Form.
4. Click the Styles tab.
5. Hover over a stylesheet.
6. Click    Delete.
7. In the modal window that appears, click
   Delete Stylesheet.

Click to enlarge.

Q: Where can I learn about CSS?
A: For information on editing CSS content, refer to this external series of help documentation hosted by w3schools.

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