SharpSpring Form Styling

1

Form styling can often be a hassle, especially when your form is being hosted on another platform such as MailChimp, SharpSpring, or Wufoo.

Luckily, SharpSpring form styling is simple, and also repeatable for use on future forms. We’re going to go over best practices on how to make your embedded SharpSpring form user-friendly and how to reuse your styles to cut your work in half.

In the SharpSpring form builder, you will start from a blank canvas to something a little easier on the eyes using SharpSpring’s CSS and form styling section under the Styles tab.

SharpSpring Pricing

First Up – Form Skeleton

Log into SharpSpring and build your form out using any fields, custom fields, or text elements that you need to get your form to function and collect the data you need and save. This will be the form skeleton that we will be styling.

Screen Shot 2016-06-03 at 2.30.09 PM

Quick Styling

There are a few ways to style forms in SharpSpring.

The quickest way to style your form in a more general way is by using SharpSpring’s CSS URL feature.

If you decide to use your website’s general CSS, simply copy and paste your CSS URL in the “Form CSS” field and save. This will grab the styles from your site and apply them to your form.

Custom SharpSpring Form Styling

If you decide to go with a more tailored style that has more options, you can use the Current Stylesheet option.

custom css - SharpSpring form styling

Click +Add Stylesheet to create a new one and give it a name following best practices for naming conventions. You can always go back and edit these stylesheets later. Click the pencil icon to edit your stylesheet.

You can use general CSS the same as usual here, or you can address each element specifically using its ID. Each field has its own unique identifier so you can single it out and add it to your stylesheet.

For example, you can select one specific field by finding its ID using Chrome’s Inspect Element:

Inspect element in Chrome to find ID - SharpSpring form styling

#field_293844991 > label { color:#424242; }

This method is especially useful when used to select multiple fields for things like layout, structure, and floating.

Bonus: once you’ve created your new stylesheet and it’s been saved, you can reuse it any time you create a new SharpSpring form. Just select it from your list.

SharpSpring’s HTML Elements

You can also set your own styles to HTML elements in the editor.

For example, you can make a class called “required” and set it to be bold in your CSS. Then use SharpSpring’s form builder to add elements from the drop down menu. Using the fields, you can add your own HTML into the form and add your classes/IDs to certain elements. Add the “required” class where necessary and it will show up with those styles intact.

SharpSpring elements - SharpSpring form styling

Adding Media

Say you want to add a background image on your select field instead of the usual down-arrow. You can do this by adding media to SharpSpring’s media uploader and linking to that image.

Go under Content > Media Center, +New Media to upload your image. Click it once it’s uploaded to get the URL, then just include that URL in your CSS.

Bonus: the links to images are trackable.

SharpSpring Button Styling

Back to the Styles tab, you can create custom buttons for your form to match your site’s look and feel. SharpSpring has a detailed button creator so you can make and save buttons to use on other forms. Simply scroll under the form CSS and click Create New Button.

Sharpspring button styling - SharpSpring form styling

Select your colors, background, border-radius, gradient, border, sizes, etc and save to create a new button. Whenever you make a new form, you can reuse previously created buttons.

Don’t forget – you can also add extra button styling to your form’s custom stylesheet if needed.

Applying Your SharpSpring Styles

When you’re done all your styling, select your stylesheet, save, and refresh the page you’ve embedded the form on for it to instantly push the changes – you don’t have to worry losing any form data or re-embedding anything.

And that’s it!

#FormGoals

I hope this tutorial helps you feel more confident in making changes to your form’s CSS! SharpSpring offers many styling options, so start playing around and see what works best for your site.

As a reminder, we offer special SharpSpring Pricing Discounts up to 15% off list price. Check out our SharpSpring packages today.

Do You Want A SharpSpring Pricing Discount?

GET UP TO 15% OFF NOW

font preload