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 3 calls to action? Why not just the one? That wouldn’t make sense as different size options were available.

Should we link to 3 different contact pages? Possible, but ridiculous. What would be the point of now having 4 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.

Structure

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 campaigns, and tracking on-site search terms.

For example: you send a Friday newsletter linking to your latest post. 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. The code pre-fills at checkout, so they don't need 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.

The visitor loop

A visitor lands on the pricing page and selects an option. They're taken to the /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. Sweet!

Next, we added their name to that message. My first thought was: is that too much? Amazon doing this might feel a bit much. But this was a boutique site for a local, independent artist. So this would only add 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 someones 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 the same treatment, get in touch — I'd be happy to take a look.