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.
|
Available with: | ||||
Marketing Automation | ✓ | ||||
CRM Ultimate | ✓ | ||||
CRM PRO | ✓ | ||||
CRM Free | ✓ | ||||
Toolbar: | |||||
![]() |
|||||
Users: | |||||
Administrators | ✓ | ||||
Company Managers | ✓ | ||||
Marketing Managers | ✓ | ||||
Sales Managers | |||||
Salespersons | |||||
Jr. Salespersons | |||||
Utilizing Form Style Settings
To access and modify Styles settings, do the following:
|
||
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
![]() ![]() |
||
Creating Stylesheets
To create a stylesheet and apply it to the form, do the following:
|
Editing Stylesheets
To edit existing stylesheets, do the following:
|
Deleting Stylesheets
To delete stylesheets, do the following:
|
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? Q: How do I center the Submit button? Q: How do I change the label color? Q: How do I change the format of radio button to display vertically? |
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;}