Jotform embedded using lightbox not fitting on iPhone

  • Profile Image
    aesantana1
    Asked on December 05, 2016 at 03:29 PM

    Hello JotForm Team,

    I am incredibly grateful for your help. I have a form that looks wonderful on my desktop and tablet. The issue I am having is viewing the embedded form on my iPhone-in portrait mode. The webpage is www.truetemperfinancial.com and I'm using lightbox to embed code. The reason is because I like the form to open on page load. Will you please help me solve this format issue. Thank you. 

     

    My CSS is below. Your help is much appreciated. 

     

    .form-all {

        background : #454545;

        color : #fff !important;

        border : 1px solid #000;

        border-radius : 5px;

    }

     

    .form-line-error {

        background : transparent;

    }

     

    .form-line-error .form-error-message, .form-label-left {

        display : none;

    }

     

    .form-button-error {

        color : white;

        text-align : center;

    }

     

    .form-textbox {

        border-radius : 5px;

        height : 32px;

        width : 220px;

    }

     

    .form-textbox:focus {

        background-color : #fafaea;

    }

     

    .form-submit-button {

        border : 1px solid #00A092;

        !important;

        border-radius : 3px!important;

        font-weight : bold!important;

        height : 43px !important;

        width : 220px !important;

        background : #00A092;

        !important;

        font-size : 16px;

        text-shadow : none;

        box-shadow : none;

        color : #fff;

    }

     

    .form-submit-button:hover {

        border : 1px solid #333;

        !important;

        border-radius : 3px!important;

        font-weight : bold!important;

        height : 43px !important;

        width : 220px !important;

        background : #333;

        !important;

        font-size : 16px;

        text-shadow : none;

        box-shadow : none;

        color : #fff;

    }

     

    #text_1 {

        font-size : 11px;

        font-family : Arial;

    }

     

    #text_5 {

        font-family : 'PT Sans Caption', sans-serif;

        font-weight : bold;

        font-size : 19px;

        text-align : center;

    }

     

    #text_6 {

        font-family : 'PT Sans Caption', sans-serif;

        text-align : center;

        margin-top : -32px;

        line-height : 20px;

     

    }

     

  • Profile Image
    Kiran
    Answered on December 05, 2016 at 06:42 PM

    Unfortunately, the form embedded using lightbox is not mobile responsive. Could you try embedding the form using the script below and see if that works?

    <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript">

        var parentWidth = window.innerWidth;

        if(window.innerWidth <= 499) {parentWidth = window.innerWidth;} else {parentWidth =  500;}

     

    var JFL_63385189020153 = new JotformFeedback({ formId: '63385189020153', base: 'https://form.jotform.com/', windowTitle: 'Free Newsletter!', background: '##000000', fontColor: '#FFFFFF', type: '2', height: 1000, width: parentWidth, openOnLoad: true }); </script>

    Let us know if you need any further assistance. We will be happy to assist.  

  • Profile Image
    aesantana1
    Answered on December 06, 2016 at 02:00 PM

    You're amazing. Thanks so much. I am incredibly grateful!