Pre-fill Inputs
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.
Attributes
Enable URL Query Params
Add this attribute to the Form element.
Custom <div> attributes
data-query-param
=
true
Note:
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.
3. Please use URL Encoding to add special characters like spaces, hashtags, exclamation marks and more.
Free URL Encoder Decoder Tool
HTML URL Encoding Reference
Text inputs
To pre-fill inputs, follow this URL structure:
yourdomain.com/?InputName=inputvalue
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
To fill an input field called Name: yourdomain.com/?Name=John
To fill an email field called Email: yourdomain.com/?Email=hello@gg.com
https://library.tryformly.com/features/query-parameters?name=John%20Paul
Email inputs
To pre-fill inputs, follow this URL structure:
yourdomain.com/?InputName=inputvalue
yourdomain.com/?InputName=inputvalue
03
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
To fill an input field called Name: yourdomain.com/?Name=John
To fill an email field called Email: yourdomain.com/?Email=hello@gg.com
https://library.tryformly.com/features/query-parameters?email=hello@videsigns.uk
Radio inputs
To pre-select radio inputs, follow this URL structure:
yourdomain.com/?{RadioGroupName=ChoiceValue
yourdomain.com/?{RadioGroupName=ChoiceValue
https://library.tryformly.com/features/query-parameters?experience=new
03
Select inputs
To pre-fill select inputs, follow this URL structure:
yourdomain.com/?SelectName=SelectValue
yourdomain.com/?SelectName=SelectValue
https://library.tryformly.com/features/query-parameters?src=Twitter
04
Checkboxes
To pre-check checkbox, follow this URL structure:
yourdomain.com/?CheckboxName=on
yourdomain.com/?CheckboxName=on
05
Combine inputs
Add the & symbol between each input.
06
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
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
Query Parameters | Combine all (Again, too long to fit here)
Live examples:
Text Area Inputs
Checkboxes (Single)
Checkboxes (Multiple)
Combine everything!
Join our awesome Slack community
Seek support, vote on new features, stay updated and network with other FormlyPros.
Join Slack community