How we made one contact form work for three pricing options

Yesterday I spent time improving the user experience of a client's contact form. It was a case of necessity being the mother of invention.

We'd added a pricing page to the site. A pricing section used to be enough. But impressions, clicks and conversions had grown, and the page needed something more substantial.

The new page had three options, each with its own benefits and the same call to action: “Request this size.” But what should happen next?

If each was a link to the same contact page as before, what's the point in having three calls to action? Should we link to three different contact pages? Possible, but ridiculous — what would be the point of now having four contact pages!

The solution

We used query parameters. Query parameters are the part of a URL that comes after a question mark. They pass extra information to a page without changing the page itself.

Anatomy of a URL with query parameters

Take this example, from example.com — one of the most popular sites on the internet:

https://example.com/page?key=value&key2=value2

  • The ? marks the start.
  • Each parameter is a key=value pair.
  • An & separates multiple parameters.

Common uses include filtering and sorting prices, tracking on-site search terms, or tracking campaigns. For example: you send a Friday newsletter linking to your latest post, and adding ?ref=newsletter tells you how many readers came from that email, separate from those who found the post through search or social. Or someone lands on your pricing page from an email with a discount code built into the link, so it pre-fills at checkout without them needing to remember or type it in.

For us, this meant the visitor's experience on the page could change based on the option they'd selected, without a redirect to a new page. The experience felt unique to them — each pricing option carries its own query parameters, ready to pass through to the contact form.

The visitor loop

A visitor lands on the pricing page and selects an option. They're taken to the site's contact page. A message on that page reminds them which option they chose — no back-button needed if they're interrupted mid-form and forget what they picked.

They fill out the form and submit it. The success message confirms the specific option they selected. Next, we added their name to that message. My first thought was: is that too much? A huge company like Amazon doing this might feel invasive. But this was a boutique site for a local, independent artist, so it only added to the personal touch we wanted to retain. With that, the loop was closed.

Why this is better UX

Reassurance. It's unsettling to complete a form without being sure your request has landed. Small confirmations reassure the visitor they've been heard: “we've got your request.”

Continuity. A unique message before submission, followed by a unique message after, feels like you're shaking someone's hand.

The takeaway

None of this shows up in a project brief. It's a few extra hours on top of “build a contact form.” But it's often the difference between a form someone abandons halfway through and one they finish, because they trust it's actually working.

If your site's forms could do with some similar personalisation treatment, get in touch — I'd be happy to take a look.

Darren Sims
Webflow Developer
Darren Sims

Darren Sims is a freelance UK Webflow developer. He works with service businesses on strategy, design, build and SEO, from first brief through to launch.