Multi-step Forms FREE (for Elementor)

Multi-step Forms FREE (for Elementor) simplifies the process of creating multistep forms so easily that it’s as simple as one, two, three.

1. Add the “Multistep Form Basic” widget to your page.
2. Set your page breaks (or where each page should begin) by adding pagebreaks (select from the ‘field type’ dropdown).
3. Add your form questions, and hit save!

Make use of Elementor Pro’s built in functions to send emails, process webhooks, and/or redirect the user after the form is complete, seamlessly integrating the form into the look and feel of your website. From contact, to help forms, we’ve got you covered.

CSS Styling Information for Advanced Users

The following are just a few examples of the CSS classes that you can style. Put all CSS changes in the Advanced > Custom CSS section when editing the widget.
– All button and label text, except for the warning text. “selector .elementor_multistep_free *:not(.multistep-warning) {}”
– Forward button. “selector .elementor_multistep_free .multistep-button-controls-forward {}”
– Backwards button. “selector .elementor_multistep_free .multistep-button-controls-backwards {}”
– Submit button. “selector .elementor_multistep_free .multistep-button-controls .multistep-submit {}”
– All page steps. “selector .elementor_multistep_free .step {}”
– Current page step. “selector .elementor_multistep_free .step.active {}”
– All step super wrapper. “selector .elementor_multistep_free .current-page-tracker {}”
– Space between buttons/steps and last form field on page. “selector .elementor_multistep_free .multistep-button-controls-spacer {}”
– Page. “selector .elementor_multistep_free .page_break_class {}”
– Warning text for failed validation. “selector .elementor_multistep_free .multistep-warning {}”