Contact Form

Contact Form

Welcome to the “Contact Form” documentation. Looking to integrate a contact form into your website? Our widget makes it easy for your website visitors to get in touch with you. In this guide, we'll show you how to use the editor to customize your contact form widget.

Step 1 : Open the Editor
Step2 : Edit Contact Form Content
Step 3 : Customize Form's Style and Colors
Step 4 : Adjust the Layout
Step 5: Preview





Step 1 : Open the Editor

1. Go to Contact From template.
2. Click on "Edit" after choosing your template.




Step 2 : Edit Contact Form Content

1. To customize the  form's content, simply click the "Edit Form" button.




2. In the "Form Editor" tab, you can modify the header and choose your contact inputs to your liking.
To add more inputs, click on the “+” icon or the "Add Input" button, then select your choice from the pop-up that appears. You can also modify the placeholder, label and help texts.
To remove an input, simply click on the delete icon.



f



3. To create a two-section contact form, click on the menu icon and activate the inline toggle.





4. In each input menu, you have the option to customize its settings as needed:
When you pick validation, you can decide if your input must be filled in or not. You can also write a message for the required input. There are other validations that vary for different inputs.
In the settings, you can assign a name that's visible only to you, used as an ID. Additionally, you can choose to show or hide the input label and help text.






5. When it comes to the button, you can choose its placement.






6. Then, you can edit the thank you page text.





7. Once you're done, add your conditions. Then click "Close" to exit the popup and proceed to other configurations.
To learn more about the conditions, simply check out our Form Conditions Documentation.






Step 3: Customize Form's Style and Colors

1. Within this panel, you have the ability to modify the form's style. You can choose whether it should be right-to-left or not, adjust its rounded, and even reposition the button as needed.
You will also choose colors that harmonize with your website.






Step 4 : Adjust the Layout

In the Layout panel, you can adjust how your layout looks and behaves. You have control over things like size, rounding, width, popup position, adding an overlay, choosing how it's displayed, and even adding animations.





  • To switch from the section view to the popup view, just activate the popup and the closable toggle. After that, you can select its position on the page.





  • The overlay only functions within the popup when the horizontal position is set to the middle and the vertical position is set to the center.






    • Step 5 : Preview

    Lastly, you can click on “Preview” to see how your popup or section contact form looks on both desktop and mobile devices. After this, you can proceed to the next step.




    For further information on configuring triggers, please navigate to the Widget Triggers section.

    Related Articles:
    Subscription Form Inetgrations