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

  • Profile Image
    Asked 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?


  • Profile Image
    Answered 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
    Answered on April 22, 2014 at 05:16 PM


    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 , this form  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

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


    Try this and inform us how it goes.



  • Profile Image
    Answered 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 @ all of the users complain that this method didn't work correctly.



  • Profile Image
    Answered 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 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:

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


  • Profile Image
    Answered 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:
    Thank you!
  • Profile Image
    Answered on April 23, 2014 at 05:41 PM
    :-) That was it. thank you so much.
    Scott, Redd, Tomoko, Amanda, Syd, & JJ the dog
    Bellevue Fine Art Reproduction:
    tel: 425-749-7396
    *Like us on Facebook! *