Working with the Layout Builder

The Layout Builder allows you to design the appearance of an event dialog form. While the "Dialog Elements" section lets you determine which fields, text, options, or form components are included, the "Form Layout" section focuses on visual presentation: colors, spacing, widths, and the header, content area, sidebar, form area, and footer.

Important note: The option to edit the layout is not automatically available for every event. It is only visible or accessible if a custom layout was selected when the event was created. If an event uses a standard layout, you can edit the form's content, but the layout itself cannot be freely customized. This prevents unintended changes to centrally defined designs and ensures that standard layouts remain consistent.

Switching between Dialog Elements and Layout

At the top of the form builder, you can switch between "Dialog Elements" and "Form Layout." In the "Dialog Elements" section, you edit the structure of the form itself - such as input fields, selection fields, mandatory fields, headings, notes, downloads, or survey elements. Selecting "Form Layout" takes you to the design view.

Here, you will see a preview of the dialog form on the left or in the center. This preview shows how the form will appear to invitees or external participants. This allows you to evaluate layout changes directly in context; you can see not only individual settings but also how headings, form fields, event information, the sidebar, and the footer interact.

Design and Basic Settings

Basic layout settings are configured in the "Design" section. This includes, for example, the form's width. Depending on the setting, the form can utilize the full available width or be displayed with a fixed width. A fixed width is particularly suitable for classic landing pages or compact event registration pages. Using the full width can be advantageous if you want the form to feel more like a modern website or if it contains a large amount of content.

You can also customize the background color. This allows you to visually align the dialog form with your corporate design, a specific campaign, or an event theme. Link styles can also be adjusted - for instance, choosing whether links appear underlined or not. While this may seem like a minor detail, it significantly influences the visual balance and prominence of the form.

Layout Sections

The layout builder divides the form into several sections. This allows you to work on specific areas individually without having to modify the entire form at once.

The "Preheader Section" refers to the area above the main header. Depending on the layout, this space can be used for additional information or brief notes. The "Header Section" serves as the form's header; this is typically where the event title, graphic elements, or key introductory information are displayed. This area is particularly important for public invitations, as it shapes the first impression.

The "Event Details Section" contains standard event information, such as the date, time, location, and other organizational details. This information should be clearly visible without appearing cluttered. The "Sidebar Section" can accommodate additional content, such as contact details, points of contact, relevant links, or supplementary notes. For more extensive forms, the sidebar helps provide important extra information without disrupting the actual flow of the form.

The "Content Section" comprises the main content area, housing descriptive text, explanatory material, or larger blocks of text. The "Form" section covers the display of the actual input fields. Here, it is crucial to maintain a clear layout, ensure mandatory fields are easily identifiable, and use spacing that makes the form easy to use.

The "Footer Section" forms the bottom of the form and can include elements such as legal notices, company information, or links.

Preview and Save

The "Preview Layout" option allows you to check the layout's appearance before finalizing it. This is particularly useful when you have modified multiple areas, as it helps you spot early on whether spacing is correct, text is legible, and important content remains prominent.

Use "Save Layout" to secure your changes; the adjustments are only permanently applied once you do this. After making major changes, it is advisable not only to check within the builder itself but also to open the actual dialog form. This lets you view the form from the perspective of the future participants.

My Layouts

The layout section also includes a "My Layouts" option, allowing you to use or revisit previously saved layouts. This is convenient when multiple events require a similar structure; instead of designing every layout from scratch, you can use an existing layout as a foundation and modify it as needed.

More Actions

The "More Actions" menu offers additional functions related to the event and the dialog form. "View Event Details" takes you back to the event's general information - useful if you need to verify the basic data, times, or settings stored for the event while working on the layout.

"Open Dialog Form" allows you to open the form itself to test how it will actually appear. This view is particularly important as it more closely resembles the real-world user experience than the editing view alone.

The "Generate Code" option allows you to create embed or invocation code. This function is used when you want to do more than just link directly to the dialog form - for instance, if you wish to embed it into another webpage or pass it on for technical integration.