Articles on: Components & Elements

Custom Form

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 the (+) button labeled Add Element or Container within an empty container
- From the Elements tab, select Custom Form

Refer to the GIF below:








Custom Form after it is added


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: 13/05/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!