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

    How do I setup a form to display on a mobile site with wordpress?

    Asked by bellevuefineart on April 22, 2014 at 03:11 PM

    I'm using wordpress and have a jotform on the site. The way jotform works, you have to be very specific in form size, so it's not displaying correctly on a mobile theme. Using wordpress, how do I get the form to resize the fields in my mobile css theme?

     

    Page URL:
    http://dev.bellevuefineart.com/order-uploads/

    Mobile site mobile site JotForm size
  • Profile Image

    Answered by bellevuefineart on April 22, 2014 at 05:15 PM

    Still can't figure this out.

    I tried going into the form preferences and doing the custom CSS but that didn't seem to work either.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 22, 2014 at 05:16 PM

    Hi,

    Mostly, our form is already compatible with mobile browsers.

    But should you need to customize more the mobile responsiveness, you can inject CSS codes to do it. 

    I checked the form in your website http://dev.bellevuefineart.com/order-uploads/ , this form http://www.jotform.us/form/21065362980150  and can see you had already added the CSS code on it

    /*-----------RESPONSIVE LAYOUT-----------*/

    @media (max-width: 600px) {.form-textarea,.form-textbox,.form-dropdown{width: 300px !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.form-label-left, .form-label-right{width: auto;}.form-buttons-wrapper{margin-left:0 !important;}.form-input {width: 100%;}.form-all{width: 75%;}.form-sub-label-container {width: 100%;display:block;}}

        /* Injected CSS Code */

     

    When I test the website on mobile browser, the form was not as responsive. Some of the field like the TextArea did not respond. It seems there is a script conflict that is happening that is preventing the form from triggering the responsive layout when on mobile browser.

    Please try doing it like this

    1. Update the injected CSS codes to this http://pastie.org/9101633

    2. Re-embed the form to your website using its iframe code embed. Use this guide

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

     

    Try this and inform us how it goes.

    Thanks!

     

  • Profile Image

    Answered by bellevuefineart on April 22, 2014 at 07:06 PM

    Thanks Jonathan

    I changed the CSS code to the updated code you suggested, and implemented iframe but it doesn't work on mobile devices. Sorry, that answer didn't work.

     

    Also if you read the thread @ http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code all of the users complain that this method didn't work correctly.

     

    Scott

  • Profile Image

    Answered by Cesar on April 22, 2014 at 09:33 PM

    Testing the form embedded on your page, I do see that the standard script code is still on your webpage. On my mobile device, it appears to display fine (just around 10px extended off the page).

    My suggestion would be to decreaces the 

    .form-textarea, .form-textbox, .form-dropdown, .form-html{width: 300px !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

    To a width value of around 275px, but that would be in my case and my screen resolution (Alcatel Pop C3)

    Do let us know when you have the iFrame code up so that we may perform further tests. Thank you. 

  • Profile Image

    Answered by bellevuefineart on April 22, 2014 at 09:52 PM

    So, I tried that Cesar, and it's not working. The iframe code is active too.

    I moved it to our main site here:

    http://www.bellevuefineart.com/order-uploads/

    I'll live with it until I can figure it out.

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 22, 2014 at 11:39 PM

    Hello bellevuefineart,

    Can you please try to use the following custom css and see if that help you:

    @media (max-width: 480px) {

    .form-textarea, .form-textbox, .form-dropdown {

    width: 190px !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;}

    .form-all {width: 60%;

    margin-left: -8px;

    }

    .form-sub-label-container {width: 60%;}

    }
    The following guide should help you in injecting custom css:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
    Thank you!
  • Profile Image

    Answered by bellevuefineart on April 23, 2014 at 05:41 PM
    :-) That was it. thank you so much.
    scott
    Scott, Redd, Tomoko, Amanda, Syd, & JJ the dog
    Bellevue Fine Art Reproduction:
    www.bellevuefineart.com
    tel: 425-749-7396
    *Like us on Facebook! *http://www.facebook.com/bellevuefineart
    ...