Contact
Back to Projects

FormGent – UI/UX Design for an AI-Powered WordPress Form Builder Plugin

Industry
Forms & Data CollectionWordPressSaaS
Service Category
UI/UX DesignProduct Design
Service We Provided
Product StrategyUX ResearchUser Flow PlanningInformation ArchitectureWireframingUI/UX Design
Scope of Work
Core Plugin UI/UX DesignPlugin Frontend DesignAdmin Panel DesignAI Form CreationMulti-step & Classical Form BuilderForm Elements & SettingsConditional Logic

A complete UI/UX design case study of FormGent, an AI-powered WordPress form builder plugin supporting both Multi-Step (Conversational) and Classical forms, with 20+ elements, conditional logic, and full admin experience.

FormGent – AI-Powered WordPress Form Builder Plugin project overview

About the Project

FormGent is an AI-powered, native WordPress form builder plugin designed to make form creation fast, flexible, and genuinely enjoyable without needing a separate platform outside WordPress. It supports two core ways of building forms: a Multi-Step Form (also called a Conversational Form), where every element or question appears on its own screen for a guided, chat-like experience, and a Classical Form, where all elements and questions sit together on a single page in the traditional format.

We designed the entire plugin, end-to-end. This covered the plugin's frontend experience, the WordPress admin panel, the Form Creation flow and Form Table, AI-powered form creation, the Multi-Step Form Builder, the Classical Form Builder, the Form Settings panel, Conditional Logic, Form Appearance customization, Form Results/response management, and the complete set of 20+ form elements and their individual configurations. Every screen and interaction across FormGent was designed by our team.

Problems

Most WordPress form builders force users to choose between simplicity and power either an overly basic plugin that can't handle real business needs, or a bloated tool with a steep learning curve. Users also increasingly expect AI assistance to speed up repetitive setup work, which most existing form plugins don't offer at all.

The key problems we identified:

  • Existing form plugins typically support only one form format classical, single-page forms leaving no easy way to build higher-converting, conversational multi-step experiences in the same tool.
  • Building a form from scratch (fields, logic, payments, notifications) is time-consuming, especially for non-technical WordPress users.
  • Managing 20+ different form elements, each with its own settings, can quickly become overwhelming without a clear, organized interface.
  • Conditional logic showing or hiding fields based on previous answers is often buried in complex, technical configuration screens.
  • Reviewing form responses, tracking analytics, and managing submissions is frequently an afterthought in most form builders, with weak or cluttered results views.
  • Site owners want a form builder that feels native to WordPress using the block editor they already know rather than a separate, disconnected admin experience.

Challenges

Across research, design, and the overall product journey, we faced several key challenges:

Research & Strategy Challenges:

  • Understanding the full range of use cases FormGent needed to support contact forms, payment forms, surveys, quizzes, job applications, bookings, and more and designing a system flexible enough for all of them.
  • Studying existing WordPress form builders to identify exactly where FormGent could be simpler, faster, or more capable, especially around AI-assisted creation.

UI/UX Design Challenges:

  • Designing two distinct form-building experiences the Multi-Step/Conversational Form Builder (one question per screen) and the Classical Form Builder (all fields on one page) while keeping both intuitive and visually consistent within the same builder interface.
  • Structuring 20+ form elements (Name, Email, File Upload, Payment, Rating, Repeater, Date & Time Picker, GDPR Compliance, and more) into an organized, searchable element library, each with its own configuration panel.
  • Designing an approachable AI Form Creation flow letting users describe a form in plain language and instantly get a fully built, editable form.
  • Creating a clear, visual Conditional Logic builder that lets non-technical users define show/hide rules without needing to understand complex logic trees.
  • Designing a comprehensive Form Settings panel covering general settings, notifications, confirmations, payments, and integrations, without overwhelming first-time users.
  • Building an intuitive Form Appearance/styling system, giving users control over colors, layout, and branding without touching CSS.
  • Designing a clear Form Results/response area including entry tables, single-entry views, exports, analytics summaries, and status tracking that stays readable even with high response volumes.
FormGent form builder product cover

Our Solutions

We approached FormGent as a complete form-building ecosystem for WordPress, focusing on speed, flexibility, and clarity across every part of the product.

Research & Product Strategy

  • Conducted market and UX research around modern WordPress form builders.
  • Defined core user journeys from form creation to submission management.
  • Structured the product architecture around different form-building needs.
  • Established scalable patterns for future features and integrations.

AI-Powered Form Creation

  • AI-assisted form creation flow.
  • Clear prompt-based interaction.
  • Generated form preview and editing experience.
  • Smooth transition from AI generation to manual customization.

Classic & Multi-Step Form Builders

  • Classic Form Builder: All form fields presented within a single-page structure.
  • Multi-Step / Conversational Form Builder: Questions and sections presented progressively through multiple steps.

The builder experience includes page breaks, welcome/end screens, navigation controls, and customizable form interactions.

Form Elements & Configuration

We designed 20+ form elements and their individual configuration experiences.

  • Text and contact fields.
  • Choice and selection fields.
  • File upload.
  • Date & time.
  • Rating and range slider.
  • Address and Google Maps.
  • CAPTCHA and GDPR consent.
  • Repeater and advanced inputs.
  • Payment-related elements.
  • Login and registration elements.

Each element was given a consistent configuration pattern while allowing its unique settings and behavior.

Conditional Logic

  • Intuitive condition-building interface.
  • Rule and value selection.
  • Show/hide behavior.
  • Multiple condition support.
  • Clear relationship between conditions and form fields.

This allows forms to dynamically adapt based on user responses instead of showing every field to every visitor.

Form Settings & Appearance

  • General form settings.
  • Submission and confirmation behavior.
  • Notification settings.
  • Form appearance and styling.
  • Layout and field configuration.
  • Custom behavior and advanced settings.

Form Results & Analytics

We designed the complete response-management experience to help users understand and manage submitted data.

  • Forms dashboard and form table.
  • Submission/entry management.
  • Individual response views.
  • Response status and actions.
  • Data export and management.
  • Form analytics and performance summaries.

Scalable Product Design System

We established reusable UI patterns across the entire plugin to maintain consistency between the builder, settings, dashboard, and frontend.

The Final Result

We designed FormGent as a complete AI-powered WordPress form builder, taking the product from initial market research and product strategy through UX architecture, wireframing, prototyping, and final high-fidelity UI design.

Our work covered the complete product ecosystem, including:

  • WordPress plugin frontend.
  • Admin panel and forms dashboard.
  • Form creation and forms table.
  • AI-powered form creation.
  • Classic Form Builder.
  • Multi-Step / Conversational Form Builder.
  • Form settings and appearance.
  • Conditional Logic.
  • Form Results and response management.
  • Analytics and reporting experiences.
  • 20+ form elements and their configurations.
  • Supporting UI patterns and scalable design system.

Overall, FormGent shows how a well-structured, research-driven design system can turn a feature-dense form builder into something that feels simple, fast, and genuinely native to WordPress and we're proud to have designed this product across every screen, from AI-assisted creation to the final results dashboard.

Creating Form

FormGent creating form interface

Multi-step Form Builder

FormGent multi-step conversational form builder

Classical Form Builder

FormGent classical form builder

Conditional Logic

FormGent conditional logic builder

Form Settings Panel

FormGent form settings panel

Form Appearance

FormGent form appearance settings

Form Results

FormGent form results and analytics

Other Works

Explore Other
Projects

Ready to get started?

Ready to
Scale Now

Book A Call