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

  • Profile Image
    Georgeff
    Asked on April 19, 2019 at 04:21 PM
  • Profile Image
    Nik_C
    Answered on April 19, 2019 at 04: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.4

    Please check and let us know how it worked.

    Thank you!

  • Profile Image
    Georgeff
    Answered on April 19, 2019 at 04:55 PM

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

    1555707311captcha2.jpg

  • Profile Image
    denis_calin
    Answered on April 19, 2019 at 05:17 PM

    Hi Georgeff!

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

    1555708384IMG_3689.PNG

    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. 

  • Profile Image
    Georgeff
    Answered on April 19, 2019 at 05: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

  • Profile Image
    denis_calin
    Answered on April 19, 2019 at 06: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">

  • Profile Image
    Georgeff
    Answered on April 19, 2019 at 06: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.

  • Profile Image
    Jed_C
    Answered on April 19, 2019 at 09: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.

  • Profile Image
    Georgeff
    Answered on April 19, 2019 at 09: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.jpg