Articles in this section

See more

Styling Forms with Stylesheets

Avatar
Cris Echeguren
  • Updated
Follow
SharpSpring forms can be edited or otherwise styled using the form stylesheet.

Editing this stylesheet is another way 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    
 


Utilizing Form Style Settings

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. Click the Styles tab.
  4. In the Form CSS section, do one of the following:

       •   Paste an External CSS URL.

       •   Create, edit, or delete Current
            Stylesheets    . 
  5. In the Submit Button Style section, do one of the following:

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

Click to enlarge.
Note: SharpSpring offers Professional Services to assist with custom coding.
 
Note: 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.
 
Note: When modifying existing buttons, click  
pencil.png  Edit to modify the button, or  1close.png  Delete to remove the button from the list of choices.
 


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 Add Stylesheet.
  5. In the window that appears, name the stylesheet.
  6. Edit the stylesheet as necessary.
  7. Click Save Stylesheet.
  8. Select the created stylesheet radio button. 
  


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. Hover over an existing stylesheet.
  5. Click  pencil.png  Edit.
  6. Edit the stylesheet as necessary.
  7. 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. Hover over a stylesheet.
  5. Click  1close.png  Delete.
  6. 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.  


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

  
Note: For those that may be using a screen reader due to visual impairment, SharpSpring does not recommend using display: none because it will remove the element from the page completely. SharpSpring recommends using
label {height: 1px; margin: -1px; width: 1px;}
to ensure that it is still visible to a screen reader while being invisible to the human eye.

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

Related articles

×

Why was this help article not helpful?

Still didn't find what you are looking for?