How to prefill fields when embedding a 123FormBuilder online form?

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 → Embed section within the form builder. We’ll see in a second how to use it. First, let’s mention that, when sharing the form link or publishing the form on WordPress, the procedure is different.

Read more about how to prefill form fields on WordPress.

Read more about how to prefill form fields when sharing the form link.

Customizing the embed code

Back to the code needed when embedding the form on a regular web page. We provided the following code as an example. You can paste it into your web page, and make the adjustments indicated below.

<!-- form.123formbuilder.com script begins here -->
<script type="text/javascript" defer src="https://form.123formbuilder.com/embed/YourFormID.js" data-role="form" data-default-width="650px" data-custom-vars="control33333333-1=John&control33333333-2=Doe&control55555555=johndoe@company.com">
</script><!-- form.123formbuilder.com script ends here -->

There are three areas in which you need to focus:

• Replace YourFormID with the actual ID of your web form.
• The function data-custom-vars is not added by default if you copy the Javascript code directly from the Publish → Embed section. Therefore, you’ll need to add it manually to your code, followed by the IDs of the form fields you want prefilled with the desired values.
• Following, control3333333-1=John means that the field with the ID control3333333-1 has John as the prefilled value. The field with the name control3333333-2 is prefilled with the value Doe, and so on. Field – value pairs are linked through the operator &. To identify form field IDs, inspect the form code using a browser inspection tool.

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 two have separate IDs: First Name – control33333333-1, Last Name – control33333333-2.

As previously mentioned, if you’ve copied the code from the Publish section, you need to add this extra part to your embed code. Replace the control ID with your own field’s ID and our default values with your desired ones.

data-custom-vars="control33333333-1=John&control33333333-2=Doe&control55555555=johndoe@company.com">