Embedded form is not showing properly

  • dogproofgear
    Asked on July 17, 2019 at 5:48 PM

    Hi, I have tried every type of embedding method (except downloading source code, since I wouldn't know what to do with that). Two of my forms are having the same issue, which is that they're getting cut off on the right side.

    https://www.lastleash.org/pages/wholesale-order-form-credit-debit-card

    https://www.lastleash.org/pages/wholesale-order-form-ach-payment

     

    The other form is completely not showing up. 

    https://www.lastleash.org/pages/wholesale-application-form

     

    How do I fix this? 

     

    P.S. You can use "test" in the first field to unlock the rest of the form. 



  • jherwin
    Replied on July 17, 2019 at 10:11 PM

    The form embedded in these two webpages are working fine on my end:

    https://www.lastleash.org/pages/wholesale-order-form-credit-debit-card

    https://www.lastleash.org/pages/wholesale-order-form-ach-payment

    Please try clearing your browser cache and see if it now works as expected. If the issue persists, kindly send us a screenshot so we can check it on our end.

    Guide: How-to-Post-Screenshots-to-Our-Support-Forum

    As for the form embedded to the webpage below:

    https://www.lastleash.org/pages/wholesale-application-form

    You need to adjust the embed code height so you can show the full form. Please try to embed your form using the stripped iFrame embed code for your form below:

    <iframe id="JotFormIFrame-91856568537171" title="Wholesale Application Form" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/91856568537171" frameborder="0" style="width: 1px; min-width: 100%; height:1400px; border:none;" scrolling="no" > </iframe>

    Guide: Getting-the-Form-iFrame-Code

    Please give it a try and let us know how it goes.

  • dogproofgear
    Replied on July 18, 2019 at 3:25 PM

    Hi, thanks for the tips. 

    For the first two links, the issue persists while in incognito mode (no cookies, cache, etc). Upon further testing, it might have something to do with the responsive code because if I enlarge the window big enough or shrink it down enough, the form shows properly. 1563477845Screen Shot 2019 07 18 at 12 Screenshot 10

    For the last link (https://www.lastleash.org/pages/wholesale-application-form), that seems to have fixed the problem. 

  • Ivaylo JotForm Support
    Replied on July 18, 2019 at 4:48 PM

    What emebedding method do you use for these two forms?

    Can you please try to use the IFrame embed code? Here is the guide:

    https://eu.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Please test and let us know whether it works for you. We will wait for your response.

  • dogproofgear
    Replied on July 18, 2019 at 6:01 PM

     

    As I said, I've already tried that method. Here it is again, same results. 

    https://www.lastleash.org/pages/wholesale-order-form-ach-payment

    1563487338Screen Shot 2019 07 18 at 3 Screenshot 10

  • AshtonP
    Replied on July 18, 2019 at 9:09 PM

    You can insert the following code - 

     You can try adjusting the form's width so that it will match your website and not be cut off at the right. Here's a custom CSS code that you can use:

    .jotform-form {

    max-width: 769px !important;

    padding-left: none !important;

    padding-right: none !important;

    }

    You might also be interested in this guide about custom CSS code: http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes 

    I hope this helps. Let us know should you need further assistance.

  • dogproofgear
    Replied on July 19, 2019 at 12:36 AM

    I followed the instructions found here (https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes) to inject the following CSS to the form:

    1563511132Screen Shot 2019 07 18 at 9 Screenshot 10

     

    Then, I re-embedded the iframe code, just in case that's necessary. It didn't have any affect. 

    1563510994Screen Shot 2019 07 18 at 9 Screenshot 21

  • jherwin
    Replied on July 19, 2019 at 1:57 AM

    I injected this custom CSS code to the forms embedded in your webpage:

    .supernova .form-all, .form-all {
            width: 600px!important;
    }

    Kindly check your webpage and see if it works now as expected.

  • dogproofgear
    Replied on July 19, 2019 at 4:13 PM

    Alright, that didn't work perfectly (there were still some issues with the responsive code of Shopify and the responsive code of the form not matching up), but it did help because I was able to create a page with lightbox links to all the forms and the css you just added made it so the lightbox code worked.

    https://www.lastleash.org/pages/wholesale

    Much thanks,

    Mati

     

  • Ivaylo JotForm Support
    Replied on July 19, 2019 at 4:39 PM

    We are glad that you found a solution.

    Let us know if we can be of any further assistance.