---
title: Form Designer
description: Learn how to design custom forms using APIANT’s drag-and-drop Form Designer. Explore form attributes, containers, elements, resizing, previews, and essential keyboard shortcuts for efficient form creation.
---

[Skip to content](https://help.apiant.com/form-designer#main-content)

English

Show submenu for translations

![apiant-logo-forum.png\]](https://help.apiant.com/hs-fs/hubfs/apiant-logo-forum.png?height=40&name=apiant-logo-forum.png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations
- Go to apiant.com

 Go to apiant.com

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Help Center](https://help.apiant.com/?hsLang=en)
2. [AutomationEditor](https://help.apiant.com/automationeditor?hsLang=en)
3. [Building Automations](https://help.apiant.com/automationeditor?hsLang=en#building-automations)

# Form Designer

## Learn how to design custom forms using APIANT’s drag-and-drop Form Designer. Explore form attributes, containers, elements, resizing, previews, and essential keyboard shortcuts for efficient form creation.

The form designer is a drag-drop design tool that lets you quickly build forms:

![Document image](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/7PAT2fp74DZ55Taioa0LI_image.png?format=webp)

 

The left-side catalogs contain available form components and templates.

Templates let you re-use previously saved designs either saved by you or by others. See the [Form Templates](https://help.apiant.com/form-templates?hsLang=en) section for more information. To begin a custom design from scratch, drag and drop one of the container components into the form design area in the middle. Then drag and drop elements from the left side catalog into the containers.

Clicking a container or an element in the design will show that item's attributes on the right side. The design area itself that represents the overall form has attributes for controlling the form submission message text and the text of the default form submit button. Click the form design background to select it and show its attributes:

![Form Attributes](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/hgDyHdcAkNt0utWeTswpZ_image.png?format=webp)

Form Attributes

 

Containers have attributes, such as for centering themselves:

![Centered Container](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/NbP2CGp3RTOEPXm4kpi6z_image.png?format=webp)

Centered Container

 

Elements have an attribute for their names. All element names must be unique within a form. The designer will auto-generate a unique name when an element is placed into the design. Generally you will want to rename elements that receive input so you can easily identify them within the automation. In the below case, this field is best renamed to "first\_name":

![Element Name](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/wrsOc1S_Kp9nHJ-kI7WNq_image.png?format=webp)

Element Name

 

Elements that are resizable have a yellow resize caret icon at their lower right that can be dragged to resize the element:

![Resizing an Element](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/m4nlM3L75iLu3LFiaQmuS_image.png?format=webp)

Resizing an Element

 

The HTML Page element can render frameable content such as a web page, animated gif, or video:

![HTML Page Element](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/4cJnHVDeIPrECmmTI8hf1_image.png?format=webp)

HTML Page Element

 

The Preview link at the top right of the form designer can be used to view how the form will be rendered:

![Form Preview](https://images.archbee.com/Y2QGD8otsIOv4e0hQQnqa/Q-BSfNSg7KECpETG7Ap4q_image.png?format=webp)

Form Preview

 

#### **Keyboard Controls**

When a form element is selected, pressing the Delete key will delete the element.

Pressing the up arrow key will select the item's parent container.

- [ZoomConnect](https://help.apiant.com/zoomconnect?hsLang=en)
- [ShopConnect](https://help.apiant.com/shopconnect?hsLang=en)
- [AppConnect](https://help.apiant.com/appconnect?hsLang=en#main-content)

    - [AppConnectPrebuiltConnectors](https://help.apiant.com/appconnect?hsLang=en#appconnectprebuiltconnectors)
- [CalendarConnect](https://help.apiant.com/calendarconnect?hsLang=en)
- [CRMConnect](https://help.apiant.com/crmconnect?hsLang=en#main-content)

    - [Mindbody to HubSpot](https://help.apiant.com/crmconnect?hsLang=en#mindbody-to-hubspot)
    - [Cliniko to HubSpot](https://help.apiant.com/crmconnect?hsLang=en#cliniko-to-hubspot)
    - [Cliniko to ActiveCampaign](https://help.apiant.com/crmconnect?hsLang=en#cliniko-to-activecampaign)
    - [DonorPerfect to HubSpot](https://help.apiant.com/crmconnect?hsLang=en#donorperfect-to-hubspot)
    - [DonorPerfect to ActiveCampaign](https://help.apiant.com/crmconnect?hsLang=en#donorperfect-to-activecampaign)
    - [Mindbody to ActiveCampaign](https://help.apiant.com/crmconnect?hsLang=en#mindbody-to-activecampaign)
- [MailConnect](https://help.apiant.com/mailconnect?hsLang=en)
- [AutomationEditor](https://help.apiant.com/automationeditor?hsLang=en#main-content)

    - [KeyConcepts](https://help.apiant.com/automationeditor?hsLang=en#keyconcepts)
    - [AccountManagement](https://help.apiant.com/automationeditor?hsLang=en#accountmanagement)
    - [ManagingAutomations](https://help.apiant.com/automationeditor?hsLang=en#managingautomations)
    - [App Connections](https://help.apiant.com/automationeditor?hsLang=en#app-connections)
    - [Building Automations](https://help.apiant.com/automationeditor?hsLang=en#building-automations)
- [APIANTforBuilders](https://help.apiant.com/apiantforbuilders?hsLang=en)
- [APIANTInline](https://help.apiant.com/apiantinline?hsLang=en)
- [WhatisAPIANT?](https://help.apiant.com/whatisapiant?hsLang=en)
- [ContactAPIANTsupport](https://help.apiant.com/contactapiantsupport?hsLang=en)

[![APIANT](https://help.apiant.com/hubfs/APIANT_LOGO-2.svg "APIANT")](http://apiant.com)

apiant.com Help Center

Copyright © 2026, APIANT