Visuals are a key component of our lives, businesses and everything in-between. Since 90% of the information our brain receives and processes is visual and 40% of users react better to web content presented through images rather than plain text (see more stats here), it’s only natural to make good use of graphics in your business branding. Your web forms make no exception. In this article, we will show you how to use 123ContactForm in styling forms to match your brand, with a bit of art and without any coding.
Web form themes made easy
First of all, there are things you can add to your form’s design using the form editor (docs link) itself. The form width is regularly 650 pixels, but you can change it here if you wish. Also, you can specify if you’d like field labels to be placed on the top, right or left of the field. To make the form more appealing, it’s a good idea to insert images within the form, such as your logo or other representative snapshots for your business.
Most of the form branding job however lies within our Themes section. By “form themes” we mean a combination of style templates that define your form’s appearance. All 123ContactForm users, starting from free Basic accounts, can access and use the default Themes collection to create appealing designs for their web forms in just a few clicks. The pre-existing themes are just a starting point – they can be customized from A to Z to completely match your business image. You can reach the Themes area at the second step of the form maker, just past the editor.
If you’d like to skip the editor and jump right to the Themes section, there is also a tab in your 123ContactForm account’s dashboard that leads directly to it.
Once you have reached form Themes, the first thing you will find is a slider with matching color schemes that you can choose from. Just make your pick from among them – the default one is the burgundy and black 123ContactForm theme. You can then go further and customize your preferred theme in order to define how your form will look in more details.
Here are the form particularities you can customize right from the Themes menu:
- Page background: transparent, colored or display an image of your own
- Form layout: the form box can have a straight or rounded corners frame, you can specify which background color you wish to use and also include shadows.
- Text: your form’s field labels, instructions and headings can be customized with certain font families, sizes and colors.
- Field highlight color: this appears when the user clicks on a particular field and can match the overall color scheme of the form.
- Buttons: you can choose a color or upload your own button graphics for Submit, Calculate, Reset, Next, Preview, Previous, Update.
- Logo: use your business’ specific image in the form header and set its width to fit within the form layout.
- Field error highlights: when the user tries to submit the form with incomplete or improper information, the particular error fields appear marked with a certain text color and background color you can set (typically shades of red).
When you create a new form, all of these options are already set in a standard, default status and it’s your option whether you wish to put your own signature to them.
For more thorough customization of your form, you can also go a step further than the given controls. 123ContactForm allows for custom CSS to be added to the form. If you’re into coding and you’d like to tweak each element separately, just use the Code section and insert the classes of the form elements you would like to work with. You can also link to an external CSS file where the form can extract its style from.
From form design to branding
Best converting forms are those which give a slick, positive look to visitors. Above all, web forms should be recognizable parts of your brand image. It’s easy to brand your form if you watch for a couple of essentials:
- Put your logo somewhere visible such as in the form header
- Keep close to your business’ color scheme in the form background and text
- Use the text fonts you also use on your website.
To see how the form design can be aligned to the brand, let’s take a look to a form created for our users at Neobyte Solutions. As a web design and development agency, they naturally value slick accents and suggestive color combos, as you can see on their website:
They use the navy background on the frontend, with touches of deep blue and grey. The font used for most parts is Trebuchet MS. Call-to-action buttons are deep blue or orange.
To create a form theme for the website of Neobyte Solutions, we chose a transparent background, as we wish for only the form box to be visible. We’d like to use straight corners for the form. The title box is set in the dominant shade of navy that Neobyte features.
The font we need to use for labels and instructions is Trebuchet MS. We also selected text and label colors to match the color scheme of the website. 
For the main form button, we just used a URL containing their regular graphics.
As for the logo, we chose not to insert one as the form is meant to be displayed on the Neobyte website, right below the title that also contains their logo. There is also a bit of CSS inserted in the form code, just to smoothen things.
Here is how the form looks like when published on the destination page:
Domain mapping and more
123ContactForm also allows you to customize your form URL to display your own domain name instead of 123contactform.com. This feature, domain aliasing or domain mapping, is available starting from Platinum accounts.
When you are committed to offer a fully branded form experience to your users, you can go even further. With our white label form builder, your entire 123ContactForm backend can be customized to look as your own internal tool, with your business colors and logo instead of the 123ContactForm brand signs.
Working with designs is always pleasant and challenging as well. If you need any guidance in getting started or finding your way across 123ContactForm Themes, our Support team is always happy to help. Just drop them a line on live chat or at support@123contactform.com and they will answer your questions right away. Happy form building!
The post The Hows and Whys of 123ContactForm Themes: Brand Your Form to the Fullest appeared first on 123ContactForm Blog.