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 to keep a responsive form when embedded?

    Asked by labiosthetique on March 11, 2014 at 10:10 PM

    Hi,

     

    I embedded my form on a simple page empty page here:http://www.labiosthetique.com.au/joborder/

    but it's not responsive on mobile once embedded, what can I do?

    Page URL:
    http://www.labiosthetique.com.au/joborder/

    when embedded Mobile www
  • Profile Image

    Answered by Cesar on March 11, 2014 at 10:29 PM

    Kindly try embedding the form using the iFrame Method. This should allow the form to render on mobile. 

    Do let us know if the issue persits. Thank you.

    Related Article:
    Getting-the-Form-iFrame-Code

  • Profile Image

    Answered by labiosthetique on March 11, 2014 at 10:36 PM

    Hi Cesar,

     

    thanks for your answer. However, I tried and it doesn't work neither...

  • Profile Image
    JotForm Support

    Answered by BDAVID on March 11, 2014 at 11:08 PM

    Hi, please try injecting this CSS code into your form:

     

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

    @media (max-width: 480px) {

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !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;

    }

    }

  • Profile Image

    Answered by labiosthetique on March 11, 2014 at 11:16 PM

    Hi BDAVID,

     

    Thanks. Still doesn't work...

    Am I the only case with this problem?

  • Profile Image

    Answered by Cesar on March 12, 2014 at 12:08 AM

    Alternative please try the following code:

    @media only screen and (max-device-width: 550px){
    .form-all {
    width: 500px !important;
    }
    }

    Do let us know if this helps displaying the form on your end. Thank you.

  • Profile Image

    Answered by labiosthetique on March 12, 2014 at 12:55 AM

    :(

    Doesn't work

     

    See the difference beetween embedded and not embedded:

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 12, 2014 at 03:18 AM

    @labiosthetique 

    Here are some corrections.

    1. First, you have to embed your form using the default script embed code.

    2. You have to inject the provided CSS codes on your form not within your page. Follow guide this: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    3. The HTML page where the form is embedded is lacking a meta code that would scale the form properly on mobile devices. Please add the following meta code between the head tag on your HTML page.

    Check this visual guide:

    Let us know if you still have issues with your form. Thanks!

  • Profile Image

    Answered by labiosthetique on March 14, 2014 at 12:25 AM

    EltonCris, thank you, it works!

    Thank you very much everybody for your help, very good support!