Generating A Random Code In Your Field Input / Form

(Updated 9/27/2019)

Whether if you want to generate random coupon codes per order or provide a random access code at the end of an event registration form, a simple solution would be adding a bit of JavaScript to your web form.

Once you got to build your web form using HTML and CSS, you’ll need to add JavaScript that will randomize a string of characters within the input of a field. You can then use the input in any way you want, from displaying it on the form, passing it to the success page or sending it to the form user through a confirmation email.

Here’s the code:

;(function() {
var randomString = function(length) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for(var i = 0; i < length; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
// random string length
var random = randomString(10);
// insert random string to the field
loader.engine.document.getElementById(95464968).setValue(({"value": random}));
})();

Notice that in the last line I’ve added the ID of the input (“code”). You will need to define an ID to your field. Once you have done that, replace “code” with your field ID.

Once you have successfully added the JS to your form, test it in your browser. You should see a random code of 10 characters applied to your field input. Possible combinations include letters (upper and lower case) and digits. If you want to include symbols, edit this tag:

Var possible=”ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+”

Next, submit your form and check the last record from your database, to find the value there. If you want to change the length of the random code, edit this tag:

var random = randomString(10);

For example, if you want to generate a random code of 5 characters in a form field, change the tag like this:

var random = randomString(5);

Generating A Random Code with 123FormBuilder

123FormBuilder makes it easy for creating online forms. That’s because you don’t need to worry about programming at all. Use the WYSIWYG editor to drag & drop fields and customize the form as needed. As for generating a random code in input, you can enable the Reference ID option, which gives to each form entry a unique ID that you can view in the form’s submissions table. It’s quick and easy.

To add a reference ID to each submission, go to the Settings → Notifications section, and tick the option Reference ID. Add a character inside the input box and save settings. You will need to provide at least one character in order for the feature to work.

You can include the reference ID in your emails and send them to your respondents through confirmation messages, or within the Thank You page of the form.

However, if the reference ID is not what you are looking forward, you can use the Javascript code from above to generate a random code as follows:

1) Drag and drop a Short Text field to your form.

2) Create a .js file with the same code I’ve mentioned above. Copy the code from below in a notepad document.

;(function() {
		var randomString = function(length) {
			
			var text = "";
		
			var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
			
			for(var i = 0; i < length; i++) {
			
				text += possible.charAt(Math.floor(Math.random() * possible.length));
			
			}
			
			return text;
		}

		// random string length
		var random = randomString(10);
		
		// insert random string to the field
		var elem = document.getElementById("code").value = random;
		
	})();

This time, you will need to search for the field ID on the form. This is done easily by using the inspect option of your browser (you will need to enable developer tools). Right-click the input and select the inspect option. You will find the ID something like this: id123-control29506325

Now, replace the field ID in the JavaScript code. For example:

;(function() {
		var randomString = function(length) {
			
			var text = "";
		
			var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
			
			for(var i = 0; i < length; i++) {
			
				text += possible.charAt(Math.floor(Math.random() * possible.length));
			
			}
			
			return text;
		}

		// random string length
		var random = randomString(10);
		
		// insert random string to the field
		var elem = document.getElementById("id123-control29506325").value = random;
		
	})();

3) Use the “save as” option of your notepad and add “.js” to the end of its name before saving. For example, type “random.js” and hit the save button.

4) You will need to upload the file on a server. There are many services that offer free hosting for your scripts. The only one I can recall for now is GitHub. Of course, if you already own a website with access to your files and folders, upload your JavaScript file there.

5) In your 123FormBuilder account, go to the Settings → Advanced section of your form and access the Form tab.

6) Tick the option Add a JS script to your form and paste the URL of your script.

What I mean by URL is that you should be able to view the code if you access the link in your browser.

7) Save settings and test the form.

You can hide the field from view by returning to the form editor, selecting the field that generates the code, and ticking the Hidden option, on the left.

The code will change after each submission, but also on page refresh. This means that if someone is completing your form and decides to start over by refreshing the page in the browser, another code will be generated in the hidden field.

The advantage of using the Reference ID option on 123FormBuilder is that each submission/entry is provided with a unique identification number, which in turn is useful for tracking all your records within the database.

Make sure you check the live demo, to see how the JavaScript code is working on the form. If you require assistance, don’t hesitate to contact our customer support specialists at customercare@123formbuilder.com.

Load more...