Form controls

更新时间:
复制 MD 格式

Create forms to collect information, manage online registrations, or run satisfaction surveys. You can drag and drop controls to build your form without writing code, and then embed the form on your website. This topic explains how to create and publish a form and describes the configuration for each control in the form designer.

Quick start

You can create and publish a form in three steps.

  1. Open the form designer

    1. In the navigation pane on the left of the console, click Form Management.

    2. In the form list, find the target form and click the image button next to it to open the form designer.

  2. Design the form

    Add and configure controls to build the form.

    1. From the control panel on the left, drag controls, such as Input Box and Radio Button, to the canvas.

    2. Select a control on the canvas. The configuration panel for the control appears on the right. In the panel, you can set properties such as the title, hint text, and whether the control is required.

    3. At the top of the designer, you can manage the form page. For example, you can add a new form page, switch templates, or copy the current page.

  3. Publishing to a website

    Embed the form on a webpage so that users can access and complete it.

    1. After you finish designing the form, open the page designer for your website. Find the form component in the component library and add it to the page.

    2. Select the form component. In its configuration items, select the form that you created.

    Note

    If you modify the form, you must re-add the form component in the page designer for the changes to take effect.

Control details

Control

Description

Input box

Collects short, single-line text, such as a name.

Text box

Collects multi-line text, such as comments or descriptions.

Text

Adds a static text description.

Line

Adds a line separator to divide content.

Dropdown

Provides a dropdown menu where users can select one option.

Set the dropdown options before use.

Container

Provides a two-column or three-column layout.

Radio button

Provides multiple options. Users can select only one.

Set the options before use.

Image radio button

A radio button control with images. Each option includes an image and a text description. Users can select only one.

Set the image and text for each option before use.

Checkbox

Provides multiple options. Users can select one or more.

Set the options before use.

Multiple Image Selection

A checkbox control with images. Each option includes an image and a text description. Users can select one or more.

Set the image and text for each option before use.

Number

Restricts input to numbers only. Use this to collect information such as mobile phone numbers or quantities.

Rating

Provides star or number ratings to collect data such as satisfaction scores.

Date

Provides a date picker to collect a specific date.

Upload

Lets users upload files.

Address

Provides cascading selectors for province, city, and district to collect detailed address information.

What to do next