Skip to content

Multi-step form and API integration

A two-step form had to check vehicle eligibility against an external service, turn each response into a clear result state, and carry campaign attribution through to submission.

Period
2025
Context
Professional work
Client
Undisclosed

Context

A landing page needed a custom two-step flow to replace a simpler form: a first step that collected vehicle details and checked eligibility against an external service, and a second step that collected contact details and submitted the qualifying case.

The team built the site and the flow from scratch on WordPress rather than assembling it from a form plugin. It needed API-driven eligibility, distinct result states, attribution carried across both steps and a completion signal once a case was created, all of which sit outside what a standard form builder does.

The external service was maintained by another developer outside the team, who supplied the endpoint documentation and the technical guidance needed to build and test against it. The flow went live in 2025 and is still maintained today.

Platform
WordPress
Flow
Two-step form
Integration
External REST API
Status
Live in production

The challenge

The main challenge was coordinating the different parts around a third-party API: eligibility states, duplicate cases, attribution across both steps and the completion signal. The integration also had to remain flexible enough to support changes after launch.

What I was responsible for

  1. Form experience

    • I built the custom two-step form flow.
    • I implemented the main frontend behavior and interface states.
    • I created the initial visual direction and the two-step concept, then collaborated with a designer on field ordering and UX refinements.

  2. API integration

    • I built the custom WordPress plugin that acts as the integration layer.
    • I implemented the integration from documentation supplied by the external API developer.
    • I implemented eligibility-state handling.
    • I implemented duplicate and already-open-process handling.
    • I implemented ineligible-state handling.

  3. Tracking and attribution

    • I implemented tracking across the funnel.
    • I implemented campaign attribution handling. Including UTM parameters, GCLID and CID.
    • I implemented dataLayer events.
    • I implemented the completion signal sent once a case is created.

  4. Production iteration

    • I implemented the legal modal and its related interaction.
    • I implemented the preferred contact-time field.
    • I worked on performance improvements after the client reported the site felt slow.
    • I supported the funnel experiment with a second published variant.

Solution

I built a custom two-step flow backed by a WordPress plugin that acts as the integration layer. The first step collects vehicle details and asks the external service whether the case qualifies. The plugin interprets the response and the interface resolves it into a clear result state: eligible, not eligible, or a claim that already exists for the vehicle.

Only qualifying users continue. The second step collects contact details and submits the case. Campaign attribution captured when the visitor arrives travels with them through both steps, and a completion signal marks the case once it has been created.

Decisions

  • I put the eligibility request behind a WordPress integration layer rather than calling the external service from the browser, so configuration stays server-side.

  • I kept the integration logic separate from the interface, so the form could keep changing after launch without rebuilding the API connection.

Technical approach

  1. Collect

    Vehicle details are collected in the first step, with the interface holding its own input state.

  2. Prepare

    The collected details are assembled into the request the integration layer will send.

  3. Qualify

    The eligibility request goes through the WordPress integration layer rather than from the browser, so configuration stays server-side.

  4. Resolve state

    The response is resolved into a user-facing result state rather than surfaced as a raw success or failure.

  5. Complete

    Qualifying users continue to the second step, where contact details are collected and the case is submitted.

  6. Attribute

    Campaign attribution captured on arrival is carried across both steps and emitted as dataLayer events, and a completion signal marks the case once it is created.

The system

  1. Choose what arrives to run it.

Vehicle details collected in the first step are passed to a WordPress integration layer, which is the only part that communicates with the external API. The answer that comes back is resolved into a user-facing result state, which routes one of three ways. A vehicle that does not meet the criteria exits through a rejected branch and goes no further. A vehicle that already has a claim exits through a separate branch, which is exceptional rather than failed. A qualifying vehicle continues to the second step, where contact details are collected, the case is submitted and a confirmation is returned. Campaign attribution captured when the visitor arrives is carried across both steps, and a completion signal marks the case once it is created; both run alongside this flow rather than as steps within it.

Fig. 1 — Abstract two-step flow showing eligibility resolution, the three result states and final case submission.

Interface states

The external service returns one answer; the interface has to turn it into something a person can act on. Two of the three outcomes stop the journey, and they are deliberately not presented alike.

  • Not eligibleFig. 2 — The vehicle does not meet the eligibility criteria, so the journey stops here.
  • Existing claimFig. 3 — The request is valid, but a claim already exists for the vehicle, so the interface explains that state instead of treating it as an error.

The funnel experiment

The original flow revealed the estimate before the lead was complete, which gave users a reason to stop at the point where the remaining work was theirs. The team decided to test moving that reveal to after completion, which is what the second variant does.

Variant B does not simply hide the figure. It shows that a figure exists and makes completing the form the way to see it.

01 / 04Second step · A
The estimate is visible while the contact fields are still empty.

Outcome

  • The two-step flow runs in production and processes real submissions through the external API integration.

  • It has remained in active use and has continued to receive product changes since its 2025 launch.

Lessons learned

  1. This project gave me practical experience with API integration end to end. I learned how to work from endpoint documentation, test requests and responses, connect a WordPress integration layer to an external service and turn API states into clear frontend behavior.

  2. Tracking was another important part of the project. I had to preserve UTM, GCLID and CID attribution through the funnel, emit dataLayer events and send the completion signal once the case was created.

  3. Because the flow stayed in production and continued to change, I also learned the value of keeping the integration logic separate from the interface. That made it easier to keep iterating on the form without rebuilding the API connection.

Technologies

JavaScriptHTMLCSSPHPREST APIJSONPostmanGit

More of my work

All projects
  1. 01 · Client workMulti-hotel reservation data, consolidated for reportingReservation data from twelve hotels depended on monthly lists reviewed by hand, so the workflow brings reservations in continuously and keeps one consistent, historical dataset for client reporting.View project
  2. 02 · Client workInteractive golf club finder and enrollment flowA seasonal campaign needed one enrollment flow for multiple clubs, each with availability rules set by the client, so that every lead reached the right club with the right next step.View project
  3. 03 · Client workWordPress rebuild and structured content systemA new WordPress site built so a non-technical team can publish articles, ebooks and webinars through structured content, with lead forms connected to the CRM the client already used.View project

Open to integration, automation and technical implementation roles.