Why recaptcha field is not mobile responsive?

Hi, the RECAPTCHA field is too wide for the screen (tested on iPhone 5). Email address was too wide too but I was able to correct that using CSS, but I have been unable to use CSS to fix the RECAPTCHA width. How can I fix this?

I checked your form and I see the problem. Please allow me some time to investigate this and I'll get back to you with a possible solution.

Thank you!

Thanks @Nik_C, I look forward to info on how to resolve this.

Thank you for your patience.

I tried all CSS I could think of but it didn't want to apply, and that is because of theme that is used. So, my suggestion is:

1. Remove the theme, I mean apply the default one:

2. And add Mobile responsive widget to your form:

And that will work. 

If you want you can test my clone of your form before you do it on yours. Here is the URL: https://form.jotform.com/70306656914963

Let us know how it worked for you.

Thank you!

Thanks @Nik_C. I had a look but the "my themes" tab is empty.

Hi,

Thank you for contacting us.

I have checked your form and I could not find any Template on your form. I think my colleague have checked wrong form.

Please add the mobile responsive widget to your form. I think it will solve your problem. 

Your form will be shown like:

If you have still a problem, please do not hesitate to contact us.

Hi @Helen, am I correct that I must insert the responsive widget at the bottom of the form? I did this and it made the problem even worse - now all fields extend past the screen.

Hi,

First of all, the position of Mobile Responsive Widget in your form is not important. You can drag and drop the Mobile Responsive Widget in anyplace in the form.

Secondly, I think that your issue is about the embedded form into your website.

1- I have checked your form 70212039998360 in iPhone 5 simulator. There is no issue as my colleague mentioned above.

2- I have checked the http://noellesteegs.com/bowwow/contact-us/ website in iPhone 5 simulator. I reproduced your issue.

Please have a look at the following video:

My recommendation is to re-embed your form into your website with iFrame.

Getting-the-form-iFrame-code 

Which-form-embed-code-should-I-use 

It is seen that you embedded your form with script embed method into your website.

When you used script embed method, source code of your form may interact with the source code of your website. This may cause some conflicts in your form like in your issue.  

If your issue still persists after you embed your form with iFrame, please feel free to contact us again.

We'll be awaiting for your reply.

Thank you.

I have embedded the form now using iFrame and the issue still persists. Note I cannot replicate the issue in Chrome's dev tool, but I can on my iPhone 5, in both browsers in incognito tabs. In addition, the responsive widget has made the send button really wide on desktop - how can we make sure it was as I designed it? Thanks.

Hi,

We are sorry for the confusion.

I have checked your embedded form with iFrame in BrowserStack (not Chrome developer tool) and I reproduced your issue again.

Could you please give me some time to check your existing custom CSS codes? 

I'll back to you as soon as possible.

Thank you for your understanding.

Hi,

I am sorry for waiting you.

Please inject below custom CSS codes into your form.

/* This code fixes submit button in desktop and mobile. */

@media only screen and ( max-width: 657px ) {

button#input_14 {

    width: auto;}

}

/* This code fixes recaptcha in desktop and mobile. */

li#id_18 {

   width: 100% !important;

}

Please have a look at the following guide about how to inject custom css:

1- Click Form Designer:

2- Click CSS and write your CSS into the textarea:

If the issue still persists, please feel free to let us know.

Thank you.

I injected the custom CSS, but the issue persists.

Edit: the button on desktop is back to normal though.

Unfortunately, we can not modify the width of re-captcha widget as it requires minimum of 320 px of width to display properly. In addition, when you embed your form into a website, the form gets even smaller down to around 230 px because of the margin added by your page. Therefore, the wdiget does not fit the screen properly. 

If you have further questions, please feel free to contact us. 

Hello.. Maybe this will help.. I read this post and seems the only solution is to use the drawing captcha... https://www.jotform.com/answers/598642-My-form-is-too-wide-on-iPhones

So apparently something is wrong with the captcha for mobile.. Jotform should look as to why mobile works for only one type of captcha and not the others. 

Hope it helps

A

@agabbydavis

Thank you for the additional information, however, as I have checked the form (not embedded) with a captcha on a mobile phone it seems to be responsive.

There is also a possibility that the issue is not on the form not being mobile responsive but on the website. Or, it can also be due to a conflict between the scripts of the form and the scripts on the website.

Mike,

I don't know.. but my site is responsive and the only thing extending beyond the mobile window, too wide was the captcha.. every element lined up perfectly.  Which is what made me research to find an answer.  Also I use an extension to repair script conflict.. So until I changed the style of captcha.. it now lines up with everything else on the page..   Thanks

a