Theme settings on your forms

There are various theme options in our online form designer. Basically, you can change just about anything on your web form, from text font and color to the style of the submit button. The settings categories that you can tweak in the theme customization panel are Quick setup, Layout, Background, Fields and Buttons.

Now let’s get right into it and see how you can customize your theme in each category.


Quick setup

This section is used to make easy and quick changes to your form, being the most used theme settings options.

Here you can specify the font of your form & the text color that applies to your entire form (question text, answering options, instructions). The button color is used to change the color of the Submit button on the form, while Button text color sets its color. Background color is used to change the color of the form. The shadow switcher allows you to have a shadow to your form.

Quick setup theme settings

Layout

Layout section is divided into two: Form and Page. Let’s take them one by one.

In the Form subsection, you can modify how the form width is calculated (pixels or percentage) and set the form width accordingly. Also, if you are interested in changing the direction of writing on your form, you have the option to do so by changing the form direction from left to right to right to left. There are some additional settings related to the form, such as changing the padding for header, footer, left and right.

Layout theme settings

In the Page subsection, you can modify the top and bottom padding.


Background

Background section is divided into two subsections: Form and Page. From this section, you have the option of customizing both the background of your form and of the entire page, such as uploading a photo for background, changing the position of the background image and even adding a border to your form with multiple customizations.

Background theme settings


Fields

Fields section is divided into multiple subsections: Label, Instructions, Input, Field, Field Hover, Field Focus, Error, Choices

Label – from here you can change the question’s text placement (top, right, left), the alignment & the font. Additional design settings for labels are related to the font style and size, the color and the margin between question text and answer/choices. Also, if you are interested in changing the color of the asterisk when dealing with required fields, you can do that by using the color picker from Required star color.

Fields Label theme settings

Instructions – all the design settings available for label/question text are also available for Instructions separately. You can design instructions and label totally different so that your respondents could easily read through the form and understand that they need to follow your instructions when filling up the form.

Label instructions theme settings

Input – these design settings are related to the input your respondents are providing when filling in your form. You can change the background color of the answering text boxed, the border and its style and also the font of your respondents’ input.

Input theme settings

Field – In this section, you can increase or decrease the spacing between your form elements by changing the Vertical padding value. To have your form centered, increase the Horizontal padding value.

Field Hover & Field Focus – You are able to add different colors while focusing and hovering over a field.

Field theme settings

Error – If a field needs to meet certain criteria, an error message will be displayed. You change the design of the error text to match your whole form’s theme, by setting the font, font style, color and more.

Error theme settings

Choices – you can create your own custom radio buttons for Single choice fields and check-boxes for Multiple choice fields. Adjust their layout to be a perfect fit for your theme.

Label choices theme settings

Buttons

Buttons section is divided into multiple subsections: Button, Primary button, Secondary button.

There are several buttons that can appear on your form: Submit, Calculate, Reset, Next, Preview, Previous, and Update. For any of them, you can set colors and change their format.

The Button settings will adjust the visual properties of all the buttons enabled on your form (border parameters, font options, and padding).

The Primary button options are referring to the Submit button.

The Secondary button section will change the design of all the remaining buttons.

Buttons theme settings

4 comments

  1. How do you incorporate a semi-transparent background? For example, I’d like to incorporate a transparent blue to my form’s background.

    1. Hi Cyle! You can add the transparent background from the forms Design -> Form -> Background option. There you will find a color picker where you can select the desired shade of blue and below that, you can also set the transparency of that shade. If you already have the HTML code of your preferred color, you can add it in the text area of the color picker and the form will change accordingly. I hope this helps and if you need any assistance, we’re just an email or chat away so please don’t hesitate to reach out!

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form for more information. in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?