Articles on: Components & Elements

Contact Form

Contact Form



You can use a contact form on your builder to let a visitor contact you. This article will cover all the steps and functionalities of the contact form element. Follow all the steps accordingly.

Table of Contents


Getting Started



Adding a Contact Form to your site



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

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

Refer to the GIF below:





Editing the Contact Form Element



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

The Contact Form element editor has the following options:

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

The Contact Form element editor**:**




Form Configuration



This option lets you configure your contact form and make it operational. You can configure it with Email and various platforms that we support, like Zapier, Pabbly, and Integromat.

Refer to the GIF below for the visual demonstration:





Fields



This option lets you enable or disable any field on the contact form.

Refer to the GIF below to see the demonstration:





Form Style



This option lets you stylize the outlook of the contact form. From changing its background color and style to adjusting the gap between the fields.

Refer to the GIF below to see the demonstration:





Input Label Style



This option lets you stylize the input label on the contact form, as marked in the picture below. You change the color and text size and adjust the padding.




Input Field Style



This option lets you stylize the input label on the contact form, as shown in the GIF below. You change the color, and text size, adjust the padding, adjust the input height and change the background.

Refer to the GIF below to see the demonstration:






Button Text Style



This option lets you customise the button's text in your contact form. You can change your button text, add a border around the button, adjust the spacing and alignment etc.




Updated on: 13/05/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!