Embedding a Form on Your Website: A Step-by-Step Guide

Adding a form to your website is a straightforward task. First, find the form element within your website editor and drag it to your preferred location on the page. You can either choose an existing form or create a new one.

Once the form is in place, customize its layout and features to align with your website’s design and ensure a smooth user experience.

Basic Settings

• Element Labeling:
  In the editing menu, typically located on the right side of the screen, you can easily change the default name of the element. This allows you to manage and organize your page more efficiently while creating your website funnel.
  
  

Adjusting Spacing: You can modify the spacing of the content around your form using the spacing tools. These options allow you to tweak only the section you are currently editing. Adjust the margins or padding on all sides (top, bottom, left, and right) to position your form exactly how you want it.

• Padding Adjustment: This option lets you shift the content to the left, right, top, or bottom.
• Margin Adjustment: You can change the top or bottom margins to adjust the vertical positioning of your form.

Form Customization: 
At any point, you can swap out the existing form for another by using the drop-down menu in the Form section.

Editing the Form: 
To make changes, click on the “Edit Form” button. This opens a new tab where you can adjust form fields, settings, and layout. After saving your edits, refresh your page to view the changes within the website builder.

Button Actions and Redirects: 
The form’s submit button can be customized to trigger various actions, such as opening a URL, moving to the next page in the funnel, or using other form submission options.

Advanced Options

• Visibility Settings:
  Choose whether you want the form to be visible on mobile devices, desktops, or both by selecting the appropriate icon in the visibility section.

• Custom Class:
  If you need to add a custom class for CSS, you can type the class name directly into the "Custom Class" field.

• CSS Selector:
  For easy access to a CSS selector, simply click the copy icon next to the reference number you want. This helps speed up your workflow.

By following these steps, you can efficiently integrate and manage forms on your website, making the process smooth and straightforward for both you and your site visitors.