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.

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

* Please provide either one of the contact details above.
Step 2

Enquiry Details

Step 3

Additional Remarks

Step 4


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

Personal Details


Enquiry Details


Additional Remarks

Please ensure that all required fields marked with asterisk (*) have been completed.
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,