Skip to main content

Building Forms with the JUNE Form Builder

With the JUNE Form Builder, you can create dynamic, multi-step forms for your landing pages or WhatsApp Flows in no time. This guide will help you with structuring, database setup, and selecting the right components.

A
Written by Alex Zöchling

Important Prerequisites in the Data Platform (Database Setup)

Before you start visually creating your form in the Form Builder, the foundation must be set in your JUNE Data Platform. Since every interactive field in the form writes data directly to your user profiles or updates existing data, you should pay attention to the following points during setup:

Existence of Database Fields

All information you want to collect from your users must already be created as fields in the linked database.

The Right Database Field Type

It is essential to choose the correct database field type, as this largely determines the behavior of your form components.
For example, if you use a simple text field for a query, the existing value in the database will always be overwritten upon a new user input. If, on the other hand, you want to allow users to select multiple options simultaneously, you must use an array field (or select field) so that JUNE saves all selected values neatly next to each other. Unsure which database field type is the right one?
Here you will find a list of all types with descriptions and tips on which type is best suited for what.

Optional: Predefining Answer Options in the Database

For selection components like Dropdowns, Multiselects, Radio Groups, or Checkbox Groups, you have the option to predefine the various selection options directly in the field settings of your list in the Data Platform. When you subsequently add this field in the Form Builder, JUNE recognizes this structure and automatically suggests the answer options, including payload and label. This saves time and prevents manual mapping errors.

Overview of Form Components

The Forms module offers you a range of specialized form components for data collection that integrate perfectly into your data structure:

Name

Description

Suitability / Use Case

Radio Group

Displays all options directly below or next to each other. Only one option can be selected at a time.

Single-choice questions, such as selecting the primary business category.

Checkbox Group

Allows the user to check multiple options simultaneously. Strictly requires an array field in the database.

Multi-choice scenarios, such as subscribing to multiple newsletter topics.

Dropdown

A space-saving selection menu where options become visible only upon clicking. Only one option can be selected.

Single-choice queries where space is limited on the landing page or in the WhatsApp Flow.

Multiselect

Visually behaves like a dropdown menu, but allows the selection of multiple options consecutively. Requires an array field in the database.

Multi-choice queries where a highly compact display is desired.

Text Inputs

Standard input fields for free text.

Collecting custom data like names or feedback. With special validations, ideal for checking email addresses or phone numbers.

Text and Content Components for Visual Guidance

A successful form needs context. Pure content components do not collect data themselves, but they are essential for structuring, designing, and guiding the user through your form:

Name

Description

Suitability / Use Case

Headline

Large, prominent heading to clearly structure the form.

Introducing completely new sections or main topics on a page.

Subheading

Smaller heading, perfectly suited for questions.

Formulating specific questions directly above selection fields. Pro-Tip for WhatsApp Flows: Subheadings often look more harmonious in the mobile view than large headlines.

Text

Body text component for descriptive paragraphs.

Providing context, short explanations, or instructions on how to fill out the form.

Image

Integration of visual elements like pictures or graphics.

Adding logos, product images, or explanatory graphics for visual variety and brand strengthening.

Conditional Components (Conditional Logic in the Form)

With conditional logic, you can create smart, dynamic forms that adapt exactly to the user's response behavior. This allows users to skip irrelevant sections, which significantly increases the conversion rate:

  • If Component: Enables a classic if-then branch. If a simple condition is met (e.g., the field "Age" is greater than 18), Path A is displayed; otherwise, Path B.

  • Switch Component: The ideal solution for complex, multi-step queries with several response paths. The Switch component reads the value of a specific selection field and opens individual cases based on it.

    • Example: If a user selects the category "Customer Service" in the first step of the Radio Group, the Switch automatically opens the case with specific questions for the service area. If they select "Marketing" instead, they immediately see the relevant marketing questions.

    • Default Case: The default area serves as a technical fallback. Should the user's response not fit into any of the specifically defined cases, the content of the default case is automatically displayed so as not to interrupt the flow of the form.

Best Practices for a Smooth Workflow in the Editor

To ensure that building your form in the JUNE Editor is quick and error-free, you should keep the following workflows in mind:

  • Set screen titles mandatory: Every screen (form step) in the right-hand structure tree requires a unique title. Meta, in particular, has strict requirements when publishing WhatsApp Flows: if screen titles are missing, the validation during publishing will fail.

  • Automatic data sync & triggers: As soon as a user successfully submits the form, the data is transmitted to the linked database in the background in real-time. You do not need to make any manual assignments afterward. The submission can be used directly as a trigger in your Customer Journeys (in the Automation module) to launch follow-up campaigns or confirmations.

Did this answer your question?