URL Query Params

Pre-fill inputs using query parameters. Useful to speed up the form-filling process for users by dynamically populating form fields with information from another page or source.

Additional code/setup

Add these scripts before the </body> tag

<!-- Call Code Select Script-->
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/countrycode.js"> </script>

Add a select input

Add a 'select' element, add 1 choice with the placeholder text and set the value as empty.

You add powerups to this select element.

Attributes

Enable URL Query Params

Add this attribute to the Form element.

Custom <div> attributes
data-query-param
=
true

Notes: 

1. HTML input names are case-sensitive. Meaning if your input name on Webflow has capital letters, your query param would need to follow that.

2. Try to avoid spaces when naming your inputs. Use dashes (-) instead.

Pre-fill inputs & email inputs

To pre-fill inputs, follow this URL structure:
yourdomain.com/?InputName=inputvalue

01
Example:  

To fill an input field called Name: yourdomain.com/?Name=John

To fill an email field called Email: yourdomain.com/?Email=hello@gg.com


Try it out:
https://formly-test-sites.webflow.io/form?email=hello@hello.com

Pre-select radio inputs

To pre-select radio inputs, follow this URL structure:
yourdomain.com/?{RadioGroupName=ChoiceValue
‍
02
Example:  

To pre-select a radio field named Bank in a Radio Group called Payment-Method:
‍
yourdomain.com/?Payment-Method=Bank


Try it out:
https://formly-test-sites.webflow.io/form?radioeg=first‍

Pre-fill select inputs

To pre-fill select inputs, follow this URL structure:
yourdomain.com/?SelectName=SelectValue
‍
03
Example:  

To pre-select a fill the select field named country with USA
‍
yourdomain.com/?country=USA


Try it out:
https://formly-test-sites.webflow.io/form?select=Second

Prefill checkboxes

To pre-check checkbox, follow this URL structure:
yourdomain.com/?CheckboxName=on
‍
04
Example:  

To pre-check a checkbox named Webflow
‍
yourdomain.com/?Webflow=On


Try it out:
https://formly-test-sites.webflow.io/form?secondCheckbox=on

To combine inputs

Add the & symbol between each input.
‍
05
Example:  

To pre-select a fill the email field named email with adam@gmail.com and the input field called first-name with Adam
‍
yourdomain.com/?email=adam@gmail.com&first-name=Adam


Try it out:
https://formly-test-sites.webflow.io/form?email=adam@gmail.com&phone=123

Live examples:

Normal inputs/Email inputs: https://formly-test-sites.webflow.io/form?email=vi@vi.com

‍Radio:  https://formly-test-sites.webflow.io/form?radioeg=first

‍Select:  https://formly-test-sites.webflow.io/form?select=Second

‍Checkbox 1: https://formly-test-sites.webflow.io/form?firstCheckbox=on
‍Checkbox 2: https://formly-test-sites.webflow.io/form?secondCheckbox=on
Both Checkboxes: https://formly-test-sites.webflow.io/form?firstCheckbox=on&secondCheckbox=on

‍All filled out: https://formly-test-sites.webflow.io/form?email=test@test.com&phone=123&select=Second&radioeg=first&firstCheckbox=on

Join our awesome Slack community

Seek support, vote on new features, stay updated and network with other FormlyPros.

Join Slack community