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

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?

 

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.

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!

 

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

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. 

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.

 

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%;}

:-) 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
...