I need to embed a form on a mobile site.

  • Profile Image
    hsfsf
    Asked on October 26, 2013 at 09:22 PM

    What is the best code to use sinze resizing is not autimation on the forms? as of now, I'm using the iFrame code but the next and back buttons are not reliable... 

     

    Also I need to be able to block people from choosing specific dates on the date field, how can I do that? i,e., entering any date that is a sunday is not allowed....

     

    Thanks,

     

    Lorena

  • Profile Image
    jedcadorna
    Answered on October 26, 2013 at 10:11 PM

    @hsfsf

    Jotform is mobile friendly so it should be compatible with any of mobile devices. I can see that the form next button is slighty align to the right. Please apply this custom CSS to adjust the alignment of the next button. I have tested it using an Iphone emulator and looks fine now.

     

    #form-pagebreak-back_27 {

    display:none;

    }#form-pagebreak-next_27{

    position: absolute;

    left: 60px;

    top: 361px;

    width:130px !important;

    height:40px !important;

    }

     

    I hope this helps. 

    Thanks,

  • Profile Image
    jedcadorna
    Answered on October 26, 2013 at 10:38 PM

    @hsfsf,

    I made a modification to the CSS script please use this instead. I have tested it using an Iphone emulator and Android phone and table. I hope this fits now with other devices. Rendering to some other browser's devices may not look the same but overall it should look fine.

     

    @media screen and (orientation: landscape) { html, body { width: 100%; } .content h1.landscape { display: block } .content h1.portrait { display: none } } 

    @media screen and (orientation: portrait) { html, body { width: 100%; } .content .landscape { display: none } .content .portrait { display: block } }

    #form-pagebreak-next_27{position: absolute;left: 60px;top: 361px;width:130px !important;height:40px !important;}

    #form-pagebreak-back_27{position: absolute;left: 85px;top: 544px;width:130px !important;height:40px !important;}

     

    Let us know if you have questions.

    Thanks,