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

    Making your form responsive for mobile devices

    Asked by Universal2000 on February 15, 2015 at 08:47 AM

    Do you have a transparent contact form that will work on android and other mobile devices?

    Page URL:
    http://www.jotform.com/50376503343349

    contact form Mobile responsive responsive form
  • Profile Image
    JotForm Support

    Answered by Jan on February 15, 2015 at 11:18 AM

    Hi there,

    If I understand you correctly, you want to create a form that will automatically adjust depending on the screen or device sizes of the user right?

    We called it "responsive form" because the fonts, input fields, buttons and images will adjust automatically depending on the screen sizes. It will look good in desktop, laptops, tablets, or mobile phones.

    In the Form Designer, you need to put a check on "Make this form responsive" option.

    Please check our guide on how to make your form mobile responsive.

     

    When you say "transparent", are you referring to the transparent background so that you can use a background image?

    In Form Designer, you can just slide the background slider towards transparency.

    I created a demo form(http://form.jotformpro.com/form/50454157038958), please check it. You can clone it if you like.

     

    Hope this helps. Thank you.

  • Profile Image

    Answered by Universal2000 on February 16, 2015 at 07:20 AM

    Hi. Thanks for your response. I've tried all of the above and the form still cannot be seen on an android device. I can see it in windows, but that's about it. I am using Artisteer v4.0

    Any other options?

  • Profile Image
    JotForm Support

    Answered by Jan on February 16, 2015 at 09:05 AM

    Hello,

    I can see that you are using Artisteer. If I understand you correctly, you're saying that the form is not showing up right?

    Please try to embed your form using iFrame method. Also, please share the link or URL of your website so that we can take a look at it.

    Thanks!

  • Profile Image

    Answered by Universal2000 on February 17, 2015 at 09:24 AM

    Hi,

    I have used the iframe method, but only the top 2 fields of the form is visible on my Android device.

    Here is the link: http://www.universal2000.com/test/

    Thaanks

  • Profile Image
    JotForm Support

    Answered by Jan on February 17, 2015 at 10:40 AM

    Hi there,

    Since you are using Artisteer, can you enable the "Responsive Web Design" option (Export → Options → General). I found this documentation from Artisteer web page.

    Please check it - http://www.artisteer.com/Default.aspx?content_id=newsletter_2012_10_4&p=c

    If the issue is still the same then please let us know. Thanks!

  • Profile Image

    Answered by Universal2000 on February 17, 2015 at 01:52 PM

    The Jotform and Artisteer are both set to responsive and I have used the iFrame method, but it still does not display correctly:

     http://www.universal2000.com/test/

  • Profile Image

    Answered by Sean on February 17, 2015 at 03:37 PM

    I checked your form via a mobile device but it appears to be responsive. I cloned your form and use the Mobile Responsive Widget instead and the results show that the form displayed quite nicely.

    Here is the link to my cloned form:
    http://form.jotformpro.com/form/50475674409967

    Can you give the mobile response widget a try and let us know your outcome? We will await your response.


    Cheers!

  • Profile Image

    Answered by Universal2000 on February 18, 2015 at 04:04 AM

    I used your cloned form and the mobile response widget, but it still did not work properly:

     http://www.universal2000.com/test

    I have a very tight deadline for this project, so I may have to look elsewhere. Your support is good, but the forms just don't work for me.

  • Profile Image

    Answered by Sean on February 18, 2015 at 09:29 AM

    I tested the mobile response of the page link you provided and I had no issue with the expectation of the image used as the background for your footer showing in the middle of the page instead of the end of the form/iframe window. Please note the screenshot of a Samsung Galaxy S5 emulator below. As you can see all the fields are properly aligned on the screen so there is no need to scroll left or right.

    Form embedded on Site



    Form on standalone URL



    We should aim to figure out why the bar is appearing in the middle of your form. Base on my checks, the form itself is mobile response. Please try the code provided below.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/50454892255359" frameborder="0" style="width:100%; height:986px; border:none;" scrolling="no"></iframe>

    We will await your response.

    Cheers!

  • Profile Image

    Answered by Universal2000 on February 21, 2015 at 08:33 AM

    There is no change

  • Profile Image

    Answered by Sean on February 21, 2015 at 09:39 AM

    Can you respond with a screenshot of your view on your mobile device so that we can do a comparison? Maybe we are missing something. I will await your response.


    Cheers!

  • Profile Image

    Answered by Universal2000 on February 27, 2015 at 10:16 PM

    I'm resigned to the fact that it will take too long to resolve, so I'll just embed the code in Dreamweaver.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Jan on February 28, 2015 at 12:20 AM

    I understand. Sorry for the inconvenience. Please let us know if you need any help. 
    Thank you.