Skip to main content

JUNE Forms: Expert Forms for Landing Pages and WhatsApp Flows

With the JUNE Form Builder, you create forms that function on your Landing Pages as well as in WhatsApp Flows. This module is natively integrated into the JUNE Data Platform and creates or updates user data seamlessly within your databases.

A
Written by Alex Zöchling

Getting Started and Creation

You can find Forms in your sidebar under the Data Platform menu. Select the database you want your form to be linked to.

If you haven’t created any forms yet, an introductory screen will appear. Otherwise, you’ll see an overview of your forms. From there, you can edit your forms or create new ones:

  • Create Form: Give your form a name and select the linked database.

  • Import Fields: Automatically adopt fields from the selected database into your form.

  • Select Mode: Switch between the Landing Page view and the WhatsApp preview via the top bar.

The Editor: Setup and Structure

The editor is divided into three main areas for maximum clarity:

  1. Left Side (Settings): Configure details like validation, labels, and placeholders.

  2. Center (Interactive Preview): Your form is rendered live. You can review and adjust it in real time directly within the editor. You can seamlessly switch between the WhatsApp and landing page views.

  3. Right Side (Layers): Manage the structure via drag and drop and add new screens.


Components and Logic

Field Types and Validation

Use various field types that adapt to your requirements:

  • Content: Headlines, sublines, text, and images.

  • Text Inputs: Standard fields or specialized types like email with automatic validation.

  • Selection Fields: Checkboxes, dropdowns, and multiselect components.

Intelligent Database Connection

Every field is connected via a technical name.

  • Automatic Mapping: JUNE suggests matching fields based on the data type.

  • Status Check: The layers tree shows whether a field is connected.

  • Required Logic: Fields marked as required in the database are mandatory by default. You can set additional fields as required in the form manually.

Conditional Forms (Condition Logic)

Use the condition component to create dynamic forms that show specific sections based on user answers.


Design and Branding

For styling your form, you have two primary options:

  • Themes: Use predefined presets.

  • Sitemap Styles: Activate "Use Sitemap Style" to inherit global colors and fonts for a consistent brand design.


Pro Features: Prefilling and Hidden Fields

  • Prefill Values (Pre-filling): If you enable "Prefill input fields" in the component settings, fields will automatically be populated with known user data. This provides a dual benefit:

    • On one hand, it allows users to easily adjust their preferences, for example, when changing subscribed newsletter topics (e.g., Events vs. Offers vs. News).

    • On the other hand, it improves the overall UX and boosts the conversion rate, as repeated data entries (such as name, shipping address, or email address) are completely eliminated.

  • Hidden Fields: Pass background data like campaign IDs or lead sources.

  • Success Screen: Design a message or redirect users after the submit action.


Locales and Errors

  • Multilingualism: Define languages and translate labels per locale.

  • Response Messages: This is where you centrally manage error messages for all your activated languages. You have two options for formatting:

    • Translation of predefined messages: You can translate the system's standard error messages directly into different languages, ensuring international users receive the correct system prompts.

    • Custom messages: If you want to display a completely custom text for a specific required field, you can define a dedicated "Required Message" directly in the field settings of that component. This custom text will overwrite the predefined system message.


Publish and Integration

  • WhatsApp: Publishing occurs directly to Meta within the builder.

  • Landing Pages: Copy the form as a code snippet or use the integrated component.

Did this answer your question?