How can I have the capcha not be cut off in mobile?

  • Georgeff
    Asked on April 19, 2019 at 4:21 PM

    1555705258captcha Screenshot 10

    Page URL: https://www.jotform.com/build/90796300242150
  • Nik_C
    Replied on April 19, 2019 at 4:41 PM

    I inserted the code to your Custom CSS:

    #recaptcha_input_5 > div > div > iframe {

        margin-left: -5%!important;

    }

    That should fix the problem:

    1555706462Screen Shot 2019 04 19 at 10 Screenshot 10

    Please check and let us know how it worked.

    Thank you!

  • Georgeff
    Replied on April 19, 2019 at 4:55 PM

    It is better, but still cut off on my iPhone 6s and the WIX mobile editing window...

    1555707311captcha2 Screenshot 10

  • denis_calin Jotform Support
    Replied on April 19, 2019 at 5:17 PM

    Hi Georgeff!

    I just tested your form on my iPhone 6s and the captcha is displaying correctly, like so:

    1555708384IMG 3689 Screenshot 10

    Perhaps it's the WIX mobile editing mode that is displaying it like that. Please let us know if you still experience this after publishing. 

  • Georgeff
    Replied on April 19, 2019 at 5:36 PM

    You're correct when you are viewing the Jotform, but where I am viewing it is embedded in my web site and that is still off. Go here on your iPhone: https://www.freshstartreading.com/signup

  • denis_calin Jotform Support
    Replied on April 19, 2019 at 6:04 PM

    Hi Georgeff,

    I've tested the form on your website and can see that it is displayed in full, but the user needs to scroll sideways to be able to see the fields in their entirety. Can you please change the iframe width to 90%?

    <iframe width="100%" height="100%" name="htmlComp-iframe" scrolling="auto" data-src="https://form.jotform.com/90796300242150">

  • Georgeff
    Replied on April 19, 2019 at 6:08 PM

    Is there another solution you can offer because I was told by another JotForm support guy a few weeks ago to not use an iframe with WIX? He said to use my Jotform's URL, because there is a known issue with WIX iframes not returning data from JotForms properly.

    Here is the reference: https://www.jotform.com/help/70-Adding-a-Form-to-Your-Wix-Site where it says...

    Note: We recommend this embed method [a URL] due to some reports about forms not submitting properly on Wix when embed code is used. We found out that Wix uses a different domain name on generated iframe source which caused security errors preventing the form from submission.

  • Jed_C
    Replied on April 19, 2019 at 9:11 PM

    It has been an issue with re-captcha V2 and there was a report to Google about this. You can find it in this link https://code.google.com/archive/p/recaptcha/issues/215.

    I've been trying to modify, but any changes is not affecting since the captcha is loaded in an iframe. 

    It seems that Google are not willing to allow reCaptcha V2 be modified to misrepresent their branding - especially since its a ubiquitous web security feature. 

    You can still access the area around the recaptcha iframe under the div#recaptcha-body, and you can still use Custom CSS to modify the layout.

    You might need to apply it directly on your website's source code, try the suggestion in this guide https://geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/ and see if that works for you.

  • Georgeff
    Replied on April 19, 2019 at 9:29 PM

    Thank you for figuring this out, Jed. I am thinking about just taking the Captcha out. Do you think a form like mine is very susceptible to bots, especially when a payment is a required field?

     

    Actually, I turned off a setting and got a "Word" captcha instead of the Google "I am not a robot."  It sizes perfectly inside the mobile device, so I am good to go. Thanks to everyone on this thread who worked on this. You guys are the best.

    1555724656captcha3 Screenshot 10