Below are some commonly requested customizations that require javascript in your WordPress forms. The best place to add these code samples is either in your Theme's footer section or the 'After Fields' section of your Form Settings → 'Customize HTML' tab.
Forms
Conditionally show a form
If you would like to display a form based on a single checkbox selection, you may insert the following code on the same page as your form shortcode. This will add a checkbox to your page which, if selected, will display your form.
If checkbox is checked put value of Text1 into field Text2. Hello, I have 1 checkbox with the name checkbox1 and 2 fields with the name text1 and text2. And in text1 there is a value. Now comes my question if i check the checkbox the value of text1 needs to copy to text2. I don't know how to begin. Can someone help me with this script?
Replace '18' with the ID of your form.
You may want to display your form if a user selects 'Yes' or hide your form and display a message if they select 'No'. Insert this code on a page to achieve this functionality.
Replace '18' with the ID of your form.
Reset Form
This code will clear all fields and selections
Paste this code in at the end of your 'Submit Button' section on your 'Customize HTML' Page. No modification is necessary as it will automatically retrieve the proper form_key, however if you use this code elsewhere on a page, you may need to manually enter the field key in place of [form_key].
Conditionally disable submit button
Note: this is now a built-in feature of Formidable Pro.
You can disable the submit button on your form preventing it from being submitted unless certain options are selected. This example will disable the submit button if 'No' is selected for any of the three fields (25, 26, and 27).
You can disable the submit button on your form preventing it from being submitted unless certain options are selected. This example will disable the submit button if 'No' is selected for any of the three fields (25, 26, and 27).
To make this example work for your form, replace '23'(2 locations) with the ID of your form, replace 25, 26, and 27 with the ID's of your fields, and replace 'No' with value that should disable the submit button.
Conditionally hide submit button
Note: This is now a built-in feature of Formidable Pro.
Hide the submit button on your form until certain fields are filled in. This example will hide the submit button until 'Yes' is selected in a checkbox field.
Hide the submit button on your form until certain fields are filled in. This example will hide the submit button until 'Yes' is selected in a checkbox field.
Replace 10 with the ID of your form, replace 25 with the ID of your field, and replace Yes with value that should show the submit button. Please note that this code example is set up to work with 'Yes' as the only (or first) option in the checkbox field.
If you want to hide the submit button until 'Yes' or 'No' is selected in a checkbox field, use the following example:
Fields
Referencing Field Types
Each field type must be referenced differently in JavaScript. Listed below are the basic ways to references fields in JavaScript.
- Text Input (date, number, etc...):
- Dropdown:
- Radio Button:
- Checkbox:
Replace 'key' with a field key and replace any numbers in red with a field ID. See each of these field types in an example here.
Conditionally hide/show a field
This option is built-in to Formidable, but there may be times where you want more options than Formidable offers. Here's a basic example that shows how to create your own conditional logic to show/hide a field.
Replace 363 with the ID of the field to hide/show. Replace 125 with the ID of the field that triggers the hide/show. In this example, 125 is a dropdown field. If you want to change it to another field type, take a look at how to reference different field types.
Clear a field selection
You can clear a field selection when another field is changed. This can be helpful when conditionally hiding/showing fields to prevent a hidden field from retaining a selected value.
This example will change two dropdown(select) fields to a blank option when the radio button (input) is changed.
Change 30 to the ID of the radio field, and 31 and 32 to the IDs of the dropdowns. Also, change 'input' and 'select' to match the types of fields contained in your form. input is used for checkbox and radio button fields, select is used for dropdown fields.
For more examples on clearing fields, see the community tips and tricks.
Trigger conditional logic when typing
By default, the conditional logic and calculations are triggered when the user clicks outside of the field. You can trigger this checking to happen each time a key is pressed with this script. In some cases, 'keyup' may be a better alternative to 'keypress'.
Display Field Values in HTML Field
Typically, you can put field values in an HTML field with the field ID shortcodes. There are limitations to these shortcodes within the form, however. The shortcode for field 25, for example, will only work if it is inserted on a different page than field 25. Also, the field ID shortcodes will always get the saved value, but there may be times when the option label is needed. Here's a basic example for populating an HTML field with field values:
This example uses a text field (Key 6j2syb) and a radio button field (ID 456). In order for this example to work, you must add two divs to your HTML field, like this:
The div IDs can be modified. Just make sure you modify the div IDs in the JavaScript example as well.
Check all options
Use the code below to check all options in a checkbox field. You'll need to add a separate 'Check All' checkbox or radio button field that will be used to check all of the options. Replace 2oz2d with the field key of the 'Check all' field. Replace 213 with the field ID of the checkbox field that should get all options checked.
Check all options in Lookup field
Use the code below to check all options in a Lookup > Checkbox field, by default. This will only apply to Lookup > Checkbox fields that are watching another Lookup field. Replace 295 (in two places) with the ID of the Lookup > Checkbox field.
Count number of checked boxes
Use this code to count the number of checked boxes in a Checkbox field, and insert that number in a text field or hidden field.
Replace 643 with the ID of your checkbox field and replace wzfsfs with the KEY of your field that will hold the total count.
Limit the number of checked boxes
![Adobe Acrobat X Javascript Examples Checkbox Checked Adobe Acrobat X Javascript Examples Checkbox Checked](http://khkonsulting.com/blog/wp-content/uploads/2014/07/options.png)
Use this code to limit the number of checked boxes in a Checkbox field. Change 3 to the limit you want to set and replace 364 (in two places) with the ID of your checkbox field. This will prevent the user from selecting more than 3 options.
If you would like to limit the number of options checked in a checkbox including the 'Other' option, you can use this code instead.
Get option label from dropdown
This code can be used to get the option label from a dropdown field and store it in a hidden field. This is helpful if you need to get the text value from a Dynamic field or if you are using a Dropdown field with Separate Values enabled.
Get option label from Radio Button
This code can be used to get the option label from a Radio Button field and store it in a Hidden or other text field. This is helpful if you need to get the text value from a Dynamic field or if you are using a Radio Button field with separate values enabled.
Replace 5133 with the ID of the Radio Button field and lhfd3 with the field key of your Hidden field.
Hide option in select
Use jQuery to hide hide select option. This will allow you to remove an option from a dropdown field without deleting it. The following jQuery snippet can go in the 'After fields' box at the bottom of the customizable HTML. Change #field_25 to reference your field and change '5' to the saved value of the option to hide.
Instead of .css, you can also use
or
Get text from Dynamic List field
Add this script to your form's Settings > Customize HTML in the Before Fields. This will get the value from a 'list' Data from Entries field and will put the value in a regular text field. Replace 'dfe' in the example below with the key of the Data from Entries dropdown field that the 'list' field is dependent on. Replace 'hidden' with the key of a regular text field or hidden field in your form. Replace 'just_show_it' with the field key of your 'list' field.
Select matching Dynamic field
The code allows a user to select an entry using a Lookup field and have the same entry automatically selected in a Dynamic field. If there are multiple options in the Dynamic field with the same text, the first one will be selected.
Replace 5914 with the id of the Lookup field and 5915 with the id of the Dynamic field.
Calculate final date
If you would like to calculate a date from a start date and a number of days, you may use the code below. Replace add_days with the key of your field that determines the number of days. Replace date_one with the key of your first date field. Replace date_two with the key of your second date field. This code can be added to your form's Settings > Customize HTML in the Before or After fields.
Format a Slider Field value as a currency
The following example will format the value displayed below a Slider field as a currency, separated by commas. Note: This example requires HTML, CSS, and JavaScript.
- Add this HTML to your form's Settings → Customize HTML tab. Find the box for your slider field. Add this under [input] and replace $50 with your default slider field value.
Note: You will need to manually change the default slider amount based on where you dragged the handle. - Add the following CSS in Customize HTML → Before Fields. Replace jhifa with your slider field key.
- Finally, add the following script and make the changes specified in the code. Replace jhifa with your slider field key. Change $ to your currency symbol.
Add a listener for a dynamic number of rows in a repeater
Sometimes you may need to add a listener for a field within a repeater with a dynamic number of rows. The example below will watch for a change in a date field in a repeater and will insert the day of the chosen date inside a corresponding text field in the same row of the repeater:
The following line is the listener for each date field in the repeater:
Add row counter
Use the code below to keep track of the number of rows in a repeater. Just add a text field to your repeater to hold the row number. Replace 186 with the ID of the text field.
Add a Word Counter
This example is designed to count the number of words in a text area field, and insert that count into an HTML field.
Replace 'r1mqrw' with the KEY of your text area field and you need to add an HTML field below the text area field to display the count. Replace 400 with the ID of your HTML field. You can add this javascript to your form's Settings > Customize HTML in the Before Fields.
Add a Character Counter
This example is designed count the number of characters in a text area field and insert that count into an HTML field.
Replace 'ga45q' with the KEY of your text area field. You need to add an HTML field below the text area field to display the count. Replace 375 with the ID of your HTML field.
Embed a selected YouTube video
This code example allows the user to select a YouTube video from a Dropdown and have that video display and be ready for playing in an HTML field.
The Dropdown options are YouTube video IDs, such as d2IPmicn2x8. You can find the YouTube video ID in the embed code or URL of a YouTube video, such as https://www.youtube.com/watch?v=d2IPmicn2x8. The Dropdown can use separate values so the user sees human readable names and the saved value is the YouTube video id.
Replace 5570 with the ID of the Dropdown with the selection of YouTube video IDs. In order for this example to work, you need a div in your HTML field, like this:
The div ID can be modified. Just make sure you modify the div ID in the JavaScript example as well.
Field Calculations
Conditional Calculation
Use this code to change the value of a field based on a selection in a dropdown field.
Replace 125 with the ID of your dropdown field and replace KEY with the field key of a text field in your form.
Reformat a calculated value
By default, values are calculated using a decimal. This will help you format the value differently for your currency.
Replace '988' and '989' with the field IDs of your calculation fields.
Copy and concatenate field values
Please note: This is a built-in feature as of version 2.02. Read more about it here.
You may want to combine two strings of text or a string of text with a number in your form. For example, you may have one field where the user enters their first name and another where they enter their last name, but you would like to display the first and last name together in another field. This type of calculation is not built-in, but you may follow these directions to set it up manually.
You may want to combine two strings of text or a string of text with a number in your form. For example, you may have one field where the user enters their first name and another where they enter their last name, but you would like to display the first and last name together in another field. This type of calculation is not built-in, but you may follow these directions to set it up manually.
Text fields
If you are combining text fields, use the following code.
Replace 'key1' and 'key2' with the field keys of the two fields to be combined. Replace 'keytotal' with the field key for the total field.
If you are copying text entered into one field into another, use this code:
Replace 'abcd' with the field key of the source field, and 'wxyz' with the field key of the destination field.
Embedded fields
If you are copying text entered in one field outside an embedded form into a field inside an embedded form, use this code:
Replace 'abcd' with the field key of the source field, and 'wxyz' with the field key of the destination field.
Radio buttons
If you are combining radio button fields, use the following code.
Replace '988' and '989' with the field IDs of your radio buttons. Replace 'keytotal' with the field key of your total field.
Dropdown fields
If you are combining dropdown fields, use the following code.
Replace '994' and '995' with the field IDs of your dropdowns. Replace 'keytotal' with the field key of your total field.
Checkboxes
If you are combining checkbox fields, use the following code.
Replace '453' and '455' with the field IDs of your checkboxes. Replace 'keytotal' with the field key of your total field. If you would like to join your checkbox values with something other than a comma, just replace the comma in join(',') with any character.
![Adobe Acrobat X Javascript Examples Checkbox Checked Adobe Acrobat X Javascript Examples Checkbox Checked](/uploads/1/2/5/8/125855429/102296287.jpg)
Repeaters
If you need to copy text from a text field in your form into a text field within a repeater in your form, use the following javascript:
Replace j8dihw (in two places) with the field key of your source field and replace 240 in .frm_field_240_container with the field id of the text field within the repeater.
Note: Field keys and IDs are different. If you cannot get this javascript to work, double check to make sure you're using the key when needed and the ID when needed.
Truncate field
You can save part of the value of one field -- the first two letters, for example -- in another field. Replace wjque with your source field key and iyhhr with your destination field key. Replace 2 with the number of characters you want to truncate. If you want to truncate starting somewhere other than the first character, you can replace 0 with the place where you want to start. If you want to truncate starting at the end, you can use negative numbers. For more info, please see the substring documentation at MDN
Copy address when checkbox is checked
If you'd like the user to be able to check a checkbox and have the billing address automatically copied to the shipping address, you can use the following code:
Replace 1860 with the ID of your checkbox field, replace gnmo9 with the key of your billing address field, and replace jjlwy with the key of your shipping address field. Please note that both address fields should both have the same Address Type for this snippet to copy all the fields properly.
After Submit
See JavaScript examples after form submit.
- Forms
- Fields
- Field Calculations