What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Captcha cut off using Iframe?

    Asked by Jotadmin on April 14, 2017 at 02:10 AM

    - When embedding the form using the Wordpress "embed" code - reCaptcha is completely blank. There's space for it, but nothing there. It appears when I use iframes though.

    - reCaptcha is cut off in iFrame view on mobile devices. It cuts off the logo on the right. Does the same in iPad/tablet view since that view is the same size as when viewing on iPhone (see first item)

  • Profile Image
    JotForm Support

    Answered by Charlie on April 14, 2017 at 04:06 AM

    Hi,

    May I know if you have already followed the steps in this guide on how to make your form mobile responsive: https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm

    I see that you embedded the form on a Wordpress site, there are a couple of methods on how you can embed it, I suggest trying them one by one to see which one works for you the best if it the captcha still cuts off after that. Here's a guide that you can refer to: https://www.jotform.com/help/324-A-guide-to-forms-for-WordPress-users

    Let us know if that helps. 

  • Profile Image

    Answered by daviddoornink on April 14, 2017 at 01:42 PM

    Yes this has been done. The form that Ian created for me as an example was the one I'm referring to. He created it with the mobile responsive check box checked.

    So with regards to his form:

    - Google reCAPTCHA is cut off when embedded with iframes or with the simple script embed and viewed on a mobile device.

    - reCAPTCHA is completely blank when I use the WordPress application embed feature.

    I have tried both options and neither work.

  • Profile Image

    Answered by daviddoornink on April 14, 2017 at 01:46 PM

    Additionally, it looks like my other question threads got closed - the iPad display issue is still a problem. Below is a screen capture from an iPad (not the Chrome tool). The form is off the left displayed like it would on a cell phone. I need it to be responsive and 100% width.

    I have tried the WP embed plugin, WP embed code from Jot Forms and the Jot forms script embed code. None make it work properly.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 14, 2017 at 02:15 PM

    I was able to see the issue when I test viewing the form using mobile browser on your website.

    What I suggest you also try is re-embed the form on the website using instead its iframe publish code.

    User guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code

    After re-embedding using iframe code, check again on the mobile browser.

    Let us know if issue persist.

     

     

  • Profile Image

    Answered by Jotadmin on April 14, 2017 at 04:51 PM

    That's what I said though, I tried using both embed and iframes and the issue is still there however now its overflowing the background of the form. See below:

  • Profile Image
    JotForm Support

    Answered by liyam on April 14, 2017 at 08:35 PM

    Hello,

    The recaptcha's width is not possible to adjust so if your concern is about it overflowing or part of it hiding within the form, your only solution here is to widen the width of the form a bit to show the whole recaptcha.

    It's also possible to remove the width padding for the recaptcha. You can try inserting this CSS code into your form: 

    #id_9 {
       padding-left: 0 !important;
       padding-right: 0 !important;
    }

    If you need to know how to inject CSS codes into your form, please refer to this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Thanks.

  • Profile Image

    Answered by Jotadmin on April 15, 2017 at 01:39 PM

    Ok that's not what I need. When I click "Inspect" on this support thread, it displays like I want my site to display. The captcha isn't cut off and the content for iPad displays across the screen like it should. I'm sorry, but I'm VERY frustrated right now and feel like the support I'm getting is going around in circles and my questions aren't being answered. I'm beyond frustrated actually. 

    I increased the from width to 1050px and it didn't change a thing. Please go back and read the thread (or threads since you split them all out) - that's probably why there isn't consistency in the answers among all the techs answering the questions.

  • Profile Image

    Answered by Jotadmin on April 15, 2017 at 01:42 PM

    Also, the bottom of my form says "Please run the wizard". It doesn't display while in the form editor, but it does on the site. Only thing that needs a wizard is reCAPTCHA but I already ran that.

    And when I delete the reCAPTCHA plugin, the "wizard" text is still there.

  • Profile Image
    JotForm Support

    Answered by John_Benson on April 15, 2017 at 04:31 PM

    @Jotadmin

    We will solve the new issue to a new thread. We have a policy of one issue per thread. Please wait for our response on this URL: https://www.jotform.com/answers/1120239

    Thank you.

    --

    Ok that's not what I need. When I click "Inspect" on this support thread, it displays like I want my site to display. The captcha isn't cut off and the content for iPad displays across the screen like it should. I'm sorry, but I'm VERY frustrated right now and feel like the support I'm getting is going around in circles and my questions aren't being answered. I'm beyond frustrated actually. 

    Please give me more time to investigate the issue. I will get back to you once I have a solution. Thank you.

  • Profile Image
    JotForm Support

    Answered by John_Benson on April 15, 2017 at 05:51 PM

    Thank you for your patience.

    I cloned the form (http://www.jotform.us/form/71031155054140) and I was able to replicate the issue. I have adjusted the CSS code in your form. I have removed a code and injected a new one. 

    CSS Removed:

    #cid_13 div.form-captcha { 
    width: 100%; 

    Injected CSS code:

    .form-textbox, .form-dropdown {
        height: 31px;
        min-width: 100px !important;
    }

    Here's the guide on: How-to-Inject-Custom-CSS-Codes.

    Here's the guide of the whole process:

    1. Login to your account and open your form.
    2. Click the Form Designer button.

    3. Scroll down below the page and open the Advanced Designer.

    4. Go to the CSS tab, delete the CSS code and add the new one as I have shown above.

    Here's the result:

    If you want, feel free to clone this demo form: https://form.jotform.com/71047053077957. Here's a guide: How-to-Clone-an-Existing-Form-from-a-URL.

    Hope that helps. If you need further assistance, please let us know. Thank you.

  • Profile Image

    Answered by Jotadmin on April 15, 2017 at 06:37 PM

    It looks correct in your demo form but when I place it in the website, I still have the same problem with the iPad view.

    And then when I try to place Google reCAPTCHA back in, it creates the cutting off problem again as well as the iPad display issue. I don't have any CSS applied to the page where I'm trying to place it. The only CSS is what you created within the form.

  • Profile Image
    JotForm Support

    Answered by AIDAN on April 16, 2017 at 06:04 AM

    As you mentioned that the demo form that my colleague kindly provided, looks correct, could you please try embedding it into your website to see if it shows the same problem? It is basically just a matter of using your form code except the form ID changes to the one of the demo form.

    Thank you in advance. We are awaiting your reply.

  • Profile Image
    JotForm Support

    Answered by AIDAN on April 16, 2017 at 06:06 AM

    I thought to clarify that by embedding it, I mean placing it into your website, so that we can see if a correct standalone form, would look incorrectly when embedded into your website.

    Thank you.

  • Profile Image

    Answered by Jotadmin on April 16, 2017 at 03:45 PM

    I did that. The form showing now is the one you guys created and it still has the issue:

    http://www.clackamasfire.com/jot-form-test/

  • Profile Image
    JotForm Support

    Answered by Mike on April 16, 2017 at 04:53 PM

    The form looks fine when viewed by standalone URL on iPad.

    The form iFrame takes 100% of available space, but it looks like that available space of the container is somehow limited to 300 pixels by the styles of your website.

    You may check this issue with your wordpress theme developer.

  • Profile Image

    Answered by Jotadmin on April 17, 2017 at 09:24 PM

    I checked with the theme developer and they found no issues. When I place a YouTube video for example in the page using "embed", I don't have the issue of the form being off to the left in iPad view.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 17, 2017 at 11:04 PM

    When I reviewed your test form https://www.jotform.us/form/71067850497162 I found that the custom CSS codes that had been suggested was not applied. The custom CSS codes input was empty on the form.

    Can you please add back the CSS codes. Try this updated one...

    #id_8 { 

       padding-left: 0 !important;

       padding-right: 0 !important;

    }

    Save the form and then test again your website using mobile browser. See if the custom CSS code injected take effect.

    On my own test, it was working already as I see it like this...

     

    Let us know if issue remains.

     

  • Profile Image

    Answered by Jotadmin on April 17, 2017 at 11:37 PM

    That's not the same form. The one I'm using is this:

    https://form.jotform.us/71068362697163

    I put the CSS in there and still no change.

  • Profile Image
    JotForm Support

    Answered by Nik_C on April 18, 2017 at 02:45 AM

    I tested your website with that form embedded and here are my results:

    On Galaxy S6:                                           On Galaxy S7:

      

    iPhone 6:                                                     iPad Air:

         

    On iOS devices, there is that issue with submit button on both, and with the form width on iPad. But the captcha is showing fine on all devices.

    But I fixed that by inserting the form height in media query CSS to your form and it is showing fine now:

    @media only screen 

    and (min-device-width : 375px) 

    and (max-device-width : 667px) { 

     .form-all{

      height:950px!important;

    }

    }

    And regarding the iPad issue with form width I fixed by inserting the below CSS to your form:

    @media only screen 

    and (min-device-width : 768px) 

    and (max-device-width : 1024px)  {

      .form-all{

        width:700px!important;

      }

    }

    And it looks fine now.

    Let us know if you have any further questions.

    Thank you!