Custom CSS 

In this Article
Related Articles


You can use the Theme Editor to customize the elements of your forms, but sometimes you may need to customize further than the Theme Editor will allow.

The Form Builder contains a Custom Code field where you may add HTML, CSS, or JavaScript code before your form. You must click Apply for your changes to take effect.

Here's how it works:
  1. First, either find the code sample you need in the list below, or have your own code snippet ready.
  2. In the Form Builder, click Properties, then Custom Code.
  3. Paste the code in the Custom Code field and click Apply.
  4. Save and test with the address found in the Publish tab of your form's options.

What is CSS?

CSS, short for "Cascading Style Sheets," is a markup language that you can use to style HTML elements. With CSS, you can customize the look and feel of a website — from colors and fonts to alignment and sizes. You can even create responsive styling so that a website displays differently depending on the browser size or device.

And thanks to CSS, you can style your FormAssembly forms however you like!

Learn more about common CSS styles. There's also a wealth of free resources out there if you want to dive into CSS, such as Codecademy.

What's the difference between CSS and the Theme Editor?

The Theme Editor gives you a ton of styling options for your form, fields, and buttons. But CSS is much more extensible and specific. You can get really granular in your level of styling. For example, you can target an individual field, rather than setting a global style across all fields.

Are there any limitations?

Yes, there are certain things you can't accomplish with CSS. For instance, you can't change the order of HTML elements with CSS. Instead, you can use JavaScript for even more customization and cool special effects.

You may also experience cross-browser compatibility issues with CSS3, the newest version of CSS. Older browsers won't support newer CSS features.

Test across browsers and devices to make sure your CSS works properly. Several services like SauceLabs help you test on all kinds of different browsers and platforms.


If you don't know how to write CSS or JavaScript code, no worries;€” we'll get you started.

First, whenever you add CSS, it needs to be enclosed within the following code:
<style type="text/css">



Sometimes it's helpful to add comments. Outside of script and style tags, you should use the HTML comment system:
<!-- Comments -->

Inside script and style tags, you should use C-style comments, like so:
<style type="text/css">

/* Comments */


Now, to start styling, you'll need a CSS selector and what properties of the selector you want to style. For example, let's say you want to style the background color of the whole form:
<style type="text/css">

.wForm { background-color: #fff0ad; }

  • wForm: The CSS selector for the whole form
  • background-color: The property you want to define (this one's self-explanatory, since you want to define the background color)
  • #fff0ad;: The color in hexcode — in this case, a pale yellow

The . in .wForm marks a class, while a # marks an id. Classes are selectors that can apply to multiple elements, while ids are for one specific element.

For instance, h3 will apply to all instances of h3. But h3#tfa_0-T applies only to the form title, which has an id of tfa_0-T.

You can also combine multiple selectors if you're going to style them in the same way:

	.wForm, h3.formTitle { margin-bottom: 20px; }

CSS Samples

Need examples to kickstart your CSS? The code samples below cover the most common customization requests.


Change the Font

<style type="text/css">

 .wFormTitle, .wForm {
 	font-family: 'Lucida Sans Unicode', Lucida Grande, sans-serif;

See also: List of fonts suitable for the web.

For more ideas, visit our blog tutorial: Fun with Custom Fonts.


Style an Individual Element

You can style a specific element with CSS. Look up the FormAssembly ID (also known as field name or alias) for the element, then replace #element_id with the FormAssembly ID, e.g., #tfa_55.

You can also find more IDs in the HTML code of your form.

The below code will change the element's text (not the field label) color to blue and increase the font to 110% of its original size.
<style type="text/css">

#element_id {
color: blue;
font-size: 110%;


Hide the Form Title

<style type="text/css">

.wFormContainer .wFormTitle {
display: none;


Hide a Form Filed

<style type="text/css">

#tfa_XX {
display: none;

Note: You will need to replace the XX above with the field alias for the field you would like to hide.

Move the "Number of Characters Remaining" Text

<style type="text/css">

.wForm .lengthIndicator {
position: relative !important;
left: 0px !important;


Remove the Background from Your Form's Theme

<style type="text/css">
 .wForm form, .wForm fieldset {
    background-image: none !important;
    background-color: transparent !important;

Remove the Default Background on Hosted Forms

<style type="text/css">
.default { background: transparent; }
.default .wFormContainer { width:auto; }

Center Previous and Next Buttons

<style type="text/css">
.wForm .wfPagingButtons, .wForm .actions {
    width: 100% !important;
    text-align: center;
<style type="text/css">
.wFormContainer .supportInfo {
font-size: 20px;
Note: Before removing this link, please make sure that your form contains sufficient information to contact you if your visitors need help.
<style type="text/css">
.wFormContainer .supportInfo {
    display: none;

Hide the Please Select Text in a Dropdown Menu

If you would like to hide the "Please Select" text in a dropdown menu, this is possible, but you will first need to select a default value for the dropdown in the form builder. If no default value is selected it will not be possible to hide the "Please Select" text. Once you have selected a default value, you can use the following CSS code:

<style type="text/css">
.wForm select option:not([id]) {
    display: none;

Form Elements

Below, you'll find a list of elements you can change with CSS, along with example screenshots of what they'd look like with { background-color: #fff0ad; } applied.


Code Snippet

Form Body .wForm

Form Title h3.wFormTitle

Form Title (More specific, e.g., to add a border) h3#tfa_0-T

Text/HTML Element .htmlContent

Question Labels (Includes Likert Matrixes) .wForm label, .wForm .label

Question Labels (Does NOT include Likert Matrixes) .wForm .preField

Fieldset Question Labels (Does NOT include Likert Matrixes) .wForm fieldset .preField

Question, Group, and Fieldset Labels (Does NOT include Likert Matrixes) .wForm .labelsAbove .preField

Fieldsets (Does NOT include Groups) .wForm fieldset

Text Input Box .wForm .oneField input

Likert Matrix Questions .wForm .matrixLayout

Likert Matrix Questions: Header Row .wForm .matrixLayout tr.headerRow th

Likert Matrix Questions: First row and every other row .wForm .alternate-0

Likert Matrix Questions: Second row and every other row .wForm .alternate-1

Likert Matrix Questions: Header Column .wForm .matrixLayout th.headerCol

Likert Matrix Questions: Header Column Labels .wForm .matrixLayout .label

Submit/Next/Previous Button .wForm .secondaryAction, .wForm .primaryAction, .wForm .wfPageNextButton, .wForm .wfPagePreviousButton

Submit/Next/Previous Button (On Hover) .wForm .primaryAction:hover, .wForm .secondaryAction:hover, .wForm .wfPagePreviousButton:hover, .wForm .wfPageNextButton:hover

Inactive Hint .field-hint-inactive .hint

Active Hint .field-hint .hint

"Need Assistance with this form?" Link .wFormContainer .supportInfo

Terms of Service · Privacy Policy