{"id":2985,"date":"2022-07-25T16:53:32","date_gmt":"2013-03-05T13:05:41","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=2985"},"modified":"2023-05-23T08:23:50","modified_gmt":"2023-05-23T08:23:50","slug":"how-to-prefill-fields-when-embedding-a-form","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/","title":{"rendered":"How to prefill fields when embedding a 123FormBuilder online form?"},"content":{"rendered":"\n<p>If you want to prefill form fields when embedding your form on a webpage, you can do that by tweaking and using the Javascript code from the forms <b>Publish\u00a0\u2192\u00a0Embed form<\/b> section within the <a href=\"\/\">form builder<\/a>.<\/p>\n\n\n\n<p><strong>Important note:<\/strong> when sharing the form link or publishing the form on WordPress, the procedure is different.<\/p>\n\n\n\n<p>Read more about <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-in-wordpress-forms\/\">how to prefill form fields on WordPress<\/a>.<\/p>\n\n\n\n<p>Read more about <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-form-fields\/\">how to prefill form fields when sharing the form link.<\/a><\/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-customizing-the-embed-code\">Customizing the embed code<\/h2>\n\n\n\n<p>Here is an example code that you can paste into your web page, and make the adjustments indicated below.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!-- form.123formbuilder.com script begins here --&gt;\n&lt;script type=\"text\/javascript\" defer src=\"https:\/\/form.polarbuildingcleaning.net\/embed\/<strong><em>YourFormID<\/em><\/strong>.js\" data-role=\"form\" data-default-width=\"650px\" data-custom-vars=\"control<strong><em>33333333-1<\/em><\/strong>=<strong><em>John<\/em><\/strong>&amp;control<em><strong>33333333-2<\/strong><\/em>=<strong><em>Doe<\/em><\/strong>&amp;control<strong><em>55555555<\/em><\/strong>=<strong><em>johndoe@company.com<\/em><\/strong>\"&gt;\n&lt;\/script&gt;&lt;!-- form.123formbuilder.com script ends here --&gt;<\/pre>\n\n\n\n<p>There are three areas in which you need to focus:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Replace <strong><em>YourFormID<\/em><\/strong> with the actual ID of your web form. <\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-47.png\"><img loading=\"lazy\" decoding=\"async\" width=\"675\" height=\"215\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-47.png\" alt=\"YourFormID\" class=\"wp-image-44489\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-47.png 675w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-47-300x96.png 300w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>The function <strong><em>data-custom-vars<\/em><\/strong> is not added by default if you copy the Javascript code directly from the <b>Publish<\/b>&nbsp;\u2192&nbsp;<b>Embed<\/b> section. Therefore, you&#8217;ll need to add it manually to your code, followed by the IDs of the form fields you want prefilled with the desired values.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-46.png\"><img loading=\"lazy\" decoding=\"async\" width=\"675\" height=\"215\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-46.png\" alt=\"data-custom-vars\" class=\"wp-image-44488\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-46.png 675w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-46-300x96.png 300w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Following, <code><b>control3333333-1=John<\/b><\/code> means that the field with the ID&nbsp;<code><b>control3333333-1<\/b><\/code> has <code><b>John<\/b><\/code> as the prefilled value. The field with the name <code><b>control3333333-2<\/b><\/code> is prefilled with the value <code><b>Doe<\/b><\/code>, and so on. Field \u2013 value pairs are linked through the operator <code><b>&amp;<\/b><\/code>. To identify form field IDs, inspect the form code using a browser inspection tool.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-49.png\"><img loading=\"lazy\" decoding=\"async\" width=\"675\" height=\"215\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-49.png\" alt=\"controID\" class=\"wp-image-44491\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-49.png 675w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-49-300x96.png 300w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/a><\/figure>\n<\/div>\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>When you have a form field split into several subfields, you need to add the subfields number after the field ID. For example, the Name field contains the First Name and the Last Name subfields. These <b>two<\/b> have separate IDs: First Name \u2013 control33333333<b>-1<\/b>, Last Name \u2013 control33333333<b>-2<\/b>.<\/p>\n\n\n\n<p>As previously mentioned, if you&#8217;ve copied the code from the Publish section, you need to add this extra part to your embed code. Replace&nbsp;the control ID&nbsp;with your own field&#8217;s ID and our default values with your desired ones.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">data-custom-vars=\"control33333333-1=John&amp;control33333333-2=Doe&amp;control55555555=johndoe@company.com\"&gt;<\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/10\/example-prefill.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/10\/example-prefill.png\" alt=\"Prefill fields on embedded form\" class=\"wp-image-41166\" width=\"678\" height=\"388\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/10\/example-prefill.png 727w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/10\/example-prefill-300x172.png 300w\" sizes=\"auto, (max-width: 678px) 100vw, 678px\" \/><\/a><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>If you want to prefill form fields when embedding your form on a webpage, you can do that by tweaking and using the Javascript code from the forms Publish\u00a0\u2192\u00a0Embed form section within the form builder. Important note: when sharing the form link or publishing the form on WordPress, the procedure is different. Read more about [&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":[37],"tags":[59],"class_list":["post-2985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-publish","tag-aaa_publish"],"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>Help: Prefill fields when embedding form | 123FormBuilder<\/title>\n<meta name=\"description\" content=\"With 123FormBuilder, you can prefill your form fields even when embedding the form on a website. Read this article for instructions.\" \/>\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\/how-to-prefill-fields-when-embedding-a-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to prefill fields when embedding a 123FormBuilder online form?\" \/>\n<meta property=\"og:description\" content=\"With 123FormBuilder, you can prefill your form fields even when embedding the form on a website. Read this article for instructions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2013-03-05T13:05:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-23T08:23:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-47.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=\"3 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Help: Prefill fields when embedding form | 123FormBuilder","description":"With 123FormBuilder, you can prefill your form fields even when embedding the form on a website. Read this article for instructions.","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\/how-to-prefill-fields-when-embedding-a-form\/","og_locale":"en_US","og_type":"article","og_title":"How to prefill fields when embedding a 123FormBuilder online form?","og_description":"With 123FormBuilder, you can prefill your form fields even when embedding the form on a website. Read this article for instructions.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2013-03-05T13:05:41+00:00","article_modified_time":"2023-05-23T08:23:50+00:00","og_image":[{"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-47.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/"},"author":{"name":"admin","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea"},"headline":"How to prefill fields when embedding a 123FormBuilder online form?","datePublished":"2013-03-05T13:05:41+00:00","dateModified":"2023-05-23T08:23:50+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/"},"wordCount":318,"commentCount":7,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-47.png","keywords":["aaa_publish"],"articleSection":["Publish"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/","name":"Help: Prefill fields when embedding form | 123FormBuilder","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-47.png","datePublished":"2013-03-05T13:05:41+00:00","dateModified":"2023-05-23T08:23:50+00:00","author":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/ac765b93d6689ec0f4ee6f6e040d66ea"},"description":"With 123FormBuilder, you can prefill your form fields even when embedding the form on a website. Read this article for instructions.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-47.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2022\/10\/image-47.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/how-to-prefill-fields-when-embedding-a-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"How to prefill fields when embedding a 123FormBuilder online form?"}]},{"@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\/2985","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=2985"}],"version-history":[{"count":99,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/2985\/revisions"}],"predecessor-version":[{"id":46230,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/2985\/revisions\/46230"}],"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=2985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=2985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=2985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}