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

    Form Captcha part not showing entire picture in mobile browser

    Asked by rocker93rock on March 09, 2015 at 03:56 PM

    I am still having a problem with the Captcha part not showing the entire picture and reload, audio, and question mark.

    I would like it to show like the image on right, not how it is currently showing on the left {see image}.

     

     

     

    Page URL:
    http://mva86.weebly.com/get-a-quote.html

    CSS layout CSS mobile captcha CSS
  • Profile Image

    Answered by Ben on March 09, 2015 at 05:07 PM

    Could you please try adding the following CSS code to your jotform?

    table#recaptcha_table {
        max-width: 100%;
    }
    tr > td.recaptcha_image_cell {
        max-width: 70%;
    }
    #recaptcha_image > img {
        max-width: 100%;
    }
    div#recaptcha_image {
        float: left;
        max-width: 100%;
    }
    table#recaptcha_table td {
        float: left;
    }

    You can see how to do that here: Inject Custom CSS Codes

    Do let us know how it goes.

  • Profile Image

    Answered by rocker93rock on March 09, 2015 at 05:33 PM

    Hi Ben:

    Thank you for your response, but that code did not work.

    I added it both inside and outside of the previous code and they both did not work.

    (1) outside

    .form-all {margin-left: 0; margin-right: 0; margin-top: -28px;}@media screen and (max-width:480px){
    .form-all{
    width:80% !important;
    }
    .form-line-column, .form-line {
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    }
    .form-radio-item label, .form-checkbox-item label {
    white-space:normal !important;
    }
    .form-textarea{
    max-width:100% !important;
    width:60% !important;
    }
    label{
    width:90% !important;
    }
    }
    table#recaptcha_table {
    max-width: 100%;
    }
    tr > td.recaptcha_image_cell {
    max-width: 70%;
    }
    #recaptcha_image > img {
    max-width: 100%;
    }
    div#recaptcha_image {
    float: left;
    max-width: 100%;
    }
    table#recaptcha_table td {
    float: left;
    }

    (2) inside [current]

    .form-all {margin-left: 0; margin-right: 0; margin-top: -28px;}@media screen and (max-width:480px){
    .form-all{
    width:80% !important;
    }
    .form-line-column, .form-line {
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    }
    .form-radio-item label, .form-checkbox-item label {
    white-space:normal !important;
    }
    .form-textarea{
    max-width:100% !important;
    width:60% !important;
    }
    label{
    width:90% !important;
    }
    table#recaptcha_table {
    max-width: 100%;
    }
    tr > td.recaptcha_image_cell {
    max-width: 70%;
    }
    #recaptcha_image > img {
    max-width: 100%;
    }
    div#recaptcha_image {
    float: left;
    max-width: 100%;
    }
    table#recaptcha_table td {
    float: left;
    }
    }

    I still get it like the left image, I would like it to look like the right image.  How would the code be entered, inside or outside of previous code?



    Page URL:
    http://mva86.weebly.com/get-a-quote.html

  • Profile Image

    Answered by Ben on March 09, 2015 at 05:49 PM

    It should actually look like the right image, but I see the error in the CSS code that you have posted back to me (in both versions).

    I removed this (red) from your jotform:

    .form-all {margin-left: 0; margin-right: 0; margin-top: -28px;}@media screen and (max-width:480px){
    .form-all{
    width:80% !important;
    }
    .form-line-column, .form-line {
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    }
    .form-radio-item label, .form-checkbox-item label {
    white-space:normal !important;
    }
    .form-textarea{
    max-width:100% !important;
    width:60% !important;
    }
    label{
    width:90% !important;
    }
    table#recaptcha_table {
    max-width: 100%;
    width:60% !important;
    }
    tr > td.recaptcha_image_cell {
    max-width: 70%;
    }
    #recaptcha_image > img {
    max-width: 100%;
    width:60% !important;
    }
    div#recaptcha_image {
    float: left;
    max-width: 100%;
    width:60% !important;
    }
    table#recaptcha_table td {
    float: left;
    }
    }#recaptcha_response_field {
        max-width: 80%;
    }

    Please note that the bracket } was an error in CSS and that the rest of the red code was making the widget not fill out properly.

    Since I pasted the code to your CSS field I am now seeing it looking nice on your website, but do let us know if you have any issues and we would be happy to look into it.

  • Profile Image

    Answered by rocker93rock on March 09, 2015 at 06:17 PM

    Hi Ben:

    Thanks for the response.  Could you check my CSS code I was working on it and your response and my code did not match.  It not looking correct.

    Thanks again.

     

    Page URL:
    http://mva86.weebly.com/get-a-quote.html

  • Profile Image

    Answered by Ben on March 09, 2015 at 06:40 PM

    I see.

    This is the code that I have added to your jotform:

    .form-all {margin-left: 0; margin-right: 0; margin-top: -28px;}@media screen and (max-width:480px){
    .form-all{
    width:80% !important;
    }
    .form-line-column, .form-line {
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    }
    .form-radio-item label, .form-checkbox-item label {
    white-space:normal !important;
    }
    .form-textarea{
    max-width:100% !important;
    width:60% !important;
    }
    label{
    width:90% !important;
    }
    /* ------------------ */
    /* recaptcha CSS code START */
    /* ------------------ */
    table#recaptcha_table {
    max-width: 100%;
    }
    tr > td.recaptcha_image_cell {
    max-width: 70%;
    }
    #recaptcha_image > img {
    max-width: 100%;
    }
    div#recaptcha_image {
    float: left;
    max-width: 100%;
    }
    table#recaptcha_table td {
    float: left;
    }
    #recaptcha_response_field {
        max-width: 80%;
    }
    /* ------------------ */
    /* recaptcha CSS code END */
    /* ------------------ */

    This is the code that you currently have:

    .form-all {margin-left: 0; margin-right: 0; margin-top: -28px;}@media screen and (max-width:480px){
    .form-all{
    width:80% !important;
    }
    .form-line-column, .form-line {
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    }
    .form-radio-item label, .form-checkbox-item label {
    white-space:normal !important;
    }
    .form-textarea{
    max-width:100% !important;
    width:60% !important;
    }
    label{
    width:90% !important;
    }
    }
    /* ------------------ */
    /* recaptcha CSS code */
    /* ------------------ */
    table#recaptcha_table {
    max-width: 100%;
    }
    tr > td.recaptcha_image_cell {
    max-width: 70%;
    }
    #recaptcha_image > img {
    max-width: 100%;
    }
    div#recaptcha_image {
    float: left !important;
    max-width: 100%;
    width:80% !important;
    }
    table#recaptcha_table td {
    float: left !important;
    }
    #recaptcha_reload#recaptcha_reload_btn#recaptcha_switch_audio#recaptcha_switch_audio_btn#recaptcha_whatsthis_btn#recaptcha_whatsthis{
    float: left !important;
    }
    #recaptcha_response_field.recaptcha_input_area#recaptcha_privacy{
    max-width: 100%;
    width:60% !important;
    }

    I would suggest leaving only my code to see how it looks. To do that remove all code from the style box and add the code above into it.

    I see that you have understanding of how to get elements and their identifiers, but I would like to let you know of a rule when creating CSS Rules.

    #recaptcha_reload#recaptcha_reload_btn#recaptcha_switch_audio#recaptcha_switch_audio_btn#recaptcha_whatsthis_btn#recaptcha_whatsthis

    This is read as:

    "Element with ID 'recaptcha_reload' and ID 'recaptcha_reload_btn' and ID 'recaptcha_switch_audio' and ID 'recaptcha_switch_audio_btn' and ID 'recaptcha_whatsthis_btn' and ID 'recaptcha_whatsthis' should get following CSS code applied to it:"

    Since one element can have only one ID and these are IDs of several HTML elements this CSS will result in CSS error and will get dropped out or cause an issue where all the rest of CSS code will not be read.

    While we can not do that with IDs we can do that with classes, like you did here - of course without the last part:

    #recaptcha_response_field.recaptcha_input_area#recaptcha_privacy

    This would be possible, but it would be a valid CSS rule only if the element has that ID and has that class:

    "Element with ID 'recaptcha_response_field' and class 'recaptcha_input_area' should get following CSS code applied to it:"

    I hope that you will not mind the last segment, just wanted to help you with what you are doing so that you can do it even better :)

  • Profile Image

    Answered by rocker93rock on March 09, 2015 at 09:33 PM

    Thanks Ben for the response.

    I am still having a problem with the recaptcha part.  The reload, audio, and question mark; and Privacy & Terms are not shown in portrait mode; they are shown in landscape mode.

    Test device:  iPod Touch 4 & iOS


    Page URL:
    http://mva86.weebly.com/get-a-quote.html

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 10, 2015 at 01:07 AM

    Hello rocker93rock,

    I'm sorry for the trouble caused to you.

    I did check your form in my iPhone 4S device and the fields seems to be displayed correctly. Please check the screenshot below:

    I am not sure why it is not working for you in iPod Touch. I could not find any simulator for iPOD Touch but if it is working in my iPhone 4S device, it should work fine in iPOD Touch 4 as well because the screen size of both the devices are same "3.5-inch".

    I have cleared your form cache. Can you please test your form again and get back to us if the issue persists.

    Thank you!

  • Profile Image

    Answered by rocker93rock on March 11, 2015 at 02:02 PM

    Thanks for the response, ashwin_d

    Screenshot from my iPod touch 4:

     

    Test device:  iPod Touch 4 & iOS


    Page URL:
    http://mva86.weebly.com/get-a-quote.html

     

  • Profile Image

    Answered by Ben on March 11, 2015 at 02:39 PM

    Thank you for the screenshot.

    When I am inspecting your jotform I am again seeing additional styles being added to it which change the style that I have given above.

    For example this one:

    div#recaptcha_image {
        float: left;
        max-width: 100%;
        width: 70% !important;
    }

    The width: 70% !important; makes the image appear smaller than the field it is in, so it seems to be OK, while in reality an invisible part is pushing the other styles away.

    For that reason it should be:

    div#recaptcha_image {
        float: left;
        max-width: 100%;
    }

    What should be done instead is to change recaptcha_image_cell value, for example, we can lower the size to see if it would fit your iPad then like so:

    tr > td.recaptcha_image_cell {
        max-width: 60%;
    }

    This means that your re-captcha must look like this:

    /* ------------------ */
    /* recaptcha CSS code START */
    /* ------------------ */
    table#recaptcha_table {
    max-width: 100%;
    }
    tr > td.recaptcha_image_cell {
    max-width: 60%;
    }
    #recaptcha_image > img {
    max-width: 100%;
    }
    div#recaptcha_image {
    float: left;
    max-width: 100%;
    }
    table#recaptcha_table td {
    float: left;
    }
    #recaptcha_response_field {
        max-width: 80%;
    }
    /* ------------------ */
    /* recaptcha CSS code END */
    /* ------------------ */

    so remove all other styles related to it and it should work for you. Do give it a few moments if iPad has its own cache for browser pages, but the change should be shown shortly.

  • Profile Image

    Answered by rocker93rock on March 11, 2015 at 06:21 PM

    Thanks Ben for the response.

    I got the reload, audio, and question mark in view {see below image},




    but the Privacy & Terms are not showing.  I would like it to look similar to the below image:

    How to get it to look similar?

     

    Test device:  iPod Touch 4 & iOS


    Page URL:
    http://mva86.weebly.com/get-a-quote.html