Contact Sandbox

Pro 2.10.3 Multi-Step Forms With Lottie Icons

Two Col Layout Example

Desktop Only

Let's start with your name.

What is an email to be contacted at.

Phone number to be reached.

Sample Email Template

Hi Chris, [field id=”name”] would like you to reach them at.
Email Address [field id=”contact_email”]
Phone Number [field id=”contact_phone”]

CSS Used To Put Steps On Bottom.

.flipform .elementor-form {
display: flex;
flex-direction: column-reverse;
}

.flipform .e-form__indicators–type-number_text {
padding-top: 1.618em;
}

.flipform .e-form__indicators__indicator__progress {
margin-top: 13px;
}


Note: This will cause the success message to display at the top of the form. You may wish to use a different action after submissions such as a redirect, or pop-up if this bothers you.

Forms With Lottie Icons No Steps

Let's start with your name.

What is an email to be contacted at.

Phone number to be reached.

Step Templates Used

Put the shortcode of these in the form HTML widget.

Let's start with your name.

What is an email to be contacted at.

Phone number to be reached.

Lottie Icons Used

These were made in Ae with Font Awesome Pro Icons and Exported with Bodymovin Extension to JSON.