Support » Plugin: Conditional Fields for Contact Form 7 » google recaptcha doesn’t work

  • Resolved ironlion37

    (@ironlion37)


    Hi,

    Contact form 7 supports google’s recaptcha. When I place the recaptcha code inside of a [group][/group], it does not appear in the form. If I place before any [group] tags it does appear successfully. Any tips on getting this to work?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Jules Colle

    (@jules-colle)

    thanks for reporting this. i will check soon

    Thread Starter ironlion37

    (@ironlion37)

    Ok, I can leave the live example I have up over the weekend if you want to check it out:

    https://jamescenterparking.com/new-accounts/

    I found that the captcha is showing under Yes > Individual > Tower I – but is not affecting the submissions.

    Here’s the form code:

    Is your place of work at the James Center?
    [radio radio-381 "Yes" "No"]
    
    [group workatJamesCenter]
    
    Is this an Individual or Group account setup?
    [radio radio-382 "Individual" "Group"]
    
    [group individual]
    <hr/>
    Location (please choose one):
    [radio radio-383 "Tower I - Reserved Space" "Tower II - Unreserved Space" "Canal Street Surface Lot"]
    [group tenants-individual]
    <h3>Individual Account</h3>
    <label> First Name<span class="required">*</span>
        [text* first-name-1] </label>
    <label> Last Name<span class="required">*</span>
        [text* last-name-1] </label>
    <label> Company / Organization<span class="required">*</span>
        [text* company-1] </label>
    <label> Cell Phone
        [tel tel-603] </label>
    <label> Work Phone<span class="required">*</span>
        [tel* tel-604] </label>
    <label> Your Email<span class="required">*</span>
        [email* your-email-1] </label>
    <label> Building Access Card #<span class="required">*</span>
        [text* building-access-card-1] </label>
    
    Mailing Address:
    <label> Attention<span class="required">*</span>
        [text* attention-1] </label>
    <label> Street 1<span class="required">*</span>
        [text* street-1-1] </label>
    <label> Street 2 
        [text street-2-1] </label>
    <label> City<span class="required">*</span>
        [text* city-1] </label>
    <label> State<span class="required">*</span>
        [text* state-1] </label>
    <label> Zip<span class="required">*</span>
        [text* zip-1] </label>
        
    Start Date<span class="required">*</span>:
    [date* date-814]
    <br/>
    <div class="g-recaptcha" data-sitekey="6LcBARsUAAAAALelm13d0TQc9A_1yEZl0jOa4ymO"></div>
    [submit "Submit"]
    [/group]
    [/group]
    
    [group group]
    <hr/>
    Is this an addition to an existing account?
    [radio radio-384 "Yes" "No"]
    [group existing-account]
    <label> Company / Organization<span class="required">*</span>
        [text* company] </label>
    
    <h2>List Parkers:</h2>
    <div class="add-parkers-desc">Add up to 5 parkers below. For more than 5, please <a href="/downloads/Parking-List.xlsx">download and fill out this spreadsheet</a> and mail to JamesCenter@cityparkingonline.com.</div><br>
    <div id="parker-content-box-a">
    <div class="start-date-desktop">Start Date</div>
    Parker #1<span class="required">*</span>
    <div class="parkers">
    	<div class="input-field">[text* parker-1-first-name  placeholder "First Name"]</div><div class="input-field">[text* parker-1-last-name placeholder "Last Name"]</div><div class="input-field">[email* parker-1-email placeholder "Email"]</div><div class="input-field">[text* parker-1-card-access-number placeholder "Building Access Card #"]</div><div class="input-field"><span class="start">Start Date:<br></span>[date* parker-1-start-date placeholder "Start Date"]</div><div style="clear: both;"></div>
    </div>
    <div class="parkers">
    Parker #2
    	<div class="input-field">[text parker-2-first-name  placeholder "First Name"]</div><div class="input-field">[text parker-2-last-name placeholder "Last Name"]</div><div class="input-field">[email parker-2-email placeholder "Email"]</div><div class="input-field">[text parker-2-card-access-number placeholder "Building Access Card #"]</div><div class="input-field"><span class="start">Start Date:<br></span>[date parker-2-start-date placeholder "Start Date"]</div><div style="clear: both;"></div>
    </div>
    <div class="parkers">
    Parker #3
    	<div class="input-field">[text parker-3-first-name  placeholder "First Name"]</div><div class="input-field">[text parker-3-last-name placeholder "Last Name"]</div><div class="input-field">[email parker-3-email placeholder "Email"]</div><div class="input-field">[text parker-3-card-access-number placeholder "Building Access Card #"]</div><div class="input-field"><span class="start">Start Date:<br></span>[date parker-3-start-date placeholder "Start Date"]</div><div style="clear: both;"></div>
    </div>
    <div class="parkers">
    Parker #4
    	<div class="input-field">[text parker-4-first-name  placeholder "First Name"]</div><div class="input-field">[text parker-4-last-name placeholder "Last Name"]</div><div class="input-field">[email parker-4-email placeholder "Email"]</div><div class="input-field">[text parker-4-card-access-number placeholder "Building Access Card #"]</div><div class="input-field"><span class="start">Start Date:<br></span>[date parker-4-start-date placeholder "Start Date"]</div><div style="clear: both;"></div>
    </div>
    <div class="parkers">
    Parker #5
    	<div class="input-field">[text parker-5-first-name  placeholder "First Name"]</div><div class="input-field">[text parker-5-last-name placeholder "Last Name"]</div><div class="input-field">[email parker-5-email placeholder "Email"]</div><div class="input-field">[text parker-5-card-access-number placeholder "Building Access Card #"]</div><div class="input-field"><span class="start">Start Date:<br></span>[date parker-5-start-date placeholder "Start Date"]</div><div style="clear: both;"></div>
    </div>
    </div>
    
    <br/>
    <div class="g-recaptcha" data-sitekey="6LcBARsUAAAAALelm13d0TQc9A_1yEZl0jOa4ymO"></div>
    [submit "Submit"]
    [/group]
    [group new-account]
    <br/>
    <h2>New Account</h2>
    <hr/>
    <p>Please enter your contact information here.</p>
    <label> First Name<span class="required">*</span>
        [text* first-name-2] </label>
    <label> Last Name<span class="required">*</span>
        [text* last-name-2] </label>
    <label> Company / Organization<span class="required">*</span>
        [text* company-2] </label>
    <label> Cell Phone
        [tel tel-605] </label>
    <label> Work Phone<span class="required">*</span>
        [tel* tel-606] </label>
    <label> Your Email<span class="required">*</span>
        [email* your-email-2] </label>
    
    Mailing Address:
    <label> Attention<span class="required">*</span>
        [text* attention-2] </label>
    <label> Street 1<span class="required">*</span>
        [text* street-1-2] </label>
    <label> Street 2 
        [text street-2-2] </label>
    <label> City<span class="required">*</span>
        [text* city-2] </label>
    <label> State<span class="required">*</span>
        [text* state-2] </label>
    <label> Zip<span class="required">*</span>
        [text* zip-2] </label>
    
    <br/>
    <hr/>
    <h2>List Parkers:</h2>
    <div class="add-parkers-desc">Add up to 5 parkers below. For more than 5, please <a href="/downloads/Parking-List.xlsx">download and fill out this spreadsheet</a> and mail to JamesCenter@cityparkingonline.com.</div><br>
    <div id="parker-content-box-b">
    <div class="start-date-desktop">Start Date</div>
    Parker #1<span class="required">*</span>
    <div class="parkers">
    	<div class="input-field">[text* parker-6-first-name  placeholder "First Name"]</div><div class="input-field">[text* parker-6-last-name placeholder "Last Name"]</div><div class="input-field">[email* parker-6-email placeholder "Email"]</div><div class="input-field">[text* parker-6-card-access-number placeholder "Building Access Card #"]</div><div class="input-field"><span class="start">Start Date:<br></span>[date* parker-6-start-date placeholder "Start Date"]</div><div style="clear: both;"></div>
    </div>
    <div class="parkers">
    Parker #2
    	<div class="input-field">[text parker-7-first-name  placeholder "First Name"]</div><div class="input-field">[text parker-7-last-name placeholder "Last Name"]</div><div class="input-field">[email parker-7-email placeholder "Email"]</div><div class="input-field">[text parker-7-card-access-number placeholder "Building Access Card #"]</div><div class="input-field"><span class="start">Start Date:<br></span>[date parker-7-start-date placeholder "Start Date"]</div><div style="clear: both;"></div>
    </div>
    <div class="parkers">
    Parker #3
    	<div class="input-field">[text parker-8-first-name  placeholder "First Name"]</div><div class="input-field">[text parker-8-last-name placeholder "Last Name"]</div><div class="input-field">[email parker-8-email placeholder "Email"]</div><div class="input-field">[text parker-8-card-access-number placeholder "Building Access Card #"]</div><div class="input-field"><span class="start">Start Date:<br></span>[date parker-8-start-date placeholder "Start Date"]</div><div style="clear: both;"></div>
    </div>
    <div class="parkers">
    Parker #4
    	<div class="input-field">[text parker-9-first-name  placeholder "First Name"]</div><div class="input-field">[text parker-9-last-name placeholder "Last Name"]</div><div class="input-field">[email parker-9-email placeholder "Email"]</div><div class="input-field">[text parker-9-card-access-number placeholder "Building Access Card #"]</div><div class="input-field"><span class="start">Start Date:<br></span>[date parker-9-start-date placeholder "Start Date"]</div><div style="clear: both;"></div>
    </div>
    <div class="parkers">
    Parker #5
    	<div class="input-field">[text parker-10-first-name  placeholder "First Name"]</div><div class="input-field">[text parker-10-last-name placeholder "Last Name"]</div><div class="input-field">[email parker-10-email placeholder "Email"]</div><div class="input-field">[text parker-10-card-access-number placeholder "Building Access Card #"]</div><div class="input-field"><span class="start">Start Date:<br></span>[date parker-10-start-date placeholder "Start Date"]</div><div style="clear: both;"></div>
    </div>
    </div>
    
    <br/>
    <div class="g-recaptcha" data-sitekey="6LcBARsUAAAAALelm13d0TQc9A_1yEZl0jOa4ymO"></div>
    [submit "Submit"]
    [/group]
    [/group]
    [/group]
    
    [group no-james-center]
    <hr/>
    <p>You have indicated that your place of work is not at the James Center. City Parking Inc. has multiple parking locations and solutions in downtown Richmond. <a href="https://cityparkingonline.com/downtown-parking-richmond-virginia/" title="View parking locations in downtown Richmond." target="_blank">View </a>»</p>
    <h3>Individual Account</h3>
    
    <label> First Name<span class="required">*</span>
        [text* first-name-3] </label>
    <label> Last Name<span class="required">*</span>
        [text* last-name-3] </label>
    <label> Company / Organization<span class="required">*</span>
        [text* company-3] </label>
    <label> Cell Phone
        [tel tel-607] </label>
    <label> Work Phone<span class="required">*</span>
        [tel* tel-608] </label>
    <label> Your Email<span class="required">*</span>
        [email* your-email-3] </label>
    
    Mailing Address:
    <label> Attention<span class="required">*</span>
        [text* attention-3] </label>
    <label> Street 1<span class="required">*</span>
        [text* street-1-3] </label>
    <label> Street 2 
        [text street-2-3] </label>
    <label> City<span class="required">*</span>
        [text* city-3] </label>
    <label> State<span class="required">*</span>
        [text* state-3] </label>
    <label> Zip<span class="required">*</span>
        [text* zip-3] </label>
        
    Start Date<span class="required">*</span>:
    [date* date-817]
    <br/>
    Please describe parking needs:
    [textarea* textarea-795]
    <br/>
    <div class="g-recaptcha" data-sitekey="6LcBARsUAAAAALelm13d0TQc9A_1yEZl0jOa4ymO"></div>
    [submit "Submit"]
    [/group]
    Thread Starter ironlion37

    (@ironlion37)

    Hi again Jules. IS this something you think you’ll be addressing soon or should I go ahead and pull the google recaptcha code out of the form?

    Thanks!

    Plugin Author Jules Colle

    (@jules-colle)

    @ironlion37 I wasn’t able to test yet, but googling around a bit I found that multiple recaptchas on the same page need a bit of fiddling. I believe this SO answer might help you out: http://stackoverflow.com/questions/1241947/how-do-i-show-multiple-recaptchas-on-a-single-page#28126317

    Plugin Author Jules Colle

    (@jules-colle)

    Alternatively you might be able to create the form with only a single captcha.

    This depends on your form structure, but if you have a group at the end of your form like this:

    [group group-recap]<div class="g-recaptcha" data-sitekey="6Lc...">[/group]

    you could just add all conditions that should trigger the captcha to be shown like this:

    if [radio-381] equals "No" then show [group group-recap]
    if [radio-382] equals "Individual" then show [group group-recap]
    if [radio-382] equals "Group" then show [group group-recap]
    
    Thread Starter ironlion37

    (@ironlion37)

    Thanks Jules. I just tried the second solution: moving the recpatcha and submit button into a conditional group. I can get it to appear successfully in all instances, but the recaptcha doesn’t’ actually function. It doesn’t stop the form from being submitted.

    By the way, can you delete the code I pasted above? Not so great that I posted the web address and the data key.

    The javascript solution is over my head so I’m not sure what I’ll do.

    Thread Starter ironlion37

    (@ironlion37)

    Ok, so I got it to work. In case this might help others, the contact from 7 short code “[recapthca]” has to be used and not the google code

    <div class="g-recaptcha" data-sitekey="6Lc...">

    Thanks again Jules and if you can delete my earlier post with the code that would be great.

    Plugin Author Jules Colle

    (@jules-colle)

    Only moderators can delete posts. Any moderator reading this? If so, could the third post be editted/deleted? thanks.

    • This reply was modified 4 years, 5 months ago by Jules Colle.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘google recaptcha doesn’t work’ is closed to new replies.