Get a Quote

Multistep Form – Bilal

    ================================================================================
    CONTACT FORM 7 - MULTISTEP QUOTE FORM CODE
    ================================================================================

    This code goes into Contact Form 7's "Form" tab in the WordPress admin panel.

    IMPORTANT: This is the basic structure. You'll need to:
    1. Install a multistep form plugin or create custom CSS/JS
    2. Add CSS for card styling
    3. Add JavaScript for step navigation and postcode lookup
    4. Install conditional fields plugin or add custom conditional logic

    ================================================================================
    FORM CODE (paste into CF7 form editor):
    ================================================================================

    Which of these best describes your property?

    [radio property_type default:blank "Detached" "Semi-Detached" "Terrace" "Flat" "Bungalow" "Commercial or small office" class:card-option]

    Do you have permission to carry out work on your flat?

    [radio flat_permission default:blank "Yes" "No" class:card-option]

    Are any of your flat's walls accessible from the outside?

    [radio flat_wall_access default:blank "Yes" "No" class:card-option]

    Is your bungalow on one or two floors?

    [radio bungalow_floors default:blank "One Floor" "Two Floor" class:card-option]

    Commercial Units type

    [radio commercial_unit_type default:blank "Wall Mounted Units" "Concealed Ducted Systems" "Ceiling Cassette" class:card-option]

    Which room or area do you want air conditioned?

    [radio room_area default:blank "Living Room" "Bedroom" "Loft or Attic" "Kitchen" "Open Plan Area" "Conservatory" "Garden Office Room" "Somewhere Else" "1+" class:card-option]

    How many units?

    [radio num_units default:blank "1" "2" "3" "4" "5" "6" "7" "8+" class:card-option]

    Which floor is the room or area on?

    [radio floor_location default:blank "Basement" "Ground" "1st Floor" "2nd or 3rd Floor" "4th Floor" class:card-option]

    How large is the room or area you want air conditioned?

    [radio room_size default:blank "6-15m²" "16-34m²" "35-49m²" class:card-option]

    What type of wall will the indoor unit be on?

    [radio indoor_wall_type default:blank "Internal Wall" "External Wall" class:card-option]

    How do you want your outdoor unit to be fitted?

    [radio outdoor_unit_position default:blank "Wall mounted low (below 2m)" "Wall mounted high (2-4m)" "On the floor/ground" class:card-option]

    How far away will the outdoor unit be from the indoor unit?

    [radio outdoor_distance default:blank "3 to 5 metre" "6 to 15 metre" "16 to 30 metre" class:card-option]

    How much space is there where you want the outdoor unit fitted?

    [radio outdoor_space default:blank "More than 2.5 metre" "Less than 2.5 metre" class:card-option]

    Do you currently have an external power socket near the outdoor unit location?

    [radio has_power_socket default:blank "Yes" "No" class:card-option]

    How did you hear about us ?

    [radio heard_about_us default:blank "Social Media" "Friends & Family" "Google" class:card-option]

    Finally, enter your post code?

    We use this to assign you a local installer (make sure you enter the right one, or you'll have to go back and change it later)

    [text postcode placeholder "e.g SW5" class:postcode-input]

    Your quote options are now available

    To display your AC choices & prices, we simply require the below information:

    [text first_name placeholder "Enter First Name" required class:form-field]
    Please enter your first name.

    [text last_name placeholder "Enter Last Name" required class:form-field]
    Please enter your last name.

    [email email_address placeholder "Enter Email Address" required class:form-field]
    Please enter your email address.

    [tel phone_number placeholder "Enter Phone Number" required class:form-field]
    Please enter valid phone number.

    Our promise to you:

    • We promise we won't inundate you

    • We'll keep it relevant

    • We'll never share your details

    I agree with and <a href='/terms-conditions/'>terms conditions</a> <a href='/privacy-policy/'>privacy policy.</a>
    Please confirm the checkbox above.


    [button class:back-btn "← Back"]
    [button class:next-btn "Next →"]

    ================================================================================
    IMPORTANT NOTES:
    ================================================================================

    1. RADIO BUTTON STYLING:
    The default CF7 radio buttons need to be styled as cards with CSS.
    Each card should show as a box with icon and label.

    2. CONDITIONAL LOGIC:
    The data-condition attributes require either:
    - CF7 Conditional Fields plugin
    - OR custom JavaScript to handle show/hide logic

    3. POSTCODE LOOKUP:
    The search button requires custom JavaScript to:
    - Validate postcode format
    - Call a postcode API (UK PAF data)
    - Populate address dropdown
    - Show/hide address selection area

    4. STEP NAVIGATION:
    Back/Next buttons require custom JavaScript to:
    - Track current step
    - Validate before advancing
    - Show/hide step divs
    - Persist form data

    5. SUBMISSION:
    The final submit button needs to be configured in CF7 settings:
    - Email recipient
    - Email subject
    - Success message
    - Redirect URL (optional)

    ================================================================================