Enhancing your WordPress forms with conditional logic can significantly improve user experience by displaying relevant fields based on user input. This tutorial will guide you through creating a dynamic franchise inquiry form using Contact Form 7 and its Conditional Fields add-on.

Prerequisites

Ensure the following plugins are installed and activated on your WordPress site:

Step 1: Creating the Form Structure

Navigate to Contact > Add New in your WordPress dashboard and insert the following form code:

<label> Your name
  [text* your-name] </label>

<label> Your email
  [email* your-email] </label>

<label> Subject
  [text* your-subject] </label>

<label> Franchise Model
  [select franchise-model "-- Select Franchise --" "Kiosk Model" "Take Away" "Dining Cafe"]
</label>

[group kiosk]
  <label> Investment
    [select investment "5K" "1Lac"]</label>
[/group]

[group takeaway]
  <label> Investment
    [select investment "2Lac" "3Lac"]</label>
[/group]

[group diningcafe]
  <label> Investment
    [select investment "9Lac" "10Lac"]</label>
[/group]

<label> Your message (optional)
  [textarea your-message rows:5] </label>

[submit "Submit"]

In this structure:

  • The Franchise Model dropdown allows users to select the type of franchise.
  • Based on the selection, the corresponding Investment options appear.MyWebCode

Step 2: Setting Up Conditional Logic

After adding the form code:

  1. Scroll down to the "Conditional fields group" section.
  2. Click on "Add New Conditional Rule".
  3. Set up the following rules:
    • Show kiosk if franchise-model equals Kiosk Model
    • Show takeaway if franchise-model equals Take Away
    • Show diningcafe if franchise-model equals Dining CafeMyWebCode

These rules ensure that only the relevant investment options are displayed based on the user's selection.MyWebCode

Step 3: Configuring Email Notifications

Navigate to the Mail tab and set up your email template as follows:

From: [your-name] <[your-email]>
Subject: [your-subject]
Franchise: [franchise-model]
Investment: [investment]
Message Body:
[your-message]

--
This e-mail was sent from a contact form on [_site_title] ([_site_url])

This configuration ensures that the submitted data is organized and sent to your designated email address.

Final Outcome

With this setup:

  • Users select a franchise model.
  • Based on their choice, specific investment options appear.
  • Upon submission, you receive a structured email containing all relevant details.MyWebCode

This dynamic form enhances user interaction and ensures you collect pertinent information efficiently.

For a visual walkthrough, you can refer to the video tutorial provided in the original article .

If you need further assistance or customization, feel free to ask!

Tags:

Contact Form 7 Php WordPress