Resources

Fancy Form Themes

Make your form extra pretty with our Themes creator.

Since the creation of this guide, we have made some big changes to our Theme Editor. Click here for more information.
brush

Themes bring a brand presence to your forms. Without a bit of styling, your form looks just like every other form out there. Put some pep into the step of your form, and learn how to create a Formstack theme.

What are Form Themes

A theme is a saved set of custom style attributes that you can apply to one or more of your forms. You can do a wide range of things with themes such as changing font types, form colors, adding header graphics and more. Themes can be as powerful as you want them to be. You can control every styling aspect of your online form if you follow this guide and take advantage of custom styling.

Creating a Theme

Method #1

There are two ways you can create a new Formstack theme. The first method is to create a theme while in build mode. At the top of the builder, you will click the drop down titled Edit Theme. Then click to create a new theme. You will then see your styling options slide down. From this menu, you can style form elements in Background, Sections, Labels & Fields.

Method #2

You can also create a theme within your Formstack account by going to the Forms tab and then clicking on the Themes tab on the righthand side. Jumping in there will allow you to create a new theme. You will arrive on the General tab where you will name your theme. You can also set this theme as the default if you wish. Setting your theme as the default theme will automatically place this theme styling on every new form you build. Move to the next step by selecting the Style tab. You will see buttons above your theme preview image that list different parts of the form. If you click on one of these buttons, it will open an edit box that lets you apply styling to specific elements. The last tab, HTML & CSS, is where you can place custom CSS for the form elements, as well as Header & Footer HTML. We recommend only changing these settings if a user has a strong knowledge of HTML & CSS.

Formstack theme editor

Apply your Form Theme

If you used the first method, then your theme will automatically be applied to the form you were working on. You can make changes to the theme from directly in build mode, but keep in mind, each change you make is actually editing your form theme. So if are using this theme on any additional forms, those forms will be affected as well.

If you used the second method, you will need to actually apply the theme to a form. To do this, you will go into the Settings tab of your form. At the bottom, you will see a Themes box. This box contains your user-created themes and some default themes that all accounts can use. Select the theme you’ve created, and your changes will save automatically.

The Easy Method

Before you begin making changes to your theme, it is easiest practice to first create your theme, give it a name, and then return to your form to assign the theme. After saving, open up a Preview of the form in your browser, and leave this preview up until you are finished. Now you can go back to your theme editor in the other window to make changes. Doing it this way lets you simply refresh the form preview after you have saved theme changes.

  1. Create a theme & give it a name only
  2. Apply the new theme to your form
  3. Keep a preview of this form open in your browser
  4. Return to your style theme & work your magic
  5. Simply refresh the form preview after any changes
form preview and edit

What is CSS?

CSS is an acronym for ‘cascading style sheets.’ It’s a programming language used for describing the appearance and formatting of a document written in a markup language (or HTML). With CSS, you can isolate specific elements of your form and apply styling features that will override default styling. So the sky is truly the limit with themes.

css rule

Appending HTML & CSS

You have 3 places in which you can append custom styling. There is a box for Additional CSS that will append or override style settings on the form. This is where you want to place your custom styling for the form elements. If you don’t know anything about CSS or how to look at the styling, have faith. In the next few pages we give you a helpful cheat sheet for applying styling to some of the most common form elements. The second & third boxes are for Header HTML & Footer HTML. What you place in these boxes will override any style settings or additional CSS as well as header and footer content.

adding css

CSS Fishing

Your most useful tool for altering your form CSS already exists in your browser. It is the ‘Inspect Element’ tool. When you right click on a page element, you will see an option to 'inspect element.'

inspect element

Doing this will bring up the HTML code of a web page and allow you to highlight specific page elements as well as view the CSS associated with those specific elements. This becomes helpful because you can temporarily modify, add and remove elements & styling on the page in order to see how the page renders with the changes. This comes in handy when you want to make changes to an element, but also want to see what it will look like beforehand.

developer tools

After making the temporary changes, you can simply copy and paste the new CSS rules from the Inspect Element into your theme. You can alter multiple CSS rules and view changes for the entire form if you wish. If you need to reset the page back to normal, just refresh the page in your browser. Just so we are clear, none of these changes are acutually being made to the page you are inspecting. Your browser is just letting you view what the styling would look like with different CSS.

CSS Cheat Sheet

We’ve compiled a list of CSS classes and ids for the forms along with CSS short cuts for you to use in your theme. Before we dive into that, let’s revisit the quick explanation of a CSS rule.

css rule
CSS Classes & IDs

#fsHeaderImage - the image at the top of the form theme
.fsForm - the class of the <form>. Each form also has an unique ID.
.fsPage - the container which holds the form elements.
.fsSection - a class to denote an entire section
.fsSectionHeader - the heading element of each section on a form
.fsSectionHeading - the <h2> element that holds the heading for a section
.fsSectionText - the descriptive text in a section header
.fsRow - a row in the form page
.fsFieldRow - a row that contains form fields
.fsRowBody - the <div> that actually holds that row's form content.
.fsLabel - the label for a form field
.fsRequiredLabel - the label for a required form field
.fsSupporting - the text used to help describe the field - located under the field
.fsCallout - supporting text used as a callout box
.fsFieldFocused - a class applied to the containing <div> when a form field is focused on
.fsReadOnly - a field that is read-only
#fsFooterImage - the image at the bottom of the form

Input Types

input[type=text] - inputs that accept any text
input[type=tel] - inputs that accept phone numbers
input[type=email] - inputs that accept email address
input[type=number] - inputs that accept only numbers

Submit Button

.fsSubmit - the class of the button container
.fsPreviousButton - the class of the back button
.fsNextButton - the class of the forward button
.fsSubmitButton - the class of the submit button

How-to...

...change the required asterisk color - .fsRequiredMarker {color: #aabbcc;}
...change the label color - .fsLabel { color: #aabbcc; }
...change the text color on the text fields - .fsRowBody input[type=text] { color: #aabbcc; }
...change the text color on the text areas - .fsRowBody textarea { color: #aabbcc; }
...change the text color of the supporting text - .fsSupporting { color: #aabbcc; }
...change the background color of the form - .fsRowBody { background-color: #aabbcc; }
...change the spacing between form rows - .fsFieldRow td { padding-bottom:18px; }
...remove the section header highlight - .fsSectionRow td.fsRowBody { background-image:none; }
...reduce the space between sections - .fsForm .fsTable { margin: 0 auto; padding: 0 }
...remove section borders (remove form border) - .fsRowTop, .fsRowBottom, .fsRowOpen, .fsRowClose { display: none; }
...set the form’s width - body#FSLocal .fsForm { width:800px;}
...remove top margin - body#FSLocal {margin-top:0;}
...remove focus from fields - .fsFieldFocused{background-image:none;}
.fsFieldFocused div.fsSupporting,.fsFieldFocused label.fsRequiredLabel span {color:none;}
...remove margin from top of submit button - .fsPagination {margin-top:0;}
...remove nearly all margins / padding
.fsForm .fsTable { margin: 0 auto; padding: 0; }
.fsForm .fsCell {padding:2px;}
.fsSectionRow + .fsFieldRow .fsCell {padding-top:0;}
.fsFieldRow td { padding-bottom:0px; }
.fsRowTop, .fsRowBottom, .fsRowOpen, .fsRowClose { display: none; }
.fsSectionRow td.fsRowBody { padding:0; }
...reduce space at top and bottom of the form
.fsForm .fsSectionHeading { line-height: 5px; }
.fsForm .fsTable { margin: 0 auto; padding: 0 }
.fsRowTop, .fsRowBottom, .fsRowOpen, .fsRowClose { display: none; }
.fsSpacerRow{display:none;}
.fsPagination {margin-top:0;}
...reduce extra borders/lines that your site’s CSS is causing
.fsTable, .fsTable tr, .fsTable tr th, .fsTable tr td { border: none !important }
...change the font size of options in a select list
.fsForm select { font-size:11px; }
...remove the calendar from a date/time field
.fsCalendarPickerLink{display:none;}
...remove the submit button from a form
.fsSubmit input.fsSubmitButton {display:none;}
...remove the previous button from a multi-page form
.fsPreviousButton{display:none;}
...use your own image for the submit button on a form
.fsSubmit input {
background:url(“http://foobar.gif”) no-repeat scroll 0 0 transparent;
border:medium none;
height:83px;
margin:0;
padding:0;
width:279px;
}
...change font size of the the text the user inputs when they fill out a field - .fsFieldRow input[type=”text”], .fsForm textarea { font-size:10px; }
...change font type of the the text the user inputs when they fill out a field - .fsFieldRow input[type=”text”], .fsForm textarea { font-family:”Times New Roman, serif”; }
...removing the bolding from the text the user inputs when they fill out a field - .fsFieldRow input[type=”text”], .fsForm textarea { font-weight:normal; }
...make the form background transparent - .fsForm .fsFieldRow td.fsRowBody, .fsForm .fsSpacerRow td.fsRowBody { background-color: transparent;
}

Tools to Help a Design Brother Out

You didn’t think we would leave you high and dry with all this information and no way to act on it did you? We’ve compiled some sweet tools that should help you out in your form styling adventure. The first is a free CSS Gradient Generator from ColorZilla.com. If you have ever used Photoshop, you will love this gradient generator. It boasts a powerful, Photoshop-like interface, and allows you to create custom CSS gradients for your background elements. After you craft you perfect gradient, copy and paste the given code into your CSS in place of any background color or image. ColorZilla provides some great features like cross browser output, directional gradients, opacity control, and even lets you save custom gradient presets.

Pixelmator

The second is a graphic editing program called Pixelmator. If you are building themes yourself, you will probably be needing a graphics program to create some cool headers or background images. Pixelmator boasts some quality features and functionality if you are looking for an alternative to Adobe Photoshop. Pixelmator is available in the Mac App Store. It is currently $14.99 for a download, and much easier on the wallet than Photoshop. Currently, it is only available for Mac OS X. Pixelmator is available free for 30 days, so you can give it a spin and see what you think before buying.

The third tool is another graphic editing program called GIMP. It has an interface that is very similar to Photoshop. GIMP is available for FREE as a download from the Gimpshop.com website. It’s a powerful alternative to both Photoshop & Pixelmator if you are looking for the free price tag. It’s currently available for both Windows and Mac OS X.

Download Guide (PDF)

Share this guide

Table of Contents

Related Resources

Ready to create beautiful, professional forms for your business?
Sign up for a FREE 14-day trial to test our handy Theme Editor.
Try It Free