Customizing Themes (Old Theme Builder)
Experiment with shadows, transparency, colors, and patterns to create the best form theme for your business. Design flawless forms that look great on all devices, including mobile with complete control over all the elements of your form, and make your brand stand out in the crowd.
To customize the appearance of your form to your liking,
-
After building your form, navigate to the Themes tab.
-
Click Create from Scratch / Customize Form.
-
Under Form Customization, you can customize the appearance of your:
-
Form
-
Subform
-
Pages in a multi-page form
-
Thank You Page
Form tab
Under the
Form
tab, you can customize the following in your form.
Let's look at each one of these in detail.
Customizing Form Background
Adding a Wallpaper
You can customize the background of your form and choose to apply different backgrounds to different sections of your form. You can either set a pattern or use an image as the background to suit your requirement.
To set a pattern as the background,
-
Under the Form tab, select Wallpaper
under the
Background
section in the dropdown.
-
Select Pattern
under
Background Type
and choose your preferred pattern.
-
Select a color and adjust the opacity as required.
To set an image as the background,
-
Under the
Form
tab, select
Wallpaper
under the
Background
section in the dropdown.
-
Select
Image
under
Background Type
. You can either Upload an image from your desktop, or click
Search from Unsplash
to use a high resolution image from Unsplash.
- Select a color and adjust the Opacity as required.
Adding a Banner
Banners can help you advertise your product and familiarise your respondents with your brand or service. You can add a banner that suits your business at the space on the top of your form.
-
Upload an image from your desktop in the recommended image formats: JPG, JPEG, PNG, BMP or GIF.
- You can also set the alignment of the image post the upload.
Customizing Form Elements
Container customization
Your form container is the part of the form that contains all your fields and the buttons.
To customize your form container,
-
Under
Form Customization
>
Form
tab >
Container
in the dropdown, you will find options to alter various features of the form container like Background, Border, Edges, Alignment, Form width, Spacing and Shadow.
-
You can alter the color, opacity and pattern of the container background, alter the width, style, opacity, and color of the Border and the Edges of the container, and control the alignment at which the containers are present in the form under the Alignment option.
The width of the form, the spacing present in between the containers and Shadow effects can also be customized as required.
Header Customization
-
Under Form Customization > Form tab > Header in the dropdown, you will find options to customize various features like Background, Border, Edges, Alignment, Form width, Spacing, and Shadow of the Header.
-
Inserting Logo
:
Additionally, you can upload your business logo as a header to the form in recommended formats for better brand recognition.
Once inserted, you can adjust the alignment and size of the image.
Body Customization
Your form body is the part of the form which consists of the form fields excluding the buttons.
To customize the form body, Under
Form Customization
>
Form
tab >
Body
in the dropdown, you can alter the features of your form body as per your choice to fit your requirements.
-
You will find options to alter various features of the form container like Background, Border, Edges, Alignment, Form width, Spacing and Shadow.
-
You can alter the color, opacity, and pattern of the body background, alter the width, style, opacity, and color of the Border and the Edges of the form body.
Fields Customization
Field Container
It is the part of the form around each field in your form.
To customize the fields in your form, go to
Form Customization
>
Form
tab >
Fields
in the dropdown.
Under Field Container
, you can customize the Background, Border, Edges and Spacing of a field container. You can change the font of the content in the field container too.
All Fields
You can customize the field input box background, border, edges, font, input spacing, and shadow under the All Fields
option.
Section
If you have separate sections in your form, you can customize the section features such as, Background, Border, Edges, Font and Spacing of the sections.
Matrix Choice
If you have a Matrix Choice field in your form, you can choose the color, font, style, and font size of the questions and answers of the field.
Choices
Likewise if you have a Choice based field, you can alter the color, font, style and font size of the choices in the field.
Choice Style
You can choose the style of your template for Radio and Checkbox fields in a choice field under the Choice Style option.
Rating, Slider
If you have a Rating / Slider field in your form, you can edit the style and size of the Rating field, customize the border and choose the color for selected and unselected parts of the fields.
If you have a Rating / Slider field in your form, you can edit the style and size of the Rating field, customize the border and choose the color for selected and unselected parts of the fields.
Multiple Choice
If you have a Multiple Choice
question in your form, you can edit the color, font, style and font size of the choices in the field.
Dropdown List
If you have a Dropdown field in your form, you can choose the style of the dropdown. You can change the Dropdown style to include a search option for quickly finding the required option in the list using the Type 2 style.
Footer Customization
Footer is the part of the form where all your for buttons exist. Under Form Customization > Form tab > Footer, you can customize various features of the footer like Background, Border, Edges, Alignment, Form width, Spacing and Shadow.
Customizing Form Buttons
There are 3 types of buttons i.e., Submit, Save and Review. Under Form Customization > Button > Width, you can customize the width of your button label.
You can head into the Submit button section to alter the Background, Border, Edges, Font, Alignment, Spacing and Shadow of the Submit button label.
If you also have Save and Review buttons in your form, you can alter the above mentioned features under their respective dropdowns.
Subform tab
If you have a subform in your form, you can totally customize it to your liking as well!!!
Subform Container
Head to the Subform tab, choose Subform > Container from the dropdown to customize the subform.
Subform Fields
- To customize the fields in your Subform, go to Subform tab > Fields in the dropdown. Under Field Container, you can customize the Background, Border, Edges,Spacing, and font of your field container.
- If you have a choice-based field field in your subform, you can alter the color, font, style and font size of the content in the field.
- You can choose the style of your template in a choice field under the Choice style option.
- If you have a Rating field in your Subform, you can edit the style and size of the Rating field and choose color for both selected and unselected parts of the field.
- If you have a Multiple Choice question in your form, you can edit the color, font, style and font size of the choices in the field.
Pop-up Subform
If you have opted to have a Pop-up Subform, then you can edit the features of your pop-up like Background, Borders, Edges and also the font of the content under Pop-up > Card section.
Page tab
Having a multi-page form?
Long multi-page forms can get boring for your customer to fill out. Customize the look of the pages in your form and make your long multi-page form interesting!
Under Form Customization > Page tab, you can not only customize the pages but also the finer details like the navigation buttons on a page!
Page Customization
- Customizing the features of the page header like Background, Border, Edges, Alignment and spacing can be done under the Page > Header option in the dropdown.
- If you want to change the font, color, style and size of the content in the Title, you can do so under Page >Title.
- The number and color of the footer for the visited and unvisited pages of the form can be customized under Page > Number section.
Page Navigation Buttons Customization
- You can customize the features of the Navigation buttons (Next, Back) like Background, Border, Edges, Font, Alignment, Spacing and Shadow under the Navigation > Button section.
- The change in color of the navigation bar indicating the status of page visit and the spacing of the bar in the page can be customized under the option Navigation > Bar in the dropdown.
Thank You Page tab
Thank You page is where you can redirect your respondents to acknowledge them after they submit your form. You can configure your Thank You page under Acknowledgements & Redirects or configure Form Rules to redirect respondents to different Thank You pages based on their form responses.
You can customize the look of the Thank You page to suit your needs. To do this,
After building your form, navigate to the Themes tab.
Click Customize Form.
Under Form Customization > Thank You page tab, change the Default style of the Thank You page to Custom.
If you wish to match the theme of the Thank you page with your form customization, select the Use form design option. The form Container and Wallpaper customization will be applied to the Thank You page upon choosing this option.
You can customize the Wallpaper, Container, Buttons & Icon on your Thank You page.
Wallpaper: You can set a pattern or an image as the background. Select a color and adjust the opacity as required.
Container: You will find options to alter various features of the container like Background, Border, Edges, Alignment, Spacing, color,opacity and pattern of the container background, alter the width, style, opacity, and color of the Border and the Edges of the container.Buttons & Icon: You can customize the Background, Border, Edges, Font, Spacing, Shadow of buttons and the border of icon on your Thank You page.
Quick help on customizing your form
Changing Font Settings
You can choose to change the font style, size and color of text elements in different sections of your form.
To modify the font settings,
-
Select the form element you wish to change the font settings for under the
Form
,
Subform
or
Page
tab.
-
Click Font.
-
Customize the text element by selecting the color, font family, style/weight, and the size of the font.
Adding Shadow
You can add shadow effect to your form for extra visual appeal.
To add shadow,
-
Select a form element for which you wish to add the shadow effect under the
Form,
Subform
or, Page
tab.
-
Click Shadow, and specify the shadow range and color.
Inserting Border
You can add a border to your form or specific sections of the form, Submit button, form footer, form header, section breaks, and more.
To add a border,
-
Select a form element you wish to add border for under the
Form,
Subform, or Page
tab.
-
Click
Border
and change the width, style, color of the border and adjust the opacity.
Changing Alignment
You can change the alignment of your form, form header, Submit button, and more.
To change the alignment,
-
Select a form element you wish to change the alignment for under the
Form
,
Subform
, or
Page
tab.
-
Click
Alignment
and set the required alignment.
Modify Form Width
You can adjust the width of your form as per your requirement.
To modify the form width, under the
Form
tab, select
Container
under the
Form
section and choose Form Width.
-
To set a fixed form width, select Standard
and specify the width of the form in pixels. The permitted range is from 320 px to 1200 px.
- To let the form width automatically adjust to the screen size, select Fit to screen.
Check out about customizing the Thank You Page.
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Customizing Themes (New Theme Builder)
The Themes Builder allows you to create visually appealing forms that reflect your business and resonate with your audience to create a more engaging experience. Design layouts that seamlessly integrate with your brand identity, select fonts that ...Theme Gallery
Table of contents Applying a Theme From Theme Gallery Creating New Theme Publishing Themes to your Org Users Using the Org Themes Applying a theme from the theme gallery The Theme Gallery consists of certain pre-designed themes that you can instantly ...Overview
Beautiful forms can make a great difference in the number of entries you receive. The Theme Editor in Zoho Forms allows you to polish your forms with minimal effort. You can customize your form and play around with custom backgrounds, fonts, effects, ...Tips for creating visually appealing forms
Table of Contents Overview What details matter the most in a form? Form Title and Description Fields Choice fields Image Choices to market your products Talk to your respondent with dynamic fields Submit button Structuring a long form Section and ...Custom Domain
Table of contents Pre-requisites CNAME Record Mapping for Your Domain Adding a Custom Domain Using Custom Domain Custom Domains are used to promote your organization's brand in the form URLs to all your form respondents. If you do not want any ...
New to Zoho LandingPage?
Zoho LandingPage Resources