Conditioned fields not working with Multi-Step form plugin
-
I’m using the Conditional Fields for Contact Form 7 plugin to filter out unqualified candidates on my application. The form is working fine however, all the conditioned fields (step two of my form) do not arrive rendered correctly to my inbox. Any ideas on how to fix this issue?
Thanks!
The page I need help with: [log in to see the link]
-
which multistep plugin are you using?
I have tested and verified that this plugin is working with CF7CF several times. Could you please share the form code of step 2, the conditions you use, and the relevant part of the email message that doesn’t arrive rendered? (both the mail form and the actual email message)
Ok so here are all the details:
My form is a job application that you can see and test here: https://gleam.guru/apply/
The conditional fields are used on step two of the form and I want to use them to filter out all unqualified candidates. Here is the code I’m using:
<div class="col-sm-12"> <div class="row"> <div class="col-sm-6"> <label>Do you have paid cleaning experience?</label> [select* requirement-experience "---" "Yes" "No"] </div> [group requirement-experience-nulled] <div class="col-sm-6"> <p> </p> </div> [/group] [group requirement-experience-no] <div class="col-sm-6"> <p> </p> </div> [/group] [group requirement-experience-yes] <div class="col-sm-6"> <label>How much paid cleaning experience do you have?</label> [select* ic-experience "0 - 6 months" "6 months - 1 year" "1 year - 3 years" "3 years - 5 years" "5+ years"] </div> [/group] </div> </div> [group requirement-experience-no] <div class="col-sm-12"> <div class="alert bg--error"> <div class="alert__body"> <span class="type--fine-print"><strong>We're sorry.</strong> You need to have some paid cleaning experience to be able to join our platform. We're currently working on an online certification program for people looking to become professional cleaners. Visit <a href="https://maid.academy/" target="_blank">Maid Academy</a> for more info.</span> </div> </div> </div> [/group] [group requirement-experience-yes] <div class="col-sm-12"> <div class="col-sm-12"> <label>Tell us a little about your experience:</label> [textarea* ic-experience-details x5] </div> </div> <div class="col-sm-12"> <div class="row"> <div class="col-sm-6"> <label>Do you own a smartphone with a text & data plan?</label> [select* requirement-smartphone "---" "Yes" "No"] </div> [group requirement-smartphone-nulled] <div class="col-sm-6"> <p> </p> </div> [/group] [group requirement-smartphone-no] <div class="col-sm-6"> <p> </p> </div> [/group] [group requirement-smartphone-yes] <div class="col-sm-6"> <label>Mobile Phone Number:</label> [tel* ic-cell class:phoneUS] </div> [/group] </div> </div> [group requirement-smartphone-no] <div class="col-sm-12"> <div class="alert bg--error"> <div class="alert__body"> <span class="type--fine-print"><strong>We're sorry.</strong> You need to own a smartphone with a text & data plan to be able to join our platform.</span> </div> </div> </div> [/group] [group requirement-smartphone-yes] <div class="col-sm-12"> <div class="row"> <div class="col-sm-6"> <label>Do you have your own vacuum and cleaning supplies?</label> [select* requirement-supplies "---" "Yes" "No"] </div> [group requirement-supplies-nulled] <div class="col-sm-6"> <p> </p> </div> [/group] [group requirement-supplies-no] <div class="col-sm-6"> <p> </p> </div> [/group] [group requirement-supplies-yes] <div class="col-sm-6"> <label>Do you have reliable transportation to commute to jobs?</label> [select* requirement-transportation "---" "Yes" "No"] </div> [/group] </div> </div> [group requirement-supplies-no] <div class="col-sm-12"> <div class="alert bg--error"> <div class="alert__body"> <span class="type--fine-print"><strong>We're sorry.</strong> You need to have your own vacuum and cleaning supplies to be able to join our platform.</span> </div> </div> </div> [/group] [group requirement-supplies-yes] [group requirement-transportation-no] <div class="col-sm-12"> <div class="alert bg--error"> <div class="alert__body"> <span class="type--fine-print"><strong>We're sorry.</strong> You need to have reliable transportation to be able to join our platform.</span> </div> </div> </div> [/group] [group requirement-transportation-yes] <div class="col-sm-12"> <div class="row"> <div class="col-sm-6"> <label>Do you have PayPal account?</label> [select* requirement-paypal "---" "Yes" "No"] </div> [group requirement-paypal-nulled] <div class="col-sm-6"> <p> </p> </div> [/group] [group requirement-paypal-no] <div class="col-sm-6"> <p> </p> </div> [/group] [group requirement-paypal-yes] <div class="col-sm-6"> <label>PayPal email account:</label> <span class="type--fine-print text-blue text-right" data-tooltip="Use the PayPal account where you'll like us to send your payments.">Important!</span> [email* ic-paypal] </div> [/group] </div> </div> [group requirement-paypal-no] <div class="col-sm-12"> <div class="alert bg--error"> <div class="alert__body"> <span class="type--fine-print"><strong>We're sorry.</strong> You need to have a PayPal account to be able to join our platform. We use PayPal to pay all our cleaners.</span> </div> </div> </div> [/group] [group requirement-paypal-yes] <div class="col-sm-12"> <div class="row"> <div class="col-sm-6"> <label>Are you legally eligible to work in the U.S.?</label> [select* requirement-useligible "---" "Yes" "No"] </div> [group requirement-useligible-nulled] <div class="col-sm-6"> <p> </p> </div> [/group] [group requirement-useligible-no] <div class="col-sm-6"> <p> </p> </div> [/group] [group requirement-useligible-yes] <div class="col-sm-6"> <label class="text-green"><strong>Congratulations! You are eligible to join.</strong></label> [submit class:btn class:btn--primary "Continue"] </div> [/group] </div> </div> [group requirement-useligible-no] <div class="col-sm-12"> <div class="alert bg--error"> <div class="alert__body"> <span class="type--fine-print"><strong>We're sorry.</strong> You need be legally eligible to work in the U.S. to be able to join our platform.</span> </div> </div> </div> [/group] [/group] <!–– END requirement-paypal-yes ––> [/group] <!–– END requirement-transportation-yes ––> [/group] <!–– END requirement-supplies-yes ––> [/group] <!–– END requirement-smartphone-yes ––> [/group] <!–– END requirement-experience-yes ––> [multistep "2-6-https://gleam.guru/apply/personal-info/"]
Screenshot of the conditions:
https://gleam.guru/screenshots/screen2.jpgScreenshot of the email missing the conditional fields:
https://gleam.guru/screenshots/screen1.pngAll other fields are coming in correctly.
Thanks!
Looks like you have multiple groups with the same name. It’s possible that this could work, but this is an untested usage of conditional fields. – See if you can make it work by making all group and field names unique.
Also, very nice form, but it might be a bit big to work correctly with the multistep plugin. Since the multistep plugin passes paramaters by cookies it is has some limitations. – See if this is the case by simply disabling CF7CF and submit the exact same form. (just ignore all the group tags that will be all over the place.)
- This reply was modified 6 years, 10 months ago by Jules Colle.
Oh and please also share your email code
Hey Jules thanks for checking it our for me.
I did another test by deleting the duplicate field group I had for the first conditional field but it still didn’t arrived rendered correctly.
I don’t think this a cookie limitation of the multistep plugin since all other fields are coming in correctly. It’s just the conditionals one that are not arriving correctly. I went ahead and did a test disabling CF7C and all fields came in perfectly fine.
Here is email code by the way:
[ic-fname] [ic-lname] [ic-email] [USZipCode] Experience: [ic-experience] Experience details: [ic-experience-details] Cell: [ic-cell] PayPal Email: [ic-paypal] T-shirt size: [ic-tshirt-size] T-shirt preference: [ic-tshirt] Address: [ic-address] 1. [ic-quiz-1] 2. [ic-quiz-2] 3. [ic-quiz-3] 4. [ic-quiz-4] 5. [ic-quiz-5] 6. [ic-quiz-6] 7. [ic-quiz-7] 8. [ic-quiz-8] 9. [ic-quiz-9] 10. [ic-quiz-10] 11. [ic-quiz-11] 12. [ic-quiz-12] 13. [ic-quiz-13] 14. [ic-quiz-14] 15. [ic-quiz-15] 16. [ic-quiz-16] 17. [ic-quiz-17] 18. [ic-quiz-18] 18. [ic-quiz-19] Bg check fee: [ic-bgc-fee] Bg check consent: [ic-bgc-consent] Bg check disclosure: [ic-bgc-disclosure] Document: [ic-id-type]
I don’t see any ic-quiz fields in the form you posted. In order for me to completely reproduce the problem I would need 3 things from you
1. the entire form code (of all the forms)
2. the email code
3. the conditions used per formAlso, could you, instead of pasting enormous chunks of data, simplify the problem with as few fields as possible, to illustrate the problem?
I have had the same issue with the free version. My multi-step form has 5 steps:
- Step 1 – 0 conditional fields – works
- Step 2 – 3 conditional fields – works
- Step 3 – 7 conditional fields – does not work
- Step 4 – 8 conditional fields – does not work
- Step 5 – 2 conditional fields – works
I have removed the conditional tests so the “hidden” fields now always display and everything works fine.
- The topic ‘Conditioned fields not working with Multi-Step form plugin’ is closed to new replies.