How to make a form mobile responsive?

  • Profile Image
    Asked on April 17, 2016 at 10:42 PM
    I have an issue with this though.
    It kind of work on desktop, the validation code disappeared but the transparency of the background os not showing.
    But the real problem is that the form is not showing completely on mobile version, the layout of the fields is not working either (I set some fields on 2 columns).
    I’m creating the landing page on clickfunnels so I don’t have total control of the entire web code.
    Do you know what else can I do to make the form look and work as I designed?
    Maria Prat
  • Profile Image
    Answered on April 17, 2016 at 10:52 PM

    I have checked your website on a mobile version resolution, it is showing completely on my end, please see the screencast below: 

    I checked this website the one that you shared on the other thread. 

    Seems  like you were able to display the form properly, please either confirm us or let us know how to replicate the issue on our end, we  will make some tests and will provide you with the steps to resolve it. 


  • Profile Image
    Answered on April 17, 2016 at 10:59 PM

    It's because I went back to the source code. When I used the iframe, on the ipad, the transparency of the background was not showing and the 2 column display of the inputs was no working, making the form really long and for some reason doesnt show completely.

    See image below,


  • Profile Image
    Answered on April 18, 2016 at 12:57 AM

    Could you please try using the default embed script code? Using the full source code in your platform is causing some of the scripts to conflict, especially Clickfunnels loads its own JS libraries and the same goes with the form if you use the full source code. Here's a screenshot, you'll see in the console that there are errors in your website:


    I strongly suggest that you either use the default embed script code or the iframe embed code. However, there is still a change for the default embed script code to conflict with your website's JS errors. Unlike the iFrame embed code which should not be affected by any other external scripts in your website. 


    If you want your iFrame to have a background transparent and to blend in your website, that is still possible. Here's a sample website page where the background color of the form and of the website wallpaper are blending: 

    To do this:

    1. First, embed your form using the iFrame embed code.

    2. After that, use this custom CSS code in your form:

    body, .supernova, .jotform-form {

        background:  rgba(0, 65, 111, 0.20) !important;


    The opacity (4th item in the parement of rgba) can be adjusted, mine is set to 0.20. 


    Let us know if that will work.

  • Profile Image
    Answered on April 18, 2016 at 01:43 AM
    - I’m using now the embed source code and it looks as I want to, but it drives me to the verification page, see images below.
    - When using the embed iframe the form doesn’t look as i want, what worries me is not the transparent background to be honest, that’s minor. I just want the layout to be as the image above where the fields are displayed on 2 columns so the proportions for the whole site are correct.
    Please note that the screenshots of the site were taken from the iPad view. On desktop looks fine, it's on the iPad (which is the main device that we will be using this form) the problem
    Maria Prat
    Communications Designer
    M 0415 262 883 // P 02 9280 3162 
    * Please consider the environment before printing this e-mail
    The information in this email is confidential and may be privileged or subject to copyright. It is intended for the exclusive use of the addressee(s). If you are not an addressee, please do not copy, distribute or otherwise act on the email. If you have received the email in error, please contact the sender immediately and delete the email. The unauthorized use of this email may result in liability for breach of confidentiality, privilege or copyright.
  • Profile Image
    Answered on April 18, 2016 at 02:47 AM

    Unfortunately, if you reply on this thread using your email client and attached an image on it, it won't go through here in the forum. You need to view this thread directly using this link and upload your screenshot using the upload button.

    However, I understand your concern, but for us to help you, you need to use the iFrame embed code and we'll try to come up on a custom CSS code that will meet your needs.

    I went ahead and cloned your form, you can check it here: Now clone that form to have a copy of it in your account. Here's a guide on ow to clone it: 

    Then try re-embedding that version of the form to your website using iFrame embed code and see how it looks. It would also be best to leave it there for now so that we can check it, or you can create a test page where we can see how it looks like and for us to make further solutions. If the form is good then you can use that version of it, you can check the CSS code I have used in the Form Designer Tool.

    Let us know if that works.