Adding a Recaptcha to website form not loading properly

James-McKay wrote on 10/23/2020, 3:25 PM

hello, i made a contact us form on a webpage and created using a placeholder and adding in the html form information to the "head", when i load it into the website online, it appears fine and look alright however when clicking the recaptcha it just does the loading image but doesnt actually work, how can i get the recaptcha to work properly? is there something in xara thats interfering with the scrips for the captcha

Comments

johnebaker wrote on 10/24/2020, 6:42 AM

@James-McKay

. . . . i made a contact us form on a webpage and created using a placeholder and adding in the html form information to the "head", when i load it into the website online . . . .

Did you use the Forms widget 'Wufoo' or create the form and then insert a sourced ReCaptcha code in the <head> section of the page??

Also see this article it may help you diagnose the issue if it is in the setup of the ReCaptcha parameters and keys.

John EB

James-McKay wrote on 10/24/2020, 7:18 AM

@James-McKay

Hi

. . . . i made a contact us form on a webpage and created using a placeholder and adding in the html form information to the "head", when i load it into the website online . . . .

Did you use the Forms widget 'Wufoo' or create the form and then insert a sourced ReCaptcha code in the <head> section of the page??

Also see this article it may help you diagnose the issue if it is in the setup of the ReCaptcha parameters and keys.

John EB

Sorry I m ant body not head, and yes I created a placeholder and inserted the code for the form into the body, the form appears alright but when I click the recaptcha on the live version of the page it clicks but shows the spinning animation, but keeps spinning and just never stops unless I refresh the page, which then I have to click the captcha again.....which then starts and endless cycle,

After running a few tests it seems like it's being affected by the roe.js that is generated by xara,

So far I've made a work around by creating a seperate file altogether with the form and captcha and then inserting code to embed that other form in an iframe inside the placeholder, which seems to work as now nothing is interfering with eachother.

johnebaker wrote on 10/25/2020, 9:39 AM

@James-McKay

. . . . After running a few tests it seems like it's being affected by the roe.js that is generated by xara, . . . .

The issue is most likely caused by something in the code you are inserting into the placeholder that WDP does not like whereas using an iFrame, WDP does not care what is in the embeded web page.

Where did you get the code from or what is the code you are using (minus any keys or personal information)?

John EB

James-McKay wrote on 10/29/2020, 2:19 PM

....The issue is most likely caused by something in the code you are inserting into the placeholder that WDP does not like whereas using an iFrame, WDP does not care what is in the embeded web page.

Where did you get the code from or what is the code you are using (minus any keys or personal information)?.....

The Code i Inserted into the place holder is as follows:

<body>


<div class="container">
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="email">Last Name</label>
    <input type="text" id="email" name="email" placeholder="Your Email Address..">

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    <div class="g-recaptcha" data-sitekey="Removed by Moderator"></div>
    <input type="submit" value="Submit">
  </form>
</div>

</body>

other than the captcha the form works fine,

johnebaker wrote on 10/30/2020, 12:30 PM

@James-McKay

Did you include the <body> ... </body> tags as well?

If so they are not necessary when entered into a Placeholder directly and are likely what was causing the issue as the placeholder is already inside the web pages <body> ... </body>. There can only be 1 pair of <head> ... </head> and <body> ... </body> tags per web page.

This would be why the iFrame version works - it is a complete web page in its own right.

BTW - I have removed the site key from your post.

HTH

John EB