---
title: Visual Designers
description: Laravel Mail Platform features powerful visual drag-and-drop designers for both email templates and subscription forms. These tools allow you to create professi
---

# Visual Designers

Laravel Mail Platform features powerful visual drag-and-drop designers for both email templates and subscription forms. These tools allow you to create professional, responsive designs without writing a single line of code.

---

## Email Designer (GrapesJS)

The Email Designer is powered by **GrapesJS**, a best-in-class open-source web builder framework. It allows you to build sophisticated, multi-column email layouts that work across all major email clients.

### Key Features
- **Drag-and-Drop Blocks**: Pre-defined blocks for text, images, buttons, and layouts.
- **Style Manager**: Granular control over colors, fonts, margins, and borders.
- **Device Preview**: Instantly switch between mobile, tablet, and desktop views.
- **Layers Manager**: Easily navigate complex nested layouts.
- **Asset Manager**: Upload and manage your brand images and icons.

### Building an Email
1. Navigate to **Campaigns** or **Templates**.
2. Create a new entry and look for the **Launch Visual Editor** button.
3. Drag blocks from the right panel into the canvas.
4. Click any element on the canvas to edit its properties (Style and Settings).
5. Use the **Personalization Tags** tool to insert placeholders like `\{\\{first_name\}\\}` or `\{\\{unsubscribe_url\}\\}`.
6. Click **Save** to exit and persist your design.

### Best Practices for Email Design
- **Single Column for Mobile**: Stick to a single column layout for maximum compatibility on mobile devices.
- **Use Web-Safe Fonts**: Stick to Arial, Helvetica, or Georgia to ensure text renders correctly everywhere.
- **Alt Text for Images**: Always provide descriptive alt text for images in case they are blocked by the recipient's email client.

---

## Form Builder (Formeo)

The Form Builder, powered by **Formeo**, allows you to create custom subscription forms that you can embed on your website or use as standalone landing pages.

### Key Features
- **Field Types**: Inputs, textareas, checkboxes, radio buttons, selects, and file uploads.
- **Form Validation**: Set fields as required and define specific validation rules (e.g., email format).
- **Custom Attributes**: Map form fields directly to your subscriber database columns or tags.
- **Live Preview**: See exactly how your form will look to potential subscribers.

### Creating a Form
1. Navigate to **Forms** in the admin sidebar.
2. Click **New Form**.
3. Drag fields from the sidebar onto the form canvas.
4. Configure each field:
    - **Label**: What the user sees.
    - **Name**: Should match the subscriber attribute name (e.g., `first_name`, `email`).
    - **Required**: Toggle whether the field is mandatory.
5. In the **Settings** tab, configure:
    - **Subscriber Tags**: Automatically tag any subscriber who joins via this form.
    - **Redirect URL**: Where to send the user after successful submission.
6. **Save** the form.

### Embedding Your Form
Once saved, you have two ways to use your form:
1. **Public Link**: Share a direct link to the form's landing page (e.g., `https://your-app.com/f/\{uuid\}`).
2. **Embed Code**: Copy the provided `<script>` or `<iframe>` tag to place the form directly onto your own website.

---

## Tips for High-Converting Forms
- **Keep it Simple**: Only ask for the information you actually need. Every extra field reduces conversion rate.
- **Clear Call to Action**: Make your "Subscribe" button stand out with a contrasting color.
- **Offer an Incentive**: Mention what users get for signing up (e.g., "Get our weekly marketing tips").
- **Automatic Tagging**: Use the "Auto-Tag" feature to segment subscribers by which form they used (e.g., tagging them as "Blog Subscriber" or "Webinar Lead").