How to Prefill With User Data Using URL Parameters

Pre-populate form fields automatically with data passed through the URL #

FORMEPIC’s URL parameter prefill feature allows you to automatically populate form fields with data before users even start filling them out. By passing values through URL parameters, you can create personalized form experiences that save time, reduce friction, and increase completion rates. Whether you’re sending personalized email campaigns, creating unique tracking links, or building multi-step workflows, prefill functionality ensures your users start with relevant data already in place.

This powerful feature integrates seamlessly with email marketing campaigns, CRM systems, and custom applications, enabling you to deliver highly targeted and contextual form experiences. You can prefill everything from simple text fields to complex selections, making your forms feel intelligent and user-friendly from the moment they load.

How URL Prefill Works #

When a user clicks a link with URL parameters, FORMEPIC automatically detects those parameters and matches them to your form fields. The system maps parameter names to field IDs or labels, instantly populating the corresponding fields with the provided values.

Example:

https://yourform.com?name=John&email=john@example.com&company=Acme

This URL would automatically fill the “name”, “email”, and “company” fields with the specified values.

Setting Up Prefill in Your Form #

Step 1: Access Prefill Settings #

1. Open your form in the Builder
2. Navigate to the Settings panel (gear icon in the left sidebar)
3. Scroll to find the Prefill Settings section
4. Toggle Enable URL Prefill to activate the feature

Step 2: Map URL Parameters to Form Fields #

FORMEPIC automatically attempts to match URL parameter names to field labels or IDs. For best results:

1. Use field IDs or exact field labels as parameter names
2. Keep parameter names simple and lowercase (e.g., firstname instead of First Name)
3. Use underscores for multi-word fields (e.g., phone_number)

Automatic Mapping:

• Parameter email → fills field with label “Email” or ID “email”
• Parameter first_name → fills field with label “First Name” or ID “first_name”
• Parameter company → fills field with label “Company” or ID “company”

Step 3: Test Your Prefill URLs #

1. In the Prefill Settings, you’ll see a Test URL Generator
2. Enter sample values for your fields
3. Click Generate Test URL to create a working example
4. Click Copy & Test to open the URL in a new tab and verify prefill works correctly

Common Use Cases #

Email Marketing Campaigns #

Pre-populate subscriber information from your email list:

https://yourform.com?email={{subscriber_email}}&name={{subscriber_name}}&source=newsletter

CRM Integration #

Pass lead data from your CRM to registration or contact forms:

https://yourform.com?contact_id={{crm_id}}&company={{company_name}}&industry={{industry_type}}

Multi-Step Workflows #

Carry data forward from previous forms or pages:

https://yourform.com/step2?user_id={{previous_response_id}}&plan={{selected_plan}}

Event Registration #

Pre-fill attendee information for faster registration:

https://yourform.com/event?attendee={{name}}&ticket={{ticket_type}}&session={{selected_session}}

Customer Support #

Auto-populate support tickets with customer details:

https://yourform.com/support?customer={{customer_id}}&product={{product_name}}&issue_type=billing

Supported Field Types #

URL prefill works with most field types:

• Text fields (short text, long text, email, phone)
• Dropdown selections (must match exact option value)
• Radio buttons (must match exact option value)
• Checkboxes (use comma-separated values for multiple selections)
• Number fields (numeric values only)
• Date fields (use ISO format: YYYY-MM-DD)
• Hidden fields (for tracking and data passing)

Advanced Techniques #

Pre-Selecting Multiple Checkboxes #

Use comma-separated values:

https://yourform.com?interests=sports,music,technology

Handling Special Characters #

URL-encode special characters:

• Spaces: Use %20 or +
• Ampersands: Use %26
• Question marks: Use %3F

Example:

https://yourform.com?company=Smith%20%26%20Co&message=Questions%3F

Combining Prefill with Hidden Fields #

Use hidden fields to pass tracking data without displaying it:

1. Add a hidden field to your form (e.g., “campaign_source”)
2. Pass the value via URL: ?campaign_source=facebook_ad
3. The data will be captured in responses without users seeing it

Dynamic Link Generation #

Generate personalized links programmatically:

const baseUrl = "https://yourform.com";
const params = {
  name: "John Doe",
  email: "john@example.com",
  source: "referral"
};
const url = baseUrl + "?" + new URLSearchParams(params).toString();

Tips and Tricks #

• Use Field IDs for Reliability: Field IDs are more stable than labels. If you rename a field label, prefill may break. Consider using field IDs in your URLs
• Test with Real Data: Always test prefill with actual data examples to ensure proper formatting and encoding
• Combine with Analytics: Add tracking parameters (e.g., ?utm_source=email&utm_campaign=spring2024) alongside prefill data
• Consider User Privacy: Be mindful of sensitive information in URLs, as they may be logged or shared
• Use Hidden Fields for Metadata: Store source, campaign, or tracking data in hidden fields rather than visible ones
• Create Templates: Build URL templates for common scenarios (e.g., email campaigns, partner referrals) and reuse them
• Document Your Parameters: Keep a list of parameter names and their purposes for team reference
• URL Shorteners: Use URL shorteners for long prefill URLs in email campaigns or social media

Important Notes #

• Case Sensitivity: Parameter names are case-insensitive, but values may be case-sensitive depending on the field type
• URL Length Limits: Very long URLs (over 2,000 characters) may be truncated by some browsers or email clients
• Security Considerations: Don’t pass sensitive data (passwords, credit cards, SSNs) through URL parameters
• User Can Override: Prefilled values can always be changed by users unless fields are marked as read-only
• Validation Still Applies: Prefilled data must still pass field validation rules (e.g., valid email format)
• Mobile Compatibility: Test prefill URLs on mobile devices to ensure proper functionality
• Browser Caching: Some browsers may cache prefilled URLs, which could cause confusion if users revisit the same link

Requirements #

• Published Form: Your form must be published and accessible via its public URL
• Unique Field Identifiers: Fields should have clear, unique IDs or labels for accurate mapping
• Valid Parameter Format: URL parameters must follow standard query string format (?key=value&key2=value2)

Common Issues & Troubleshooting #

Fields Not Prefilling #

Problem: URL parameters aren’t populating form fields

Solutions:

• Verify parameter names match field IDs or labels exactly
• Check for typos in parameter names
• Ensure the field exists and is visible in the form
• Confirm URL Prefill is enabled in Settings → Prefill Settings
• Test with simple, single-word field names first

Special Characters Breaking Prefill #

Problem: Values with spaces, ampersands, or special characters don’t appear correctly

Solutions:

• URL-encode all parameter values using proper encoding
• Use encodeURIComponent() in JavaScript to encode values automatically
• Test with the URL decoder tool to verify encoded values

Dropdown/Radio Not Selecting #

Problem: Dropdown or radio button values aren’t being selected

Solutions:

• Ensure the parameter value exactly matches one of the option values
• Check for case sensitivity in option values
• Verify there are no leading/trailing spaces in option values
• Use the exact option value, not the display label

Multiple Checkbox Values Not Working #

Problem: Only one checkbox is selected instead of multiple

Solutions:

• Use comma-separated values: ?interests=sports,music,art
• Ensure no spaces after commas unless the option value includes spaces
• Verify all values match exact checkbox option values

Prefill Works in Test But Not in Production #

Problem: Prefill works in the builder preview but not on the published form

Solutions:

• Confirm you’re using the published form URL, not the preview URL
• Check if any recent changes to field names haven’t been published
• Republish your form after making field changes
• Clear browser cache and test again

Date Fields Not Prefilling #

Problem: Date values aren’t being populated

Solutions:

• Use ISO format: YYYY-MM-DD (e.g., 2024-03-15)
• Avoid other date formats like MM/DD/YYYY or DD-MM-YYYY
• Ensure dates are valid and within any min/max constraints

Hidden Fields Not Capturing Data #

Problem: Hidden field values aren’t appearing in form responses

Solutions:

• Verify the hidden field is actually added to your form
• Check the field ID matches the URL parameter name
• Ensure the field isn’t accidentally set to “exclude from responses”
• Test by temporarily making the field visible to confirm prefill works

Long URLs Being Truncated #

Problem: URLs with many parameters are being cut off

Solutions:

• Keep URLs under 2,000 characters for maximum compatibility
• Use shorter parameter names and values where possible
• Consider using URL shorteners for distribution
• For very long data, consider alternative methods like hidden fields populated via JavaScript

By leveraging URL prefill effectively, you can create smoother, more personalized form experiences that increase completion rates and user satisfaction. Test thoroughly, document your parameter structure, and monitor performance to continually optimize your forms.