Articles in this section

See more

Styling Forms with Stylesheets

Avatar
Cris Echeguren
  • Updated
Follow
If you would not prefer to use the Visual Form Styler to create your forms, you can instead use CSS stylesheets.

SharpSpring 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:    
  Marketing Automation ✓  
  CRM Ultimate ✓  
  CRM PRO ✓  
  CRM Free ✓  
        
  Toolbar:    
0NavMarketing.png
       
  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.  In SharpSpring's top toolbar, click
    Content > Forms.
  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.
   


Click to enlarge.
 
Note: SharpSpring offers Professional Services to assist with custom coding.
 


Creating Stylesheets

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. Click the Styles tab.
  4. Click the Advanced CSS 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 in the Select Current Stylesheets section. 
  10. Click Save Changes.
  


Click to enlarge.


Editing Stylesheets

To edit existing stylesheets, do the following:

  1. In SharpSpring's top toolbar, click
    Content > Forms.
  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.
  


Click to enlarge.


Deleting Stylesheets

To delete stylesheets, do the following:

  1. In SharpSpring's top toolbar, click
    Content > Forms.
  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. In the modal window that appears, click
    Delete Stylesheet.
  


Click 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. In SharpSpring's top toolbar, click
    Content > Forms.
  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.
  


Click to enlarge.


Creating Stylesheet Buttons

To create a custom form button for use with stylesheets, do the following:

  1. In SharpSpring's top toolbar, click
    Content > Forms.
  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. In the Basic tab of modal window that appears, adjust the following visual attributes:

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

       •   Field Width
       •   Button Color
       •   Gradient
       •   Border
  9. In the Advanced tab of the modal window that appears, adjust the following visual attributes:

       •   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. 
  


Click 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

To edit created stylesheet buttons, do the following:

  1. In SharpSpring's top toolbar, click
    Content > Forms.
  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.
  


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


Selecting Stylesheet Buttons

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

  1. In SharpSpring's top toolbar, click
    Content > Forms.
  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. 
  


Click to enlarge.


Deleting Stylesheet Buttons

To delete created stylesheet buttons, do the following:

  1. In SharpSpring's top toolbar, click
    Content > Forms.
  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.
  


Click to enlarge.


Frequently Asked Questions

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


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, SharpSpring does not recommend using display: none, because it will remove the element from the page completely. SharpSpring 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?