Generic selectors
Exact matches only
Search in title
Search in content

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.

Create prefill URL

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.

Field details

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

Create prefill URL

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)

Replace form ID prefill URL

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).

Field ID URL prefill

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.

Preset value custom URL

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.

Prefill form fields

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

20 comments

  1. Can this work for fields in a repeatable container? I can only see a data-id for the container itself, not for the fields within it.

    1. Hi Gooman! Yes, you can also prefill the fields included in a Repeatable Container, however, you can only prefill the visible ones and not those that appear after selecting the “Add more” button. To make it easier to retrieve the field ID, make sure to right-click directly on the desired field. If you need any assistance, please don’t hesitate to reach out to us on live chat or at customercare@123formbuilder.com and we will gladly help!

    1. Hi Laurence! I’m afraid that the GET request method is the only one available. However, another option would be to prefill form fields with details from a CSV database, a MySQL or MariaDB database. Connecting forms with such databases is an advanced feature that we provide on our Enterprise Plan. Please feel free to reach out to us at customercare@123formbuilder.com if you would like to learn more about it, or if you have additional questions or concerns. Have a great day!

  2. Is it possible to automatically default to a radio button choice on one form based on the entry of another form? We have one “main” form where the user must make 2 selections (resident state and select an offer code) Based on what is selected, the “submit” button takes them to another form (rules have been set up stating if this state is selected with this offer code, go to this URL. We have 10 different URL’s each with it’s own form. This URL contains yet another form for them to complete with more details, but we would like the “offer code” radio field to be auto-selected based on what they entered on the previous form. Can this be done?

  3. I have 123 form builder integrated with wix.com. I go this to work on my 123 form builder URL but not on my Wix Custom domain.

    Here’s the form that works: https://www.123formbuilder.com/sf.php?s=123formbuilder-4974676&control55879584-1=Henry

    Here’s my custom domain (Doesn’t Work): https://www.beyondatrip.com/soflo-locals-docusign-verification/sf.php?s=beyondatrip.com-4974676&control55879584-1=Henry

    What am I doing wrong?
    In your cool shoes custom domain example, I noticed you just have the domain URL and /sf.php?s.
    I have soflo-locals-docusign-verification than sf.php?s.
    Does the page name have anything to do with it not working?

    Appreciate the help.

    1. Hi Henry!
      The prefill can only be made on our own domain, since there we have control and store the data. On your own domain can not be made since it has no reference to our services/domain. The example you saw is made with a subdomain added to our forms. Here is our article explaining how the subdomain works on our side. The prefill will work if you use the direct link of your form.

    1. Hello Casey! Even if you are using your own domain, the method of prefilling form fields will work, without any issues.

  4. The Link to the blog entry is not working! Is there no FAQ on how to create the needed customized url?

    1. Hi Michael. Thank you for bringing this to our attention. We have updated the article with all the necessary steps to create custom a URL.
      If you need further assistance you can always contact our Customer Care team directly from your account or via live chat.

      Thank you!

    1. Hello Michael! Your form ID will be inserted after s=123formbuilder-, more exactly instead of 123450.
      Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form for more information. in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?