How to make my form mobile responsive?

  • baywatcharms
    Asked on November 8, 2019 at 9:12 PM

    After building my form, I was checking the responsiveness on my cell phone.  Can someone please help?

    Page URL: https://www.baywatcharms.com/contact_form_1.php
  • KrisLei Jotform Support
    Replied on November 9, 2019 at 4:43 AM

    Hi,

    Please note that forms are now mobile responsive by default, and that means no further configuration is required.

    I have checked your form and it seems that it's working fine on my end.

    1573292496responsive Screenshot 10

    Please give us further details if you are experiencing any issues.

  • baywatcharms
    Replied on November 9, 2019 at 11:03 AM

    These are two screen shots from my android phone, ( samsung galaxy s9 ) which I was using to test my form.1573315325Screenshot 20191109 091913 Chr Screenshot 101573315367Screenshot 20191109 092230 Chr Screenshot 21

  • jherwin
    Replied on November 9, 2019 at 11:53 AM

    The form zooms out when you access the webpage on mobile. Please add a meta tag for mobile to your website, here is a link with more information: https://www.w3schools.com/css/css_rwd_viewport.asp

    That should resize the site and display the form properly.

  • baywatcharms
    Replied on November 9, 2019 at 2:15 PM

    Thank you for the link.  But being stupid, where do I place it.

  • John Support Team Lead
    Replied on November 9, 2019 at 3:14 PM

    I can see that the said meta tag is already added to your webpage. However, I can see as well that you have used the form's source code to embed it into the page.

    Could you please add this code to the pge and see if that works for you:

    <style>

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    #cid_13 > div > div > div.qq-upload-button{

      width:50px!important;

    }

    div#rc-anchor-container {

        width: 50px!important;

    }

    }

    </style>


  • John Support Team Lead
    Replied on November 9, 2019 at 3:18 PM

    Try putting the said styling inside the <body> tag of the page' source code.

    Also, you might want to try using the form's iframe embed code instead. Here's a guide on Getting-the-Form-iFrame-Code. Just paste the code inside the <body> tag of your page and you're good to go.