{"id":682,"date":"2022-07-25T16:52:36","date_gmt":"2012-08-14T12:38:45","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=682"},"modified":"2023-11-24T10:11:28","modified_gmt":"2023-11-24T10:11:28","slug":"theme-settings","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/","title":{"rendered":"Theme settings on your forms"},"content":{"rendered":"\n

There are various theme options in our online form designer<\/a>. 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. <\/p>\n\n\n\n

Now let\u2019s get right into it and see how you can customize your theme in each category.<\/p>\n\n\n\n

\n\n\n\n

Quick setup<\/h2>\n\n\n\n

This section is used to make easy and quick changes to your form, being the most used theme settings options. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Quick<\/a><\/figure>\n<\/div>\n\n\n
\n\n\n\n

Layout<\/h2>\n\n\n\n

Layout section is divided into two: Form and Page. Let’s take them one by one.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Layout<\/a><\/figure>\n<\/div>\n\n\n

In the Page subsection, you can modify the top and bottom padding.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\n\n\n\n

Background<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Background<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

\n\n\n\n

Fields<\/h2>\n\n\n\n

Fields section is divided into multiple subsections: Label, Instructions, Input, Field, Field Hover, Field Focus, Error, Choices<\/p>\n\n\n\n

Label<\/strong> – 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.<\/p>\n\n\n

\n
\"Fields<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Instructions<\/strong> – 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. <\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Label<\/a><\/figure>\n<\/div>\n\n\n

Input <\/strong>– 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. <\/p>\n\n\n

\n
\"Input<\/a><\/figure>\n<\/div>\n\n\n

Field<\/strong> – In this section, you can increase or decrease the spacing between your form elements by changing the Vertical padding<\/strong> value. To have your form centered, increase the Horizontal padding<\/strong> value.<\/p>\n\n\n\n

Field Hover<\/strong> & Field Focus<\/strong> – You are able to add different colors while focusing and hovering over a field.<\/p>\n\n\n

\n
\"Field<\/a><\/figure>\n<\/div>\n\n\n

Error <\/strong>– 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. <\/p>\n\n\n

\n
\"Error<\/a><\/figure>\n<\/div>\n\n\n

Choices – <\/strong>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.<\/p>\n\n\n

\n
\"Label<\/a><\/figure>\n<\/div>\n\n\n
\n\n\n\n

Buttons<\/h2>\n\n\n\n

Buttons section is divided into multiple subsections: Button, Primary button, Secondary button.<\/p>\n\n\n\n

<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

The Button<\/b> settings will adjust the visual properties of all<\/b> the buttons enabled on your form (border parameters, font options, and padding).<\/p>\n\n\n\n

The Primary button<\/b> options are referring to the Submit button.<\/p>\n\n\n\n

The Secondary button<\/b>\u00a0section\u00a0will change the design of all the remaining buttons.<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Buttons<\/a><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"

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\u2019s […]<\/p>\n","protected":false},"author":13,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[34],"tags":[49,1007,1009,1004,1008,1003,1006,1005,1002],"class_list":["post-682","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-themes","tag-aa_themes","tag-background","tag-buttons-design","tag-design-section","tag-fields-design","tag-how-to-customize-form","tag-layout","tag-quick-setup","tag-theme-settings"],"yoast_head":"\nHelp: How do you use form themes? | 123FormBuilder<\/title>\n<meta name=\"description\" content=\"Read our Knowledge Base article on how to use the theme settings of your 123FormBuilder account to add the styles you want to your web form.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Theme settings on your forms\" \/>\n<meta property=\"og:description\" content=\"Read our Knowledge Base article on how to use the theme settings of your 123FormBuilder account to add the styles you want to your web form.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2012-08-14T12:38:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-24T10:11:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-257.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Help: How do you use form themes? | 123FormBuilder","description":"Read our Knowledge Base article on how to use the theme settings of your 123FormBuilder account to add the styles you want to your web form.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/","og_locale":"en_US","og_type":"article","og_title":"Theme settings on your forms","og_description":"Read our Knowledge Base article on how to use the theme settings of your 123FormBuilder account to add the styles you want to your web form.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2012-08-14T12:38:45+00:00","article_modified_time":"2023-11-24T10:11:28+00:00","og_image":[{"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-257.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/"},"author":{"name":"admin","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea"},"headline":"Theme settings on your forms","datePublished":"2012-08-14T12:38:45+00:00","dateModified":"2023-11-24T10:11:28+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/"},"wordCount":726,"commentCount":4,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-257.png","keywords":["aa_themes","background","buttons design","design section","fields design","how to customize form","layout","quick setup","theme settings"],"articleSection":["Themes"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/","name":"Help: How do you use form themes? | 123FormBuilder","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-257.png","datePublished":"2012-08-14T12:38:45+00:00","dateModified":"2023-11-24T10:11:28+00:00","author":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea"},"description":"Read our Knowledge Base article on how to use the theme settings of your 123FormBuilder account to add the styles you want to your web form.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-257.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-257.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/theme-settings\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"Theme settings on your forms"}]},{"@type":"WebSite","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/","name":"123FormBuilder Knowledge Base","description":"Search our documentation platform for answers, service specifications and 3rd-party integrations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/41383a571ede8f1257b128aa53a410cc1ea4c1901ac8cea3776cba5438d24843?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2Fadmin%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/41383a571ede8f1257b128aa53a410cc1ea4c1901ac8cea3776cba5438d24843?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2Fadmin%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/41383a571ede8f1257b128aa53a410cc1ea4c1901ac8cea3776cba5438d24843?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2Fadmin%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","caption":"admin"},"url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/comments?post=682"}],"version-history":[{"count":22,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/682\/revisions"}],"predecessor-version":[{"id":47908,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/682\/revisions\/47908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/media?parent=682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}