Support How-To: Brand Your Form Without CSS

Written by Amy Jorgenson on December 12, 2012

Posted in Form Design, Form Hacks

According to the American Marketing Association (AMA), a brand is a “name, term, sign, symbol or design, or a combination of them intended to identify the goods and services of one seller or group of sellers and to differentiate them from those of other sellers.” Obviously, not all of us were designed to be coders … whew! But that doesn’t mean you can’t creatively customize your form. We all want to have our own style and “brand,” and anyone can easily design and brand a Formstack form – without CSS or custom code. Let me share some ways you can accomplish this:

Themes
If you are on any of our paid plans, you have access to our default and custom Themes. A theme is the style template that encompasses your form. You can quickly and easily brand your form using a custom theme. You can create a custom theme directly in the form builder via the Edit Theme tab in the tools at the top of the form builder:


 

 

Or directly in the Theme Builder through the main Forms > Theme tab:


 

 

Below is a list of things you can alter directly in the Theme builder without custom code:

  • Background – Color, pattern and/or add a custom image.
  • Theme Header – Add custom images/logos to the top of the theme and align them to the left, right or center of the theme.
  • Sections – Background color, heading text color, heading font, heading font size, text color, font type, font size, and the spacing between sections.
  • Form – The form is a box within your theme. You can customize the form color, alignment on the webpage, spacing between rows, and add a border to the form.
  • Labels (field name) – Color (you can select different colors for required labels and non-required labels), font type, and font size
  • Fields – Text color, border color, background color, required field border and background color, interior padding, and supporting text color
  • Footer – Add custom images/logos to the bottom of the theme and align them to the left, right or center of the theme.

We do allow for the addition of advanced custom CSS – which will either append or override style settings already chosen.

*Quick tip…when choosing colors for your form, it is important to remember the impact that different colors have on individuals. Check out this previous post for a simple guide: Color-Conscious Marketing: How It Can Enhance Your Brand.

Once you have created your theme, you can apply it to your form under the Settings > General tab at the bottom. You can also use the same theme across multiple forms.

Directly on the Form
You can customize the style of your form without a custom theme. Images and logos can be added directly to the form itself via a Description Area field. You can click to add this field (or drag and drop the field) from the list of form fields on the left side of your form in Build mode. Once the field is open, click on the image icon within the field and it will prompt you to upload an image. Once your image is uploaded successfully, simply choose it from the “image list” and this will add the image to your Description field. You can alter the size and alignment directly in the field with the field edit tools displayed.


 

 

Branding doesn’t end with theme colors and font selections. It is also important to be intentional in how you word questions and content included on your form. You may also want to add company mission statements and slogans where appropriate via Description Area field on your form or in the Header or Footer on your custom Theme. Also, since all our field labels and values can be customized, you are free to throw in your own character. Instead of leaving the address field as “Address”, why not state it like this:


 

Custom Domains
Finally, you can even customize your form URL and domain. You can set a URL alias by going to the My Account > URLs tab and selecting your own optional prefix to create a more user-friendly URL. You can further edit this URL under the form Settings > General tab:


 

 

If you choose to embed your form on one of our Pages, you can create a completely customized domain (available with any paid plan). This can be done under the My Account > URLs > Custom Domain tab.


 

 

Along with a custom domain for your page, you can you could even go one step further and customize and brand the page as well. The styling features and tools are very similar to the way you edit and style a custom theme (shown below). Since we’re specifically highlighting ways to customize a form, I won’t get into creating and customizing pages here, but for more information check out our support doc on Pages.


 

 

Branding will set you apart from all the others. Take advantage of our easy tools to customize and brand your forms.

(Source used in drafting post) (Featured image source)