Form Color Settings

Like many FormSmarts users, you may sometimes want to customize the style of your web forms. This may be because you want the forms to match the rest of your website, or because you want a form to stand out on a web page.

The form builder allows you to easily change the text and background color of your forms. Visit the Form Details screen in the Forms tab to set color preferences for a particular form.

Web Form Color Selection

Things to note:

  • color settings only affect embedded forms, not forms access by their FormSmarts URL
  • because your color settings are stored in our servers, you can change settings and see the result immediately. You don’t need to update the form embed code on your website.

How to Change Form Colors

  1. By default, form text is black, and form background is transparent. This should fit the needs of most users, and if you’re happy with this, you don’t need to do anything.
  2. If you do want to change a color, the easiest way is to choose one of the popular colors we’ve preselected. Just click on the color you want.
  3. If you prefer to use your own colors, you may type any valid 6-digit HTML color code directly. For example, 808080 is a shade of gray.

Usability Note

It’s important to preserve the accessibility of your forms to visually impaired visitors, and their usability under poor reading conditions (e.g. bright sunshine). Always keep a high color contrast.

Advanced Form Customization

You may further customize many visual aspects of a form by providing your own CSS stylesheet. For usability reasons, we don’t recommend dramatically changing the form layout.

Posted on Jul 6, 2008 in form builder.
Permalink · Comment
Tags: , , , ,

9 Responses to “Form Color Settings”

Hi,
I’ve placed a background image behind the form, but it’s disappeared after I set a background color. How do I restore the default transparent background, once I’ve changed it to another color?
Thank you

Posted by: Phil Mienz | Jul 11th, 2008 5:10 am

Phil,
Form background is transparent whenever no background color is specified. So login to the form builder and edit form details. Clear the background color field, save and you’re done.

FormSmarts Posted by: FormSmarts | Aug 5th, 2008 7:06 am

Is it possible to change the white border color around the Continue Button? Or to change the “Continue” to read something else?

Thanks!

Posted by: Justin B | Aug 20th, 2008 5:31 pm

Justin,
We will in the future allow users to define their own CSS style, but until then you can’t change the border color.

The general term “continue” has been chosen because it implies that the form submission is not yet complete after pressing the button. I don’t see any clear advantages to let users replace this with a more specific term.

FormSmarts Posted by: FormSmarts | Aug 20th, 2008 5:49 pm

Would it be possible to be able to choose from a selection of browser-safe fonts for the form titles? The current font (Arial/Helvetica?) doesn’t always go well with my design aims.

Great service, by the way. I only joined a couple of days ago, and am hooked already.

Posted by: Jon | Apr 1st, 2009 8:17 am

Jon,
We’re open to suggestions, specially if the goal is to improve the usability of the web forms powered by FormSmarts.

Forms have been designed and tested so they are usable on just about any platforms. What do you mean by “design aims”?

In the medium term, we’ve also got plans to allow customized CSS. Stay tuned.

FormSmarts Posted by: FormSmarts | Apr 1st, 2009 9:25 am

I just meant the look of the font. On my main site I use Comic Sans (one of the browser-safe fonts) for a friendly cuddly sort of look, and the cool business-like Arial clashes with that slightly. I believe there are around 10 to 15 browser-safe fonts (depending on how you define “safe”) but as a start one serifed (eg Times), one sans-serif (eg Arial) and one cursive (my old friend Comic Sans) would be great. Maybe the customized CSS will cover that – I will indeed stay tuned. And thanks again.

Posted by: Jon | Apr 1st, 2009 3:13 pm

Is there a way to change the color of the “continue” button?

Posted by: John | Jan 23rd, 2016 11:08 am

If you’re going to embed the form onto your site you can provide your own CSS stylesheet and change the Contine button color with the following CSS code (changing colors as needed):
input[type=”submit”].button-primary, input[type=”submit”].button-primary:focus, input[type=”submit”].button-primary:hover{
background-color: red;
border-color: red;
color: white;
}

FormSmarts Posted by: FormSmarts | Jan 24th, 2016 7:15 am

Leave a Reply

About the Form Builder Blog

The Online Form Builder Blog is published by FormSmarts, a web form service providing all you need to create a form and publish it online in minutes. FormSmarts makes it easy to build a form and embed it on your site. You can then get form submissions by email or store them on FormSmarts and download an Excel report. Learn more about the many other benefits of FormSmarts.

Recent Posts

Categories