Getting Started

You can use the Custom Form element on your builder for various purposes. This article will cover all the steps and functionalities of the custom form element. Follow all the steps accordingly.

Adding a Custom Form element to your website

Follow the steps below to add a Custom Form to your site.

- Click on Add Element in an empty row and section
- From the General Elements section, select Custom Form

Refer to the GIF below:

Customizing the Custom Form

Follow the steps and instructions below to add and edit a Custom Form on your site.

The Custom Form element editor has the following options:

- Fields
- Form Styles
- Input Field Styles
- Input Label Styles
- Button Text and Styles
- Form Configuration

The Custom Form element editor:

Fields

With this option, you can add/delete or edit existing fields in your custom form. For demonstration, we will step inside one of the fields and show you the things you can change about a field in your custom form.

Refer to the list below the picture to see the functionalities of each item.




Type: You can choose the type of field you want; it can be text, phone number, email, radio, checkbox, time or date, and more.
Label: Give your field a label so visitors can identify what information they are putting in.
Placeholder: Give it a placeholder text so you can instruct a visitor on how or what information they should input.
Width: With this option, you can change the width of the field.
Name Attribute: Give it a name attribute, which can be used inside an HTML code for various purposes.

More options ⬇️




Require: Choose if this field is mandatory to fill up.
HTML ID: Give the field an HTML ID.
HTML Class: Give the field an HTML Class.
Data Attribute: Give the field a data attribute.

Form Styles

With this setting, you can customize your overall custom form, with features like changing the gap between the fields, adding a background color, etc.

All the settings are demonstrated in the GIF below:

Input Field Styles

With this setting, you can customize the fields in your custom form.

All the settings are demonstrated in the GIF below:

Input Label Styles

With this setting, you can customize the input labels in your custom form, with features like changing the gap between the label and fields, changing the text color, adding a background color, etc.

All the settings are demonstrated in the GIF below:

Button Text and Styles

With this setting, you can customize the submit Button in your custom form.

All the settings are demonstrated in the GIF below:

Form Configuration

Configure your form with this setting, and you can use platforms like Zapier, Integromat, Pabbly Connect, and Airtable to configure your form. All the submissions in your form will be stored on these platforms, and setting them up is very easy.

Refer to the GIF below to see each setting.







Custom Form - Input Fields & Styles

Refer to the YouTube video tutorial below for more details-





N.B: On Checkbox, Radio and Select option should be write like this "Bangladesh=BD". Here, Bangladesh will appear on site and as value you will get BD.



Related articles
Zapier
Integromat / Make.com
Pabbly
Airtable

Updated on: 07/06/2023