Exact matches only
Search in title
Search in content
Search in posts
Search in pages

How to prefill form fields?

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:

http://live.123formbuilder.com/form-201140.html

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

http://live.123formbuilder.com/sf.php?s=123formbuilder-123450&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 parameter and value, 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 previewing your form link. After pressing the right mouse button, select Inspect Element and hover over your mouse cursor over your first field. The ID of the entire field will be listed after data-id.

123formbuilder find form field id

Here is some useful information for using pre-filled form fields most efficiently. Note that we will use 1234567 as the form field ID. You will need to replace this example ID with the real IDs of your form fields.

    • Preset values for the fields Text Box, Text Area, Number, Email, Website: 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.
    • Preset values for the fields Name, Hour, Price: 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. This goes for the Phone field, as well. If you’ve got more than two subfields, then go on using -3.
    • 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 you use the format you’ve selected for the field.
    • Preset values for the Address field: An address field functions in the same way as the Name field, only that here you’ve got five subfields and, consequently, five IDs, form 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.
    • Preset values for Dropdown Lists and Radio Buttons: 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.
    • Preset values for Checkboxes: Since checkboxes allow for multiple choices, one single ID is not enough. Every option will have its own ID, in order to function like 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.
    • Preset values for Likert Scales: Each Likert scales 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 introduce white spaces in pre-filled 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.

7 comments

  1. 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 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?