Form Builder

The form builder allows you to create custom forms to collect information from your users.

Access the Form Builder

1. Open an existing project or create a new one
2. Access the "Form" tab
3. The builder displays a real-time preview in the right column

Form Tabs

The form builder has two main tabs:

Form Content Tab

This tab allows you to configure the content of your form:

• Form Description: Introductory text displayed at the top of the form
• Form Conclusion: Thank you message shown after form submission
• Form Fields: Add, edit, and organize form fields

Colors Tab

Customize the visual appearance of your form with two options:

Choose a Color Palette:

• Select from pre-designed color combinations

Customize Individual Colors:

• Form Background Color: Background color of the form
• Text Color: Color of all text elements
• Button Gradient Start: Starting color of the button gradient
• Button Gradient End: Ending color of the button gradient
• Button Text Color: Color of text on buttons

Real-time Preview

All changes are displayed instantly in the preview panel on the right, allowing you to see exactly how your form will look.

Default Fields

Each form contains two required fields created automatically:

Field	Type	Required	Modifiable
Name	Text	Yes	Label only
Email	Email	Yes	Label only

These fields cannot be deleted as they are essential for identifying users and sending them communications.

Add a Field

Procedure

1. In the "Form Content" tab, go to the "Form Fields" section
2. Click "Add a Field"
3. Select the field type
4. Configure the field properties
5. Click "Save"

Common Properties

All fields share these properties:

Property	Description	Required
Label	Text displayed to the user	Yes
Technical Name	Unique identifier (letters, numbers, hyphens)	Yes
Required	Field must be filled (for checkboxes, must be checked)	No
Unique	Prevents multiple submissions with the same value	No
Placeholder	Help text in the empty field	No
Description	Help text below the field	No

Avoid Duplicates

Enable the Unique option on the email field to prevent the same guest from submitting the form multiple times.

Configuration Example

For a phone field:

Property	Value
Label	"Phone Number"
Technical Name	"phone"
Required	No
Placeholder	"06 12 34 56 78"
Description	"To contact you if needed"

Edit a Field

1. Click on the field to edit
2. Modify the desired properties
3. Changes are saved automatically

Existing Data

Modifying the technical name of a field may affect the consistency of already collected data. Proceed with caution.

Reorder Fields

Change the display order of fields:

1. Hover over the field to move
2. Click and hold the drag-and-drop icon (⋮⋮)
3. Drag the field to its new position
4. Release

The order is saved automatically.

Delete a Field

1. Hover over the field to delete
2. Click the delete icon (🗑️)
3. Confirm deletion

Irreversible

Deleting a field is permanent. Data collected for this field in existing submissions is preserved, but the field will no longer appear in new submissions.

Best Practices

Form Design

• Limit Fields: Only request truly necessary information
• Logical Order: Organize fields in a natural order
• Required Fields: Mark as required only what is essential
• Clear Instructions: Use placeholders and descriptions

User Experience

• Mobile First: Test on mobile; long forms are difficult on small screens
• Progression: If many fields, consider grouping them logically
• Feedback: Use descriptions to guide the user

Data Quality

• Appropriate Types: Use the correct field type for each data point
• Uniqueness: Enable the Unique option to avoid duplicates (especially on email)
• Format: Indicate the expected format in the placeholder

Complete Form Example

Typical form for a wedding event:

Order	Label	Type	Required
1	Full Name	Text	Yes
2	Email Address	Email	Yes
3	Phone	Text	No
4	Number of Guests	Text	No
5	Dietary Restrictions	Textarea	No
6	Message for the Couple	Textarea	No

Next Steps

• Available Field Types
• Publish the Form