Contact Form 7 - Multiple Drop Down Fields With [your-recipient]

Question

I have an interesting issue with this contact form for a client.

• The user selects the state they're from
• A dropdown appears that lets them select an agent from that state that referred them to the company
• Upon hitting submit, the agent that was selected is emailed

I've been doing this with the [your-recipient] tag for Contact Form 7. However, there's four drop down fields and all of them are hidden until the proper state for them is selected.

The issue I'm running into is, the recipient email is always the exact same person and I'm having trouble finding a work around for this. If someone selects Jerry, Bill, Mike or Tom, it's always going to one guy (the first name on the fourth drop down menu).

If a user selects (Other), regardless of state, a textarea appears.

The form format: I'm editing the classes and name/emails to make it simple.

<div id="group1" name="group1" class="hidden">
  <p class="class1">
    Referred By [select your-recipient class:text-1
    "Name1|email1@email.com"
    "Name2|email2@email.com"]
  </p>
</div>
<div id="group2" name="group2" class="hidden">
  <p class="class2">
    Referred By [select your-recipient class:text-1
    "Name1|email1@email.com"
    "Name2|email2@email.com"]
  </p>
</div>
<div id="group3" name="group3" class="hidden">
  <p class="class3">
    Referred By [select your-recipient class:text-1
    "Name1|email1@email.com"
    "Name2|email2@email.com"]
  </p>
</div>
<div id="group4" name="group4" class="hidden">
  <p class="class4">
    Referred By [select your-recipient class:text-1
    "Name1|email1@email.com"
    "Name2|email2@email.com"]
  </p>
</div>
<div id="groupother1" name="groupother1" class="hidden">
  <div class="editedout">
    <div class="holdup">
    Hold up! You selected Other. Please review the Referred By list above to be sure your contact isn't listed. If not, we would love to hear how you heard about us.
    </div>
    [textarea textarea-629 class:groupother class:text-1 placeholder "How did you hear about us or find us?"]
  </div>
</div>
[submit class:submit "Submit"]

The email output

First Name: [text-761]
Last Name: [text-875]
Street: [text-61]
City: [text-62]
State: [menu-817]
Zip: [text-64]
Email Address: [text-150]
Phone Number: [text-160]
Occupation: [text-162]
Referred By: [_raw_your-recipient] - [your-recipient]

Basically, every single recipient email is going to Name1 from Group 4, no matter who is selected.

Answer 1

It's because you have 4 select fields with the same name and when you hide it with css it is still visible for browsers in html. Try with one drop down and populate it using javascript when state is selected.