{"id":22,"date":"2017-06-13T12:20:14","date_gmt":"2017-06-13T12:20:14","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form"},"modified":"2022-07-07T15:26:19","modified_gmt":"2022-07-07T15:26:19","slug":"generate-random-code-for-web-form","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/","title":{"rendered":"Generating A Random Code In Your Field Input \/ Form"},"content":{"rendered":"

(Updated 9\/27\/2019)<\/p>\n

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>, a simple solution would be adding a bit of JavaScript to your web form.<\/p>\n

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.<\/p>\n

Still Looking for the Right Form Builder? <\/a><\/div>\n

Here’s the code:<\/p>\n

;(function() {\r\nvar randomString = function(length) {\r\nvar text = \"\";\r\nvar possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\r\nfor(var i = 0; i < length; i++) {\r\ntext += possible.charAt(Math.floor(Math.random() * possible.length));\r\n}\r\nreturn text;\r\n}\r\n\/\/ random string length\r\nvar random = randomString(10);\r\n\/\/ insert random string to the field\r\nloader.engine.document.getElementById(95464968).setValue(({\"value\": random}));\r\n})();\r\n<\/pre>\n
Notice that in the last line I\u2019ve added the ID of the input (\u201ccode<\/strong>\u201d). You will need to define an ID to your field. Once you have done that, replace “code” with your field ID.<\/p>\n
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:<\/p>\n
Var possible=\u201dABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+\u201d<\/pre>\n
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:<\/p>\n
var random = randomString(10);<\/pre>\n
For example, if you want to generate a random code of 5 characters in a form field, change the tag like this:<\/p>\n
var random = randomString(5);<\/pre>\n
Generating A Random Code with 123FormBuilder<\/h3>\n
123FormBuilder makes it easy for creating online forms<\/a>. That\u2019s because you don\u2019t 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<\/b> option, which gives to each form entry a unique ID that you can view in the form\u2019s submissions table. It’s quick and easy.<\/p>\n
\"generate<\/p>\n
To add a reference ID to each submission, go to the Settings<\/b> \u2192 Notifications<\/b> section, and tick the option Reference ID<\/b>. 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.<\/p>\n
You can include the reference ID in your emails and send them to your respondents through confirmation messages, or within the Thank You page<\/b> of the form.<\/p>\n
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:<\/p>\n
1) Drag and drop a Short Text<\/b> field to your form.<\/p>\n
2) Create a .js<\/b> file with the same code I\u2019ve mentioned above. Copy the code from below in a notepad document.<\/p>\n
;(function() {\r\n\t\tvar randomString = function(length) {\r\n\t\t\t\r\n\t\t\tvar text = \"\";\r\n\t\t\r\n\t\t\tvar possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\r\n\t\t\t\r\n\t\t\tfor(var i = 0; i < length; i++) {\r\n\t\t\t\r\n\t\t\t\ttext += possible.charAt(Math.floor(Math.random() * possible.length));\r\n\t\t\t\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\treturn text;\r\n\t\t}\r\n\r\n\t\t\/\/ random string length\r\n\t\tvar random = randomString(10);\r\n\t\t\r\n\t\t\/\/ insert random string to the field\r\n\t\tvar elem = document.getElementById(\"code\").value = random;\r\n\t\t\r\n\t})();\r\n<\/pre>\n
This time, you will need to search for the field ID on the form. This is done easily by using the inspect<\/b> option of your browser (you will need to enable developer<\/b> tools). Right-click the input and select the inspect option. You will find the ID something like this: id123-control29506325<\/b><\/p>\n
\"how<\/p>\n
Now, replace the field ID in the JavaScript code. For example:<\/p>\n
;(function() {\r\n\t\tvar randomString = function(length) {\r\n\t\t\t\r\n\t\t\tvar text = \"\";\r\n\t\t\r\n\t\t\tvar possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\r\n\t\t\t\r\n\t\t\tfor(var i = 0; i < length; i++) {\r\n\t\t\t\r\n\t\t\t\ttext += possible.charAt(Math.floor(Math.random() * possible.length));\r\n\t\t\t\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\treturn text;\r\n\t\t}\r\n\r\n\t\t\/\/ random string length\r\n\t\tvar random = randomString(10);\r\n\t\t\r\n\t\t\/\/ insert random string to the field\r\n\t\tvar elem = document.getElementById(\"id123-control29506325\").value = random;\r\n\t\t\r\n\t})();\r\n<\/pre>\n
3) Use the \u201csave as\u201d option of your notepad and add \u201c.js\u201d to the end of its name before saving. For example, type “random.js” and hit the save button.<\/p>\n
\"creating<\/p>\n
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.<\/p>\n
5) In your 123FormBuilder account, go to the Settings<\/b> \u2192 Advanced<\/b> section of your form and access the Form<\/b> tab.<\/p>\n
\"adding<\/p>\n
6) Tick the option Add a JS script to your form<\/b> and paste the URL of your script.<\/p>\n
What I mean by URL<\/b> is that you should be able to view the code if you access the link in your browser.<\/p>\n
7) Save settings and test the form.<\/p>\n
You can hide the field from view by returning to the form editor<\/a>, selecting the field that generates the code, and ticking the Hidden<\/b> option, on the left.<\/p>\n
\"how<\/p>\n
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.<\/p>\n
The advantage of using the Reference ID<\/b> 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.<\/p>\n
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.<\/p>\n
\n
\n
\n
\n
Live Demo<\/span><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
 Come and Have Fun with Our Form Builder <\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
(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 […]<\/p>\n","protected":false},"author":31,"featured_media":362,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[16,18,20],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-form-favourites","category-level-up-your-forms","category-ultimate-guides"],"yoast_head":"\nJavaScript Tip: Generating Random Code In Form Field Input<\/title>\n<meta name=\"description\" content=\"You can use this example and apply it to your form. Generate a random code in your web form after each submission easily. Learn more within our post.\" \/>\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\/blog\/generate-random-code-for-web-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generating A Random Code In Your Field Input \/ Form\" \/>\n<meta property=\"og:description\" content=\"You can use this example and apply it to your form. Generate a random code in your web form after each submission easily. Learn more within our post.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-13T12:20:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-07T15:26:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/06\/random-code.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"1201\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Oscar Erk\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oscar Erk\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Tip: Generating Random Code In Form Field Input","description":"You can use this example and apply it to your form. Generate a random code in your web form after each submission easily. Learn more within our post.","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\/blog\/generate-random-code-for-web-form\/","og_locale":"en_US","og_type":"article","og_title":"Generating A Random Code In Your Field Input \/ Form","og_description":"You can use this example and apply it to your form. Generate a random code in your web form after each submission easily. Learn more within our post.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/","og_site_name":"123FormBuilder Blog","article_published_time":"2017-06-13T12:20:14+00:00","article_modified_time":"2022-07-07T15:26:19+00:00","og_image":[{"width":800,"height":1201,"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/06\/random-code.jpg","type":"image\/jpeg"}],"author":"Oscar Erk","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Oscar Erk","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/"},"author":{"name":"Oscar Erk","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/#\/schema\/person\/cdebd32c7d95dbb692eb685554790929"},"headline":"Generating A Random Code In Your Field Input \/ Form","datePublished":"2017-06-13T12:20:14+00:00","dateModified":"2022-07-07T15:26:19+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/"},"wordCount":828,"publisher":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/#organization"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/06\/random-code.jpg","articleSection":["Best Practices","Form Tips","Guides"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/","name":"JavaScript Tip: Generating Random Code In Form Field Input","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/06\/random-code.jpg","datePublished":"2017-06-13T12:20:14+00:00","dateModified":"2022-07-07T15:26:19+00:00","description":"You can use this example and apply it to your form. Generate a random code in your web form after each submission easily. Learn more within our post.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/06\/random-code.jpg","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/06\/random-code.jpg","width":800,"height":1201,"caption":"man looking at code in a monitor"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/generate-random-code-for-web-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/"},{"@type":"ListItem","position":2,"name":"Form Tips","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/tag\/level-up-your-forms"},{"@type":"ListItem","position":3,"name":"Generating A Random Code In Your Field Input \/ Form"}]},{"@type":"WebSite","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/#website","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/","name":"123FormBuilder Blog","description":"","publisher":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/#organization","name":"123FormBuilder Blog","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2020\/12\/logo.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2020\/12\/logo.png","width":131,"height":25,"caption":"123FormBuilder Blog"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/#\/schema\/person\/cdebd32c7d95dbb692eb685554790929","name":"Oscar Erk","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/afa59182d087bbb3a497493c89d3791b8d8f86724a08cf49ee5e55c34f1c4305?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/afa59182d087bbb3a497493c89d3791b8d8f86724a08cf49ee5e55c34f1c4305?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/afa59182d087bbb3a497493c89d3791b8d8f86724a08cf49ee5e55c34f1c4305?s=96&d=mm&r=g","caption":"Oscar Erk"},"url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/author\/oscar-erk123formbuilder-com"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":10,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":4461,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/posts\/22\/revisions\/4461"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/media\/362"}],"wp:attachment":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/blog\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}