Skip to main content

Slack Code Snippets: Part 1 – Formidable Forms

A collection of snippets and solutions based on questions asked in the Formidable Forms community Slack Group. Each of the solutions below was written in response to a question asked by a member of the Slack group and may be useful for others to benefit from. This list will be added to periodically so check back for new snippets.

Show / Hide Radio Button Option

This snippet will show / hide a radio button option based on another radio button value.

<script>
jQuery(document).ready(function ($) {
	// Hide field by default
	var hideme = $("#frm_radio_1831-1786-0");
	hideme.css('display', 'none');
	$('input[name="item_meta[1788]"]').change(function () {
		var val1 = $(this).val();
		if (val1 == 'Option 1') {
			hideme.show();
		} else {
			hideme.hide();
		}
	});
});
</script>
  • Change #frm_radio_1831-1786-0 to the ID of the radio button option you want to show/hide.
  • Change 1788 to the ID of the radio button field you want to watch.
  • Change 'Option 1' to the value that will need to be chosen.

Add a ‘show password’ checkbox to the Password field

This snippet will add a ‘Show Password’ checkbox to the Password field.

Step 1:

  1. Add a Password field to your form
  2. Add this to the Password field description or an HTML field
<input type="checkbox" onclick="showPassword()">Show Passwords
  1. Add this to the ‘After Fields’ content of your form
<script>
	function showPassword() {
		var x = document.getElementById("field_jjtjt");
		var y = document.getElementById("field_conf_jjtjt");
		if (x.type === "password") {
			x.type = "text";
		} else {
			x.type = "password";
		}
		if (y.type === "password") {
			y.type = "text";
		} else {
			y.type = "password";
		}
	} 
</script>
  • Change jjtjt to the FIELD KEY of the Password field in 2 places.

Check the first half of a UK postcode and display a message

Check the first half of a UK postcode (e.g. E16) and then show a message if it matches a pre-defined selection.

Step 1:

  1. Add a text field to your form
  2. Add an html field to your form (for the message
  3. Add this script to the ‘After Fields’ section of your form:
<script type="text/javascript">
   jQuery(document).ready(function($){
   
   	// Hide message by default
   	var hideme = $("#frm_field_1837_container"); 
   	hideme.css('display','none');
   
   	$('#field_dx09e').change(function(){ 
   		var postcode = $(this).val();
   		val1 = postcode.split(" "),
   		val2 = val1[0];
   	
   		if (val2 == 'E16' || val2 == 'E15'){  
     			hideme.show();
   		}
   		else{
     			hideme.hide();
   		}
   	});
   });
</script>
  • Change 1837 to the FIELD ID of the HTML field that contains your message.
  • Change dx09e to the FIELD KEY of Text Field (postcode field)
  • Change E16 and E15 to the postcodes you want to match

Force Uppercase Characters

If you need to force a field to convert it’s value to uppercase characters as a user types you can add this JS directly to the [input] shortcode:

[input onkeyup="this.value = this.value.toUpperCase();"]

Add large + and – buttons to number inputs.

Sometimes it’s nice to have large inputs to help users enter the right information. Adding large + and – buttons to number inputs is a great way to make life easier for your users.

Here’s how to do it:

  • Add a number field to your form and then go to Settings > Customise HTML and find the number field you just added.
  • Add a class to the [input] shortcode like this: [input class="myNum"]
  • Add 2 <span> elements either side of the [input] shortcode like this:
<span class="min button">-</span>
[input class="myNum"]
<span class="plus button">+</span>

Next add this JS to ‘After Fields’ section of your form:

< script >
	jQuery(".myNum").each(function () {
		var j = jQuery; //Just a variable for using jQuery without conflicts
		var addInput = (this); 
		var n = 1; //n is equal to 1

		//Set default value to n (n = 1)
		j(addInput).val(n);

		//On click add 1 to n
		j(this).next("span").on('click', function () {
			j(addInput).val(++n);
		})

		j(this).prev("span").on('click', function () {
			//If n is bigger or equal to 1 subtract 1 from n
			if (n >= 1) {
				j(addInput).val(--n);
			} else {
				//Otherwise do nothing
			}
		});
	}); <
/script>

And finally add some CSS to style your new buttons.

.plus.button,
.min.button {
	display: inline-block;
	position: relative;
	padding: 0.5em 1em;
	background-color: #7f3690;
	color: #fff;
	cursor: pointer;
	text-align: center;
	width: 50px;
}

.plus.button {
	left: -6px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.min.button {
	right: -6px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.myNum {
	width: 58% !important;
	text-align: center;
}

/* Hide Number Inputs - Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Hide Number Inputs - Firefox */

input[type=number] {
	-moz-appearance: textfield;
}

Check for duplicate values

Recently we wrote some JavaScript for a client to check their form entries for duplicate values. If you have a form that lets a user pick values from similar fields and you only want each item selected once, this might help.

Here’s how to do it:

  • Add your Radio Button, Checkbox, Dropdown, Lookup or Dynamic Fields to your form and configure them accordingly.
  • Add a hidden field to your form. It doesn’t need to have any value set as we’ll do that with the JS below.
  • Save the form and go to Settings > Customise HTML > After Fields and add the following script:
< script >
	document.addEventListener("DOMContentLoaded", function (event) {
		var myForm = document.getElementById('form_client-orderform'); //Form ID
		var dupCheck = document.getElementById('field_y8nrw'); //Hidden Field ID
		var submitButton = document.getElementById('submit-button');
		const config = {
			attributes: true
		};
		var callback = function (mutationsList, observer) {
			for (i = 0; i < mutationsList.length; i++) {
				var mutation = mutationsList[i];
				if (mutation.type === 'attributes') {
					var array = [];
					var extractedArray = [];
					var entryIDs = document.querySelectorAll('.item_id');
					for (e = 0; e < entryIDs.length; e++) {
						if (entryIDs[e].value == "") {
							extractedArray.push(entryIDs[e].value);
							dupCheck.value = '';
							submitButton.disabled = false;
							console.log('submit enabled');
						} else if (array.includes(entryIDs[e].value)) {
							dupCheck.value = 'Error';
							submitButton.disabled = true;
							console.log('submit disabled');
							return;
						} else {
							array.push(entryIDs[e].value);
							dupCheck.value = '';
							submitButton.disabled = false;
							console.log('submit enabled');
						}
					}
					console.log('Array:', array);
					console.log('Extracted Array:', extractedArray);
				}
			}
		}
		var observer = new MutationObserver(callback);
		observer.observe(myForm, config);
	}); <
/script>
  • Change field_y8nrw to the element ID (use field_FIELDKEY or inspect the field in your browser and get the element ID) of your Hidden Field
  • Change form_client-orderform to the ID of your Form

What this script does:

The script will check the values of of your form fields each time anything in the form changes so it works well with cascading lookup fields and will disable the Submit button if there are 2 or more matching values. With some HTML and CSS you can also add a message to display on-screen if a duplicate is found to advise visitors of the error and how to fix it.