Summary

  • Overview
  • Add Form Step
  • Form Step Layout
  • Add Fields To Form Step
  • Switch And Move Form Steps
  • Form Step Tab Options
  • Delete Form Step
  • Stylize Form Step
  • Hide Step Numbers
  • Publish or Preview

Overview

Use the Multi-Step Contact Forms, allowing you to build questionnaires and make communication with users more interactive.

multi-step-contact-forms.gif

Add Form Step

You can Add Form Step to the Contact Form Element by clicking on the Plus icons and then choosing the Add Form Step option.

add-form-step.png

Form Step Layout

You can also switсh the Layout of the Contact Form Element to the Multi-Step Layout in the Property Panel.

form-step-layout.png

Form Step Title

You can add the Title for each Form Step, for example, Goods, Contacts, Delivery, etc., or remove it if you want icons without Text.

form-step-title.png

Add Fields To Form Step

After adding a new Form Step, you can insert Fields separately to each Step from the Add Panel for the Contact Form Element.

add-elements-form-step.png

Switch And Move Form Steps

Click on the Step Tab to select the Contact Form Step. Drag left or right while holding the right mouse button to change the Step Tab order.

form-step-select-switch.gif

Form Step Tab Options

Click the Arrow on the selected Step Tab to open the Options Menu for the current Contact Form Step.

form-step-option-menu.png

Stylize Form Steps

By editing properties in the Property Panel, you can stylize the Multi-Step Contact Form like a regular one.

form-step-style.png

Delete Form Step

You can delete the Contact From Step by pressing the DEL key or clicking the Delete link in the Options Menu.

form-step-delete.png

Hide Step Numbers

Use the Show Slide Numbers property for the Progress Icon for the Multi-Step Contact Form, allowing you to hide the Step Numbers.

show-step-numbers.png

It may be especially useful in the Mobile Views if you have many steps for your Contact Form and Progress does not fit the width of a smaller screen.

show-numbers-responsive.gif

Publish Or Preview

Publish or preview the Multi-Step Contact Form to see its actual look and test the operations.

multi-step-form-publish.gif

Regular validation is also applied to the Multi-Step Contact Forms Field Values.

form-step-field-validation.png

See Also

## Summary - Overview - Add Form Step - Form Step Layout - Add Fields To Form Step - Switch And Move Form Steps - Form Step Tab Options - Delete Form Step - Stylize Form Step - Hide Step Numbers - Publish or Preview ## Overview Use the Multi-Step Contact Forms, allowing you to build questionnaires and make communication with users more interactive. !multi-step-contact-forms.gif! ## Add Form Step You can Add Form Step to the Contact Form Element by clicking on the Plus icons and then choosing the Add Form Step option. !add-form-step.png! ## Form Step Layout You can also switсh the Layout of the Contact Form Element to the Multi-Step Layout in the Property Panel. !form-step-layout.png! ## Form Step Title You can add the Title for each Form Step, for example, Goods, Contacts, Delivery, etc., or remove it if you want icons without Text. !form-step-title.png! ## Add Fields To Form Step After adding a new Form Step, you can insert Fields separately to each Step from the Add Panel for the Contact Form Element. !add-elements-form-step.png! ## Switch And Move Form Steps Click on the Step Tab to select the Contact Form Step. Drag left or right while holding the right mouse button to change the Step Tab order. !form-step-select-switch.gif! ## Form Step Tab Options Click the Arrow on the selected Step Tab to open the Options Menu for the current Contact Form Step. !form-step-option-menu.png! ## Stylize Form Steps By editing properties in the Property Panel, you can stylize the Multi-Step Contact Form like a regular one. !form-step-style.png! ## Delete Form Step You can delete the Contact From Step by pressing the DEL key or clicking the Delete link in the Options Menu. !form-step-delete.png! ## Hide Step Numbers Use the Show Slide Numbers property for the Progress Icon for the Multi-Step Contact Form, allowing you to hide the Step Numbers. !show-step-numbers.png! It may be especially useful in the Mobile Views if you have many steps for your Contact Form and Progress does not fit the width of a smaller screen. !show-numbers-responsive.gif! ## Publish Or Preview Publish or preview the Multi-Step Contact Form to see its actual look and test the operations. !multi-step-form-publish.gif! Regular validation is also applied to the Multi-Step Contact Forms Field Values. !form-step-field-validation.png! ## See Also - [Contact Form Step Progress](page:395984) ##