From Figma to Form: Building the SEO Edge Multi-Step Intake Page

This post is a real build story: a multi-step "SEO Edge" intake page that started as a Figma mockup and ended up as a custom, production-ready flow in a Hello Elementor child theme. The goal was simple: match the design, keep it fast, save every entry, and make it easy to manage in WP admin.

Below is the exact approach I used, the decisions that kept it maintainable, and the little details that made the experience feel polished.

Project goals

• Match the Figma layout and step order (6 screens total)
• Keep styles scoped to the template so the rest of the site is untouched
• Capture full lead data and store it safely
• Email both admin and user on submit
• Provide admin search, filters, pagination, and export
• Keep the UI lightweight (no extra font imports, no heavy scripts)

The base: a dedicated page template

Instead of building the entire flow inside Elementor, I added a dedicated template file (for full control) and kept it isolated:

• template-seo-edge.php for markup and screen structure
• seo-edge.css for styling (scoped to the page)
• seo-edge.js for step navigation and progress logic

This structure made it easy to map the Figma layout 1:1 without bloating global styles or Elementor widgets. If you want to stay 100% in Elementor, you can, but templates give you cleaner HTML and tighter performance control.

If you're deciding on the right approach, this pairs nicely with my guide: Elementor Performance Tips: Keep Pages Fast and Lightweight.

The multi-step flow (6 screens, ordered precisely)

The mockup required a specific flow:

1. A hero-style CTA screen (this became step 1)
2. Four question screens
3. A thank-you screen (step 6)

The flow logic was intentionally simple:

• Each screen has its own container
• "Next" buttons move forward
• The header/progress UI hides on steps 5-6 for a cleaner finish
• The CTA screen has one clear action and minimal distractions

This keeps the user experience focused and makes the funnel feel purposeful instead of "form heavy."

Visual details that mattered

A lot of the feedback was visual polish. Here are the changes that made the page feel closer to the mockup:

• No external fonts. The Google Font import was removed; the page now inherits the site's default type.
• Brand colors locked. CSS variables were added for #3BCC42, #091233, #121212CC, #121212, #FFFFFF.
• Image-only background. The gradient overlay was removed so the hero image drives the tone.
• Dynamic background zoom. The background image starts zoomed out on step 1 and zooms in by step 6 for a subtle "momentum" effect.
• Buttons are max-content. No full-width CTA blocks; the layout feels lighter and intentional.

These are small moves, but together they shift the page from "functional form" to a designed experience.

Lead capture fields (complete intake)

The form collects the full dataset the client requested:

• Business type
• Website URL
• Whether they currently have a website
• Monthly traffic
• Main SEO goals
• Monthly SEO budget

All fields are saved on submit, and the confirmation email includes the same data so the user gets a clear record of what they sent.

Saving entries without a CPT

To keep the admin cleaner, I avoided a custom post type and used a lightweight custom DB table instead:

• A wp_seo_edge_entries table stores each submission
• Entries include full form data + timestamps
• No extra post clutter in the WordPress dashboard

This is a great pattern when you want structured storage without publishing workflow noise.

If you're new to secure WP data handling, start with WordPress Security Basics.

Admin tools: search, filters, export

After storage, the next request was clear: make entries manageable.

The admin page now includes:

• Search (name, email, phone, website, business)
• Filters by business type and date range
• Pagination (50 per page)
• CSV export for filtered results

This turns the intake into a usable lead pipeline, not just a database dump.

Optional WhatsApp follow-up

The thank-you screen includes a WhatsApp CTA. If enabled, it auto-opens after 10 seconds in a new tab (avoiding same-page redirects). Users can still click the button manually if popups are blocked.

This is optional, but it adds a high-intent follow-up channel without slowing the main flow.

SVG support (admin-only)

Because the design used SVG assets, I added safe SVG upload support:

• SVG/SVGZ allowed only for admins
• MIME detection fixed for clean uploads
• Admin CSS ensures SVG thumbnails preview properly

This keeps uploads safe while enabling modern vector assets.

Why this approach worked

The project succeeded because it followed a few rules:

• Keep scope tight. All CSS/JS is scoped to the template.
• Treat forms like products. The flow is designed, not just functional.
• Separate data handling. Storage and admin tools live in their own files.
• Use clean structure. Dedicated inc/ files, shortcodes, and hooks keep functions.php lean.

If you want a repeatable workflow for theme changes, I recommend this pattern: WordPress Development Workflow (Git + Staging).

QA checklist I used before launch

• Step order matches mockup (1-6)
• Header/footer hidden on this template only
• Buttons aligned and not full width
• Background zoom feels smooth across steps
• Data saves + admin email + user email all fire correctly
• CSV export downloads the right filtered rows
• No external fonts loaded

Why I did not use a form plugin

The Figma mockup demanded pixel-level control and a very specific flow. A plugin could have worked, but it would have added extra markup and styling constraints. A dedicated template made it easier to:

• Keep the HTML clean and lightweight
• Control the multi-step transitions
• Build admin tools that match the intake data

For standard lead forms, a plugin is still fine. For a bespoke, high-intent flow like this, custom templates keep performance and UX tighter.

Data handling that fits the workflow

The intake data needed to be easy to review, filter, and export. That is why the custom table approach made sense. It keeps the entries structured and separate from posts, and it makes the admin experience more like a pipeline than a content list.

This also made CSV export straightforward, since the fields are consistent and the columns are mapped directly to the intake questions.

Email flow and confirmations

I kept the emails simple and clear:

• Admin email includes the full intake answers
• User email mirrors their submission for clarity
• Both emails emphasize next steps so the lead knows what happens after submission

Plain, direct emails tend to deliver better than heavy templates and reduce confusion.

UX edge cases that matter in multi-step forms

Multi-step UX can feel fragile if small details are missed. The decisions that helped here:

• Keep one primary action per screen
• Validate required answers before moving forward
• Reduce distractions on the final steps to preserve momentum

These are small choices, but they remove friction and keep completion rates stable.

What I would automate next

If I extend this build, I would automate two things:

• Lightweight reporting. A weekly summary email with total submissions and top lead sources.
• Quality signals. Simple flags for missing website URLs or low intent responses.

Neither change is complex, but both would save time and make follow-up faster. An admin dashboard widget could surface this at a glance.

Final thoughts

This build is a good reminder that "page builder + custom code" is often the best combo. Elementor handled the overall site, while a dedicated template delivered the exact flow without performance bloat. The result is a clean, conversion-focused intake experience that is easy to maintain and easy to scale.

If you want the actual template and file structure used here, or want this adapted for a different theme or form plugin, let me know.

Original insight you can replicate

Example you can run on a staging site in 30 minutes:

1. Choose one page related to this guide and capture a baseline screenshot and speed check.
2. Apply one change from this post only.
3. Re-test and log the before/after notes.

Decision rule: If the change improves the primary metric without breaking layout, keep it and document the exact setting you used.