How to prefill form fields with 123FormBuilder?

In order to prefill form fields, you need to create a customized URL for your web form. Normally, the link to your web form looks like this:

https://form.123formbuilder.com/201140/

where 201140 is your web form ID. To introduce preset field values, you need a URL of this type:

https://form.123formbuilder.com/sf.php?s=123formbuilder-201140&control1111111=John&control2222222=Doe

where sf.php?s=123formbuilder is the key part that remains unchanged for all customized URLs, 201140 is your web form ID and control1111111=John sets the preset value John for the form field with the ID 1111111.

Simply put, what you have to do is generate a URL that calls the ID of the form field for which you want to set a predefined value and assigns that value to it. You can prefill as many fields as you want within a form. URL parameter and value pairs are connected by ampersands (&). By pair of parameters and values, we understand control1111111=presetValue. In this structure, 1111111 is the form field ID.

You can find out what the IDs of your form fields are by 2 different ways:

a. checking the Field details section for each type of field.

b. by previewing the form link, going to Inspect and take the ID of the entire field that is listed after data-id.

Let’s take them one by one.

Field details

When selecting a field on the form, in the left side panel you will have available the settings of the field.

Under Field details section, you have available the Field ID that can be used to form the URL you need.

To introduce preset field values, you need to create a custom URL of this type:

How to create URL

a.change the form ID to the one of the form you want to have prefilled (instead of 201140 insert your form ID)

b. Instead of control1111111 insert the Field ID that you want to have prefilled. In our example, instead of control1111111 we are using control106711761, following the example of the below screenshot).

c. Now you just have to set the predefined value for the field ID that you want to have prefilled. This means that the First/Last name field from our form will be prefilled with the value John.

Inspect method

You can find out what the IDs of your form fields are by previewing your form link. After pressing the right mouse button, select Inspect and hover your mouse cursor over your first field. The ID of the entire field will be listed after data-id.

Complex scenarios

Here is some useful information for using prefilled form fields more efficiently in our form builder. Note that we will use 1234567 as the form field ID. You will need to replace this example ID with the actual IDs of your form fields.

a. Preset values for Short text, Long text, Number, Email, Website fields: You only need to include &control1234567=presetvalue in the webform URL. Replace presetvalue with the value of your choice and &control1234567 with your control (form field) ID.

b. Preset values for the fields Name, Time: In this case, the form field is split into several subfields. For example, the field Name contains a First Name and a Last Name. These two have separate IDs: First Name – 1234567-1, Last Name – 1234567-2. Therefore, the right syntax will be &control1234567-1=John&control1234567-2=Doe. If you’ve got more than two subfields, then go on using -3.

c. Preset values for Phone: If you want to prefill the input of the Phone field, use this code: &control1234567=123-342-345. However, make sure to use the format you’ve selected for the field.

d. Preset values for the Address field: An Address field functions in the same way as the Name field, just that here you’ve got five subfields and, consequently, five IDs, from 1234567-1 to 1234567-5. In addition, there is the Country field, which is a dropdown list. To preset a value for the list of countries, you need the following code: &control1234567-6=CountryName.

e. Preset values for Dropdown and Single choice fields: These fields allow for a single choice. This means that there is only one ID for the entire field. The syntax is &control1234567=ChoiceName, where ChoiceName is the choice that you want to preset.

f. Preset values for Multiple choice fields: Since this field type allows for multiple choices to be selected, a single ID is not enough. Every option will have its own ID, in order to function as a separate subfield. To precheck an option, use this code: &control1234567-0=yes. As you can see, the first option is -0, next one -1, next one -2, and so on.

g. Preset values for Likert scales: Each Likert scale statement has an individual ID. To preset a value for a Likert statement, use the following code: &control1234567=Neutral, i.e. the value will be the name of the option that you want to have preset.

To add a space in prefilled form fields, use the code %20. For example, to obtain the preset value Fifth Avenue for a field, you will need the following code: &control1234567=Fifth%20Avenue.

To open the form in a particular language, use the following URL: https://form.123formbuilder.com/sf.php?&s=form-201140&language=es. In this example, language=es changes the language to Spanish. Make sure to use the abbreviation of the desired language (such as en for English and fr for French).

Related articles

• How to pass user input from one form to another?