Form Pre-filling (via URL/API) on Your Website
Imagine a client booking a tour — a 20-field form. Without pre-filling, they spend 5–7 minutes, and errors in the phone or address wreck the deal. We solve this by pre-filling data from URL parameters, JWT tokens, or API. The client sees a partially filled form and just needs to check and submit.
We develop such solutions turnkey — from analysis to deployment. Average timeline: 1 to 4 days depending on complexity. Over 5 years, we've automated forms for lead generation and CRM, implemented pre-filling for 30+ projects. Average fill time reduced by 40%, conversion increased by 25–50%. We guarantee data security: we use proven protection mechanisms (XSS sanitization, signed JWT, strict server-side validation). Our experience is backed by dozens of successful deployments.
Benefits of Pre-filling
- The user spends 5 times less time on the form.
- Input error rate decreases by 30%.
- Target action conversion increases by 20–50%.
Comparison of Pre-filling Methods
| Method | Security | Complexity | Implementation time |
|---|---|---|---|
| URL parameters | Low (XSS, leakage) | Low | 1 day |
| JWT token | High (signature, encryption) | Medium | 2–3 days |
| API request (by token) | High (server validation) | Medium | 2–4 days |
How to Protect the Form from XSS with URL Pre-filling?
URL parameters are the fastest method, but they are vulnerable. We apply a whitelist of allowed fields and sanitize each value. Example in vanilla JavaScript:
function prefillFromURL() { const params = new URLSearchParams(window.location.search); const allowed = ['name', 'email', 'phone', 'company', 'plan', 'promo']; for (const field of allowed) { const value = params.get(field); if (!value) continue; const el = document.querySelector(`[name="${field}"]`); if (!el) continue; el.value = DOMPurify.sanitize(value, { ALLOWED_TAGS: [] }); el.dispatchEvent(new Event('input', { bubbles: true })); } } document.addEventListener('DOMContentLoaded', prefillFromURL); OWASP XSS Prevention Cheat Sheet recommendations confirm the need for such sanitization.
Why JWT is Better Than Open Parameters?
JWT token encrypts data and is signed by the server. Even if the link is intercepted, it's impossible to change the content without knowing the secret. JWT is 3 times more secure than open parameters due to cryptographic signature. On the server (Laravel) we decode the token and return data only after signature verification:
public function decodePrefillToken(Request $request) { try { $payload = JWT::decode($request->token, new Key(config('app.key'), 'HS256')); return response()->json((array) $payload->form_data); } catch (\Exception $e) { return response()->json(['error' => 'Invalid token'], 422); } } Link generation for email:
$payload = [ 'form_data' => [ 'name' => $user->name, 'email' => $user->email, 'plan' => 'pro', ], 'exp' => now()->addHours(24)->timestamp, ]; $token = JWT::encode($payload, config('app.key'), 'HS256'); $link = route('form') . '?token=' . $token; When to Use Which Method?
| Situation | Recommended method | Rationale |
|---|---|---|
| Non-sensitive data (promo code, referral) | URL parameters | Fast, simple |
| Data from email campaigns (phone, name) | JWT token | Security, integrity |
| Authenticated user | API request | Dynamic loading from profile |
Pre-filling from API for Authenticated Users
If the user is already logged in, the form can load their profile. We set up field mapping and use reset() from React Hook Form:
function ApplicationForm({ userId }) { const { register, reset, handleSubmit } = useForm(); useEffect(() => { async function load() { const res = await fetch(`/api/users/${userId}/prefill`); const data = await res.json(); reset(data); } if (userId) load(); }, [userId, reset]); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('name')} placeholder="Name" /> <input {...register('email')} placeholder="Email" /> </form> ); } How We Do It: Work Process
- Analytics — define fields, data sources, security requirements.
- Design — choose method (URL/JWT/API), prepare mapping.
- Development — write backend handlers and frontend logic.
- Testing — check XSS resistance, mapping correctness, UX.
- Deployment — deploy to production, perform load testing.
Typical Mistakes (and How We Avoid Them)
- Unchecked whitelist of fields — an attacker could insert
is_admin=true. We always set an explicit allowlist. - Lack of sanitization — we pass every value through DOMPurify.
- Ignoring pre-fill indication — the user doesn't know data is already inserted. We add a CSS class
field--prefilledand a check mark icon. - Trusting a token without server-side validation — we always check signature and expiration.
Step-by-step implementation of JWT pre-filling in Laravel
- Create a token generation endpoint (POST /api/prefill-token). Accepts an array of fields and returns a signed JWT.
- On the frontend, add handling of the
?token=parameter — decode it and fill the fields. - Implement a middleware that checks the signature and expiration on every call.
- Test with various scenarios (expired token, invalid signature).
What's Included in the Deliverable
- Configured pre-filling mechanism (URL/JWT/API).
- API endpoints with documentation.
- Source code with comments.
- Security testing (XSS, CSRF).
- Integration guide for existing projects.
Timeline and Cost
Timelines depend on the chosen method: from 1 day for simple URL to 4 days for a comprehensive solution with JWT and API. Cost is calculated individually. Assess your project — contact us. Order turnkey form pre-filling implementation. Get a free consultation for your project.
Note: all code examples above are for illustration. In a real project, we adapt them to your stack (Laravel, React, Vue, etc.) and security requirements.