Multi-step Conditional Form

With Ultimate Addons, you can also create a Multi-step Conditional Form. Here is a demo:

    1

    Step One

    2

    Step Two

    3

    Step Three

    4

    Step Four

    5

    Step Five

    Condition for Field Type: Text

    Write name "John Doe" or "Abul Mia" to test it out


    Condition for Field Type: Dropdown

    Select "Yes" or "No" to test it out


    Condition for Field Type: Radio Buttons

    Select "Option Two" or "Option Three" to test it out



    Condition for Field Type: Checkboxes

    Select "Option Two" or "Option Three" to test it out

    Copy the Sample Code of the Above Form

    [uacf7_step_start uacf7_step_start-680 "Step One"]
    <h4>Condition for Field Type: <strong>Text</strong></h4>
    <p> Write name <strong>"John Doe"</strong> or <strong>"Abul Mia"</strong> to test it out</p>
    <label> Your Name
        [text* text-613] </label>
    
    [conditional namefield]
    <label> Is your Father name Jonathan Doe?
        [select menu-655 include_blank "Yes" "No"] </label><div class="clear"></div><br>
    [/conditional]
    [uacf7_step_end]
    
    [uacf7_step_start uacf7_step_start-681 "Step Two"]
    <h4>Condition for Field Type: <strong>Dropdown</strong></h4>
    <p> Select <strong>"Yes"</strong> or <strong>"No"</strong> to test it out</p>
    <label> Do you have any Physical Address?
        [select* menu-654 include_blank "Yes" "No"] </label>
    
    [conditional address]
    <label> Insert Your Address
        [text text-612] </label><div class="clear"></div><br>
    [/conditional]
    
    [conditional email]
    <label> Insert Your Alternate E-mail
        [email your-email] </label><div class="clear"></div><br>
    [/conditional]
    [uacf7_step_end]
    
    [uacf7_step_start uacf7_step_start-682 "Step Three"]
    <h4>Condition for Field Type: <strong>Radio Buttons</strong></h4>
    <p> Select <strong>"Option Two"</strong> or <strong>"Option Three"</strong> to test it out</p>
    
    <label>Choose your preference</label>
        [radio radio-269 use_label_element default:1 "Option One" "Option Two" "Option Three"]<div class="clear"></div>
    
    [conditional radio]
    <label> Why did you select option two?
         [text text-388] </label><div class="clear"></div><br>
    [/conditional]
    
    [conditional radio-two]
    <label> Why did you select option three?
         [text text-389] </label><div class="clear"></div><br>
    [/conditional]
    [uacf7_step_end]
    
    [uacf7_step_start uacf7_step_start-683 "Step Four"]
    <h4>Condition for Field Type: <strong>Checkboxes</strong></h4>
    <p> Select <strong>"Option Two"</strong> or <strong>"Option Three"</strong> to test it out</p>
    
    <label>Choose your preference</label>
        [checkbox checkbox-266 use_label_element "Option One" "Option Two" "Option Three"] <div class="clear"></div>
    
    [conditional checkbox]
    <label> Why did you select option two?
         [text text-390] </label><div class="clear"></div>
    [/conditional]
    
    [conditional checkbox-two]
    <label> Why did you select option three?
         [text text-391] </label><div class="clear"></div>
    [/conditional]
    [uacf7_step_end]
    
    [uacf7_step_start uacf7_step_start-684 "Step Five"]
    <label> Insert Your E-mail
        [email* your-email-two] </label>
    
    [submit "Submit"]
    [uacf7_step_end]

    Glimpse of Backend Editing Panel (Click to Enlarge)

    30K Celebration Deal!

    Get 50% Off on Lifetime Plans.

    Grab the Deal

    Scroll to Top