Articles in this section

See more

Styling Forms with Stylesheets

Avatar
Justin Garrett
  • 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.

Note: SharpSpring offers Professional Services to assist with custom coding. You must have code knowledge in order to use the information within this article.

The following users can edit content in form stylesheets:

  • Administrators
  • Marketing Managers


Accessing Form Style Settings

To access the style settings, stylesheet for a 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. Modify the CSS as necessary.
  6. Click Save Stylesheet.
  


Click to enlarge.

For information on editing CSS content, refer to this external series of help documentation hosted by w3schools.


Frequently Asked Questions

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 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 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 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: Please 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: Please refer to this external documentation for a step-by-step process. 
input[type="text"]{color: #0000FF !important;}

 


Ready to Learn More?

Related articles

Comments

0 comments

Article is closed for comments.

×

What's wrong with this help article?

Still didn't find what you are looking for?