JS tips – Additional formatting options for field inputs

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 formats we offer.

Nothing quite suits what you need? Read on for more advanced options.

First, let’s make sure we have the basics covered. Read here how to add a script to your 123FormBuilder form. Now, we can move on to the part that is more fun.


Change text input to lowercase/uppercase

The script examples provided below will help you to automatically format your clients’ answers to be in all caps or all lowercase. After they are done writing in a field, the text will change accordingly.

Add this script to your form in order to change an input to all lowercase:

function changeTextFormat() {
var valueOne = loader.engine.document.getElementById(00000000).getProperty('value.value');
loader.engine.document.getElementById(00000000).setValue(({"value": valueOne.toLowerCase()})); 
}
window.onchange = changeTextFormat;

Add this script to your form in order to change an input to all uppercase:

function changeTextFormat() {
var valueTwo = loader.engine.document.getElementById(000000000).getProperty('value.value');
loader.engine.document.getElementById(000000000).setValue(({"value": valueTwo.toUpperCase()})); 
}
window.onchange = changeTextFormat;

In both cases, you just need to replace “00000000” with the field ID of your own Short answer/ Long answer/ Email field.

In order to find the ID of a field, right-click on the field and use the Inspect option of your browser.

The result:


Add digits grouping/ thousand separators

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 (or the results calculated by a Formula field) with thousands separators. This ensures easier readability.

To use this script you will need to make sure you have a Number field and/or a Formula field, where the number is inputted/calculated, as well as a Short answer field, where the new number’s format is displayed. To not overcrowd your form, you can choose to hide either the Number/Formula fields or the Short answer field (depending on whether you want the form participants to see the formatted number or not).

Here is the script:

function addSeparators() {
var number1 = loader.engine.document.getElementById(000000000).getProperty('value.value'); // - formula field or number field
loader.engine.document.getElementById(111111111).setValue(({"value": number1.toLocaleString('en-US')})); //- short text field
};
window.onclick = addSeparators;

Replace “00000000” with the field ID of your Number or Formula field and then replace “111111111” with the field ID of your Short answer field. Remember, the Short answer field is the only field where the number is formatted.

See the result:

In the script above we used the ‘en-US’ 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 ‘en-US’ with ‘de-DE’.

If you have more fields with numbers that need formatting, create for each field an associated Short answer field. Repeat the lines of code between the curly brackets {} for each pair of Number/Formula field – Short answer field. Make sure to change the name of the variable for each repetition (ex: var number2, var number3, etc.) and change it accordingly after setValue(({“value”: as well.


Related articles:

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?