{"id":40801,"date":"2021-10-07T13:29:44","date_gmt":"2021-10-07T13:29:44","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=40801"},"modified":"2024-04-11T13:40:51","modified_gmt":"2024-04-11T13:40:51","slug":"utm-tracking-for-embedded-forms","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/","title":{"rendered":"UTM tracking for embedded forms on 123FormBuilder"},"content":{"rendered":"\n<p>By using a custom JS script added to the form, you can fill form fields with UTM tracking parameters or other source values. Once submitted, you can use these values in other workflows involving external integrations or the form API.<\/p>\n\n\n\n<p>To add a custom script to your online forms, access your <a href=\"\/\">form builder<\/a> account, go to the <b>Advanced \u2192 Form<\/b> tab. Then, select the option <em>Add a JS script to your form <\/em>and paste the script URL.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"390\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-1024x390.png\" alt=\"JS script to your form\" class=\"wp-image-47853\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-1024x390.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-300x114.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-768x292.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-1536x585.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246.png 1902w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Here is a more detailed article on how you can host, share and apply a script to your form: <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-custom-js-script-to-my-form\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to add custom JavaScript to form<\/a>.<\/p>\n\n\n\n<p>We have provided a few script examples below on how you can capture the UTM tracking parameters or other values.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-example-script-1\">Example Script 1<\/h2>\n\n\n\n<p>This script retrieves the UTM parameters values from your URL (they will appear when a click is made on the form):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function getReferrer() {\nsetTimeout(function() {\nvar queryString = window.location.search;\n\nvar urlParams = new URLSearchParams(queryString);\nvar utmSource = urlParams.get('utm_campaign');\nvar utmMedium = urlParams.get('utm_source');\nvar utmCampaign = urlParams.get('utm_medium');\n\nloader.engine.document.getElementById(111111111).setValue({ value: utmSource });\nloader.engine.document.getElementById(222222222).setValue({ value: utmMedium });\nloader.engine.document.getElementById(333333333).setValue({ value: utmCampaign });\n\n}, 1000);}\nwindow.onclick = getReferrer;<\/code><\/pre>\n\n\n\n<p>Replace 111111111, 22222222 and 33333333 with your Field IDs. You can find your Field ID by clicking on your field in the editor, and scrolling down to the section called Field Details:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2024\/04\/04-08_185241.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2024\/04\/04-08_185241-1024x508.png\" alt=\"\" class=\"wp-image-48576\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2024\/04\/04-08_185241-1024x508.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2024\/04\/04-08_185241-300x149.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2024\/04\/04-08_185241-768x381.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2024\/04\/04-08_185241.png 1094w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-example-script-2\">Example Script 2<\/h2>\n\n\n\n<p>This script retrieves the src link of the form iframe containing search parameters from a UTM cookie. The values of these parameters are then extracted and prefilled in hidden form fields.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var queryString = window.location.search;\n\nvar urlParams = new URLSearchParams(queryString);\nvar is_campaign = urlParams.get('utm_campaign');\nvar is_source = urlParams.get('utm_source');\nvar is_medium = urlParams.get('utm_medium');\n\ndocument.getElementById('id123-control11111111').value = is_source;\ndocument.getElementById('id123-control2222222').value = is_medium;\ndocument.getElementById('id123-control3333333').value = is_campaign;\n<\/pre>\n\n\n\n<p><em>(&#8216;id123-control11111111&#8217;) <\/em>represents the field<em> <\/em><b>control ID<\/b>. Replace it with the actual ID of your form fields. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-example-script-3\">Example Script 3<\/h2>\n\n\n\n<p>Another approach to capturing any value in a field involves the following syntax structure:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">loader.getEngine().getDocument().getControlsList().find(function (control) { \n        return control.id === 0000000; \/\/ this targets a field based on its control id\n    }\n).setValue({value: 'new value'}); \/\/ this sets a value in a control\n<\/pre>\n\n\n\n<p>This script captures the parent window URL where the form is embedded and populates it in a hidden field on the form.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">jQuery(document).ready(function() {\n  setTimeout(function() {\n    var parentFrame = window.location;\n    var desiredControl = loader.getEngine().getDocument().getControlsList().find(function(control) { \n      return control.id === 0000000; \/\/ the desired control id\n    });\n    desiredControl.setValue({value: parentFrame.href});\n    console.log('custom static resource loaded');\n  }, 2000);\n});\n<\/pre>\n\n\n\n<p><em>&#8216;new value&#8217;<\/em> can be static or dynamic (returned by a function or retrieved after a third-party API call) as long as that value (&#8216;<em>new value<\/em>&#8216;) is a string.<\/p>\n\n\n\n<p><em>Control.id <\/em>represents again the ID of your form field. Replace <em>&#8220;0000000&#8221;<\/em> from our example with the ID of your field.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>By using a custom JS script added to the form, you can fill form fields with UTM tracking parameters or other source values. Once submitted, you can use these values in other workflows involving external integrations or the form API. To add a custom script to your online forms, access your form builder account, go [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[93],"tags":[971,970],"class_list":["post-40801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advanced","tag-add-js-script","tag-utm-tracking"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>UTM tracking for embedded forms on 123FormBuilder | Help<\/title>\n<meta name=\"description\" content=\"In this article you will learn how to use custom JS scripts to prefill form fields with either UTM tracking parameters or other source values.\" \/>\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\/docs\/utm-tracking-for-embedded-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UTM tracking for embedded forms on 123FormBuilder\" \/>\n<meta property=\"og:description\" content=\"In this article you will learn how to use custom JS scripts to prefill form fields with either UTM tracking parameters or other source values.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-07T13:29:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-11T13:40:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-1024x390.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"UTM tracking for embedded forms on 123FormBuilder | Help","description":"In this article you will learn how to use custom JS scripts to prefill form fields with either UTM tracking parameters or other source values.","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\/docs\/utm-tracking-for-embedded-forms\/","og_locale":"en_US","og_type":"article","og_title":"UTM tracking for embedded forms on 123FormBuilder","og_description":"In this article you will learn how to use custom JS scripts to prefill form fields with either UTM tracking parameters or other source values.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2021-10-07T13:29:44+00:00","article_modified_time":"2024-04-11T13:40:51+00:00","og_image":[{"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-1024x390.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/"},"author":{"name":"admin","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea"},"headline":"UTM tracking for embedded forms on 123FormBuilder","datePublished":"2021-10-07T13:29:44+00:00","dateModified":"2024-04-11T13:40:51+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/"},"wordCount":317,"commentCount":0,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-1024x390.png","keywords":["add js script","UTM tracking"],"articleSection":["Advanced"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/","name":"UTM tracking for embedded forms on 123FormBuilder | Help","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-1024x390.png","datePublished":"2021-10-07T13:29:44+00:00","dateModified":"2024-04-11T13:40:51+00:00","author":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea"},"description":"In this article you will learn how to use custom JS scripts to prefill form fields with either UTM tracking parameters or other source values.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-1024x390.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/image-246-1024x390.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/utm-tracking-for-embedded-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"UTM tracking for embedded forms on 123FormBuilder"}]},{"@type":"WebSite","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/","name":"123FormBuilder Knowledge Base","description":"Search our documentation platform for answers, service specifications and 3rd-party integrations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/41383a571ede8f1257b128aa53a410cc1ea4c1901ac8cea3776cba5438d24843?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2Fadmin%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/41383a571ede8f1257b128aa53a410cc1ea4c1901ac8cea3776cba5438d24843?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2Fadmin%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/41383a571ede8f1257b128aa53a410cc1ea4c1901ac8cea3776cba5438d24843?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2Fadmin%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","caption":"admin"},"url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/40801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/comments?post=40801"}],"version-history":[{"count":12,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/40801\/revisions"}],"predecessor-version":[{"id":48604,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/40801\/revisions\/48604"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/media?parent=40801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=40801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=40801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}