Step 3: Choose Form Layout & Customize Appearance

Now that your form is set up and ready to go, let’s make sure it looks and behaves just the way you want on your website. In this step, you'll learn how to choose your form’s layout, customize its appearance, and make it align perfectly with your brand.

Embed Types & Layouts

The Layout tab lets you choose between two ways to display your form:

• Inline – the form is embedded directly into your page’s content. Good for contact, feedback, or sign-up forms that you want users to see right away, without extra clicks.
• Floating Pane – the form appears in a pane that slides in over your website, either from the left or right. Great for popups or contact panels!

Inline Form

If you'd like your form to appear directly within your page’s content, choose the Inline option in the Layout tab:

The Form Width setting lets you adjust the width of your form on the page. You can either drag the slider to set a custom width (from 100px up to 1200px) or enable Full Width to make the form stretch across its container:

In the Form Layout section, you can also choose how to arrange your form fields – vertically, horizontally, or as a multistep form:

Floating Pane

Want your form to slide in and grab attention without taking up space on your page? Select the Floating Pane option in the Layout tab:

In this layout, you can adjust:

• Pane Position – choose which side of the screen your form will appear from – right or left.
• Form Width – adjust the width of the floating pane.
• Pane Reopen Button – allow visitors to reopen the form after closing it. You can customize the icon, add button text, and position it anywhere on the screen:

Just like in the Inline option, the Form Layout section lets you choose whether your form fields are stacked vertically or split into multiple steps. For a deeper look at the Multistep Form settings, check out the section below.

Multistep Form

Multistep forms let you break up long forms into simpler steps, making them easier to fill out and improving completion rates—ideal for surveys, bookings, and forms with multiple fields.

To enable it, select Multistep in the Form Layout section. Your form will instantly be split into two steps. You can add more pages, name them, and organize the fields on each page in the Build Form tab:

Customize Colors, Fonts, and More

Use the Appearance tab to make your form match your website's style. You can customize the overall look of the widget as well as fine-tune fonts and colors for specific elements.

For example, you can choose a Light or Dark Color Scheme to match your site, set an Accent Color for buttons and links, select a Font, and apply a template to your form fields to control their shape, borders, and overall look:

For full control over your form’s design, use the Customize Elements section. The available settings may vary depending on the layout you choose:

Here, you can tweak every aspect of your form, like Background, Header, Form Fields, Pane Reopen Button for floating forms, or Progress Bar for multistep layout. Adjust colors, sizes, spacing, button shapes, and more for each element:

Need even more customization? You can add your own CSS in the Custom CSS section. For extra styling ideas, visit our community post with handy CSS codes 😊

That’s it for customizing your form’s layout and appearance! Take a moment to preview your changes and ensure your form blends seamlessly with your website.