{"id":43681,"date":"2022-12-30T15:23:23","date_gmt":"2022-12-30T15:23:23","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=43681"},"modified":"2024-06-26T08:25:37","modified_gmt":"2024-06-26T08:25:37","slug":"js-tips-additional-formatting-options-for-field-inputs","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/","title":{"rendered":"JS tips &#8211; Additional formatting options for field inputs"},"content":{"rendered":"\n<p>Our form builder offers you the possibility to apply diverse formats and validation options to your fields. For example, the <b>Phone<\/b> field will automatically format the number you introduce and you can have quite a <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-use-the-phone-field-in-the-standard-format-for-my-country\/\">few variants too<\/a>. Have a look over our <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/choosing-the-right-field-type\/\">comprehensive guide<\/a> on how to choose from the large selection of field formats we offer.<\/p>\n\n\n\n<p>Nothing quite suits what you need? Read on for more advanced options.<\/p>\n\n\n\n<div style=\"height:53px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>First, let&#8217;s make sure we have the basics covered. Read here <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-custom-js-script-to-my-form\/\">how to add a script to your 123FormBuilder form.<\/a> Now, we can move on to the part that is more fun. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-change-text-input-to-lowercase-uppercase\">Change text input to lowercase\/uppercase<\/h2>\n\n\n\n<p>The script examples provided below will help you to automatically format your clients&#8217; answers to be in all caps or all lowercase. After they are done writing in a field, the text will change accordingly.<\/p>\n\n\n\n<p>Add this script to your form in order to change an input to all lowercase:<\/p>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>function changeTextFormat() {\nvar valueOne = loader.engine.document.getElementById(00000000).getProperty('value.value');\nloader.engine.document.getElementById(00000000).setValue(({\"value\": valueOne.toLowerCase()})); \n}\nwindow.onchange = changeTextFormat;<\/code><\/pre>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Add this script to your form in order to change an input to all uppercase:<\/p>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>function changeTextFormat() {\nvar valueTwo = loader.engine.document.getElementById(000000000).getProperty('value.value');\nloader.engine.document.getElementById(000000000).setValue(({\"value\": valueTwo.toUpperCase()})); \n}\nwindow.onchange = changeTextFormat;<\/code><\/pre>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In both cases, you just need to replace &#8220;00000000&#8221; with the field ID of your own Short answer\/ Long answer\/ Email field.<\/p>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In order to&nbsp;find the ID of a field, right-click on the field and use the<b>&nbsp;Inspect<\/b>&nbsp;option of your browser.<\/p>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/staticresources123.s3.us-west-2.amazonaws.com\/docs\/Gifs%20%26%20Videos\/howToFindFieldID.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The result:<\/p>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/staticresources123.s3.us-west-2.amazonaws.com\/docs\/Gifs%20%26%20Videos\/demoChangeToLowercaseUppercase.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-add-digits-grouping-thousand-separators\">Add digits grouping\/ thousand separators<\/h2>\n\n\n\n<p>Do you calculate and\/or collect data with very large numbers on your forms? It comes very handy to automatically format the numbers that your clients input on the form (<a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-create-a-price-configurator-form\/\">or the results calculated by a Formula field<\/a>) with thousands separators. This ensures easier readability. <\/p>\n\n\n\n<p>To use this script you will need to make sure you have a <b>Number field<\/b> and\/or a <b>Formula field<\/b>, where the number is inputted\/calculated, as well as a <b>Short answer field<\/b>, where the new number&#8217;s format is displayed. To not overcrowd your form, you can choose to <b>hide<\/b> either the <b>Number\/Formula<\/b> fields or the <b>Short answer <\/b>field (depending on whether you want the form participants to see the formatted number or not).<\/p>\n\n\n\n<p>Here is the script:<\/p>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>function addSeparators() {\nvar number1 = loader.engine.document.getElementById(000000000).getProperty('value.value'); \/\/ - formula field or number field\nloader.engine.document.getElementById(111111111).setValue(({\"value\": number1.toLocaleString('en-US')})); \/\/- short text field\n};\nwindow.onclick = addSeparators;\n<\/code><\/pre>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Replace &#8220;00000000&#8221; with the field ID of your <b>Number<\/b> or <b>Formula <\/b>field and then replace &#8220;111111111&#8221; with the field ID of your <b>Short answer<\/b> field. Remember, the<b> Short answer<\/b> field is the only field where the number is formatted.<\/p>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>See the result:<\/p>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/staticresources123.s3.us-west-2.amazonaws.com\/docs\/Videos\/addThousandsSeparators.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In the script above we used the <b>&#8216;en-US&#8217;<\/b> locale, which formats a number like 123123123.45 into 123,123,123.45. However, if you need to use the 123.123.123,45 formatting method, replace <b>&#8216;en-US&#8217;<\/b> with <b>&#8216;de-DE&#8217;<\/b>.<\/p>\n\n\n\n<p>If you have more fields with numbers that need formatting, create for each field an associated <b>Short answer<\/b> field. Repeat the lines of code between the curly brackets {} for each pair of <b>Number\/Formula<\/b> field &#8211; <b>Short answer<\/b> field. Make sure to change the name of the variable for each repetition (ex: var number2, var number3, etc.) and change it accordingly after <em>setValue(({&#8220;value&#8221;:<\/em> as well.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p><b>Related articles:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-how-to-round-a-number\/\">JS Tips &#8211; How to round a number<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Our form builder offers you the possibility to apply diverse formats and validation options to your fields. For example, the Phone field will automatically format the number you introduce and you can have quite a few variants too. Have a look over our comprehensive guide on how to choose from the large selection of field [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[93],"tags":[1437,1438,973],"class_list":["post-43681","post","type-post","status-publish","format-standard","hentry","category-advanced","tag-additional-formatting-options","tag-formatting-field-inputs","tag-js-tips"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JS tips - Additional formatting options for field inputs - 123FormBuilder Knowledge Base<\/title>\n<meta name=\"description\" content=\"123FormBuilder offers diverse formatting and validation options for fields. Nothing quite suits what you need? Read on for advanced options.\" \/>\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\/js-tips-additional-formatting-options-for-field-inputs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JS tips - Additional formatting options for field inputs\" \/>\n<meta property=\"og:description\" content=\"123FormBuilder offers diverse formatting and validation options for fields. Nothing quite suits what you need? Read on for advanced options.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-30T15:23:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-26T08:25:37+00:00\" \/>\n<meta name=\"author\" content=\"Alexandra Cufteac\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexandra Cufteac\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JS tips - Additional formatting options for field inputs - 123FormBuilder Knowledge Base","description":"123FormBuilder offers diverse formatting and validation options for fields. Nothing quite suits what you need? Read on for advanced options.","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\/js-tips-additional-formatting-options-for-field-inputs\/","og_locale":"en_US","og_type":"article","og_title":"JS tips - Additional formatting options for field inputs","og_description":"123FormBuilder offers diverse formatting and validation options for fields. Nothing quite suits what you need? Read on for advanced options.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2022-12-30T15:23:23+00:00","article_modified_time":"2024-06-26T08:25:37+00:00","author":"Alexandra Cufteac","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alexandra Cufteac","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/"},"author":{"name":"Alexandra Cufteac","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/a06666451f3a2183ee005d82f917d6aa"},"headline":"JS tips &#8211; Additional formatting options for field inputs","datePublished":"2022-12-30T15:23:23+00:00","dateModified":"2024-06-26T08:25:37+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/"},"wordCount":504,"commentCount":0,"keywords":["additional formatting options","formatting field inputs","js tips"],"articleSection":["Advanced"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/","name":"JS tips - Additional formatting options for field inputs - 123FormBuilder Knowledge Base","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"datePublished":"2022-12-30T15:23:23+00:00","dateModified":"2024-06-26T08:25:37+00:00","author":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/a06666451f3a2183ee005d82f917d6aa"},"description":"123FormBuilder offers diverse formatting and validation options for fields. Nothing quite suits what you need? Read on for advanced options.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/js-tips-additional-formatting-options-for-field-inputs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"JS tips &#8211; Additional formatting options for field inputs"}]},{"@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\/a06666451f3a2183ee005d82f917d6aa","name":"Alexandra Cufteac","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/aff6b9df250996a53212a23829abfa7e770f129d62867ed3bd56aee50333469b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAlexandra%2BCufteac%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/aff6b9df250996a53212a23829abfa7e770f129d62867ed3bd56aee50333469b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAlexandra%2BCufteac%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/aff6b9df250996a53212a23829abfa7e770f129d62867ed3bd56aee50333469b?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FAlexandra%2BCufteac%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","caption":"Alexandra Cufteac"},"url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/author\/alexandra-cufteac123formbuilder-com\/"}]}},"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/43681","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\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/comments?post=43681"}],"version-history":[{"count":13,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/43681\/revisions"}],"predecessor-version":[{"id":49035,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/43681\/revisions\/49035"}],"wp:attachment":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/media?parent=43681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=43681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=43681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}