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 Form, Page, Label, Instructions, Input, Field, Field hover, Field focus, Error, Button, Primary button, Secondary button, Choices, and Table.
Now let’s get right into it and see how you can customize your theme in each category.
Here you can specify the form width, padding (on all four sides), direction, and all main parameters for the form background image. You can also customize the form border, turn the shadow on or off, and change the color of the HTML text and T.O.S. links.
The form background image can be linked, uploaded from your computer, or transparent. Use the color picker to select the color of your liking or type the RGBA or Hex color codes.
Decorations color. This option will edit the Terms of Service field hyperlink color.
Change the appearance of the webpage behind the form. If you embed the form on your webpage, the page background will not show.
Let’s say you need to add a pattern image as the page background. Small background images will appear behind the form. Therefore, tweak the background size and repeat options.
Here you can change the label text’s placement and alignment, select the font, mention the font size and color. You have over 800 font families to choose from. The required star color can also be modified.
You can change the design of the instructions. If you have many instructions for a field, at Placement select Below Field for a much cleaner display.
The design of the input can be adjusted the same as the label. Additionally, you can make the input boxes rounder by increasing the border radius.
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.
You are able to add different colors while focusing and hovering over a field.
If a field needs to meet certain criteria, an error message will be displayed. Change the design of the error text to match your whole form’s theme.
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.
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.
If you’re using a payment form, add color to the table header of your Payment Summary.
There are many themes options to test out and it’s worth putting a lot of attention to making your form’s design as good as possible.
Don’t forget to press the Save current theme button and name your theme. This way you can apply the same theme on multiple forms.
Related articles
Your email address will not be published.
Here is a list of the most frequently asked questions. For more FAQs, please browse through the FAQs page.
HOW DO I ADD A COVER IMAGE WHEN SENDING THE FORM OR POSTING THE LINK.
Hi Francis! If you are referring to a logo, please check this article for instructions. If you need any assistance to set up your form, please contact us on live chat or at customercare@123formbuilder.com and we will be more than happy to help. Have a great day!
How do you incorporate a semi-transparent background? For example, I’d like to incorporate a transparent blue to my form’s background.
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!