Advanced Form

Multi Steps and Conditional Logic

This is a demo of advanced form with multi steps and conditional logic capability created using Advanced Form Builder by Alex Iglesias. A big applause for this valuable tool shared for free.

View Demo

Advanced Form Builder Tool

Enquiry Form

Kindly provide the information below and we will get back to you at the speed of light.

This is a demo of advanced form.

In this demo form, I have tried to squeeze in as much feature as possible from the Advanced Form Builder by Alex Iglesias. This includes the features within the multi steps and conditional logic. You should try to get some hands-on too as practice always make things better. 😉

Here's a quick list of what has been implemented in this demo:

Alert Element
Back Button
Display Completed %
Custom Nav Links
Display Filled Values
Global Options
Next Button Text
Conditional Logic with Hide/Show and Required/Unrequired

Step 1

Personal Details

Full Name *

Contact Number

or *

* Please provide either one of the contact details above.

Is the contact number provided above linked with Whatsapp?

YesNo

Step 2

Enquiry Details

Describe your enquiry

Step 3

Additional Remarks

Your message

Step 4

Review

Kindly verify the the information that you have provided below are correct before submitting.

Personal Details

Full Name

N.A.

Contact Number

N.A.

Whatsapp Availability

N.A.

Enquiry Details

Type of enquiry

N.A.

Describe your enquiry

N.A.

Additional Remarks

Your message

N.A.

I confirmed that the information that I have provided above are correct and the administrator can do whatever they want with it. *
Just kidding. This is just a dummy checkbox. Don't worry. No legal stuff involved here. You can safely try submitting this demo form. 😂

Please ensure that all required fields marked with asterisk (*) have been completed.

Back

Bwahahahahaha!!!!

We have successfully captured your information!
Now we can blackmail you!
😈😈😈

Again, just kidding.

Oops! Something went wrong while submitting the form.

How to clone into other project?

Press "Ctrl + E" or "Cmd + E" in the Designer and enable "Select on-page element".
Search for the class named, "Cloneable Area".
Copy the element inside this container to your own project.
Rename the classes accordingly if they are clashing with your project.
Ensure custom code from the in-page setting has been copied into your project as well (if there's any).
'Page Trigger' interaction can't be copied directly. You can only clone the whole project, or rebuild it.
A simple trick to copy the 'Page Trigger' interaction into another project is as below:

1. Create a dummy element.
2. Apply any type of 'Element trigger' into the dummy element and select the 'Page Trigger' animation.
3. Copy the dummy element with the animations applied into your new project.
4. The animation should have been copied into your project and you can reapply the 'Page Trigger' animation into your project.
If you have further inquiry or need assistance, feel free to contact us.
Lastly, please do not copy this project and claim it as your own. We wish to continue sharing and giving to the community. In order to do so, we will need your cooperation and full support. Thank you very much,

Support Us

Need help?