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 now allows you to change the text and background color of your forms. Visit the Form Details window in the Forms tab to set color preferences for a particular form.
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 code on your website.
How to Change Form Colors
- 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.
- 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.
- 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.
Posted by FormSmarts on
Sunday, July 6, 2008 at 8:05 pm in form builder.
Permalink
| Comment
Tags: embed, form builder, usability, web forms, widget
7 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
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.
Is it possible to change the white border color around the Continue Button? Or to change the “Continue” to read something else?
Thanks!
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.
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.
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.
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.
Leave a Reply
Got a Question?
Got a question about FormSmarts Pro?
Ask FormSmarts Sales!
About FormSmarts
FormSmarts is a web form service providing all you need to create forms and publish them in minutes. Embed a form widget on your site, or link to the form on FormSmarts.com. Get form responses by email, or store them on FormSmarts and download an Excel report. Create an account now!Categories
- form builder (28)
- form handler (9)
- form spam (5)
- HTML form (11)
- Smarts Points (1)
| Your Account | Help | FormSmarts | ||||
|---|---|---|---|---|---|---|
|
|
|
|||||
