Making your form responsive for mobile devices

  • Universal2000
    Asked on February 15, 2015 at 8:47 AM

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

  • Jan
    Replied 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.

    Making your form responsive for mobile devices Image 1 Screenshot 30

    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.

    Making your form responsive for mobile devices Image 2 Screenshot 41

    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.

  • Universal2000
    Replied on February 16, 2015 at 7: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?

  • Jan
    Replied on February 16, 2015 at 9: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!

  • Universal2000
    Replied on February 17, 2015 at 9: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

  • Jan
    Replied 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!

  • Universal2000
    Replied on February 17, 2015 at 1: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/

  • Sean
    Replied on February 17, 2015 at 3: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!

  • Universal2000
    Replied on February 18, 2015 at 4: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.

  • Sean
    Replied on February 18, 2015 at 9: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

    Making your form responsive for mobile devices Image 1 Screenshot 30

    Form on standalone URL

    Making your form responsive for mobile devices Image 2 Screenshot 41

    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" onDISABLEDload="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!

  • Universal2000
    Replied on February 21, 2015 at 8:33 AM

    There is no change

  • Sean
    Replied on February 21, 2015 at 9: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!

  • Universal2000
    Replied 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

  • Jan
    Replied 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.