Form border not showing on the website where it is embedded

  • Profile Image
    Stokes_Taryn
    Asked on December 09, 2020 at 03:55 PM

    My border is not adding on all sides on my second page. How do I change the background color on the "thank you" page?



  • Profile Image
    Mike_G
    Answered on December 09, 2020 at 07:50 PM

    You can change the background color of the Thank-you page by injecting the custom CSS codes I have prepared below into your form.

    .thankyou #stage {

      background: green !important;

    }

    Reference Guide: How-to-Inject-Custom-CSS-Codes

    Note: You can change the color "green" to your preferred background color.

    As for the border around your form, the border appears to be showing when I checked your form using its direct link.

    1607561131_5fd16fab92001_zt201209_194521

    And, it is probably just cut-off when embedded on the website you linked.

    1607561259_5fd1702b77baf_zt201209_194726

    You can try adjusting the height of the iframe embed codes of your form that you have embedded on your website.

    <iframe id="JotFormIFrame-203384748954064" title="Year-End Checklist" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/203384748954064" frameborder="0" style=" min-width: 100%; height:600px; border:none;" scrolling="no" > </iframe>

    Please give it a try and let us know if you need any further assistance.

  • Profile Image
    Stokes_Taryn
    Answered on December 10, 2020 at 11:17 AM

    I tried both those codes and it didn't change how the form border looked, it also didn't change the "Thank You" page form color. I apologize the background is white, I want the whole form to be white on that last page.

  • Profile Image
    Rehan_F
    Answered on December 10, 2020 at 12:18 PM

    Did you remove the form from the website page? Here is what I see:

    1607620488_5fd2578854d4a_

    Kindly let us know here when your form is embedded on the webpage again so we can check it.

    Thanks

  • Profile Image
    Stokes_Taryn
    Answered on December 10, 2020 at 12:19 PM

    I apologize I did not realize the page was not enabled. It should be visible now.

  • Profile Image
    Amjad_A
    Answered on December 10, 2020 at 01:50 PM

    Hi,

    It seems that you have not changed the height of the iframe embed codes of your form that you have embedded on your website.

    <iframe id="JotFormIFrame-203384748954064" title="Year-End Checklist" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/203384748954064" frameborder="0" style=" min-width: 100%; height:600px; border:none;" scrolling="no" > </iframe>

    Please make sure you have changed the height to 600px in the iFrame. I have inspected the element and it seems to be working fine:

    1607626193_5fd26dd138fb0_iFrame.png

    Hope this helps let us know if you need any further assistance.

  • Profile Image
    Stokes_Taryn
    Answered on December 10, 2020 at 04:19 PM

    I have changed it now to 600 however when you hit submit or what ever the button says the second page where you input your email address is still cut off on the bottom.

  • Profile Image
    Mike_G
    Answered on December 10, 2020 at 08:09 PM

    We would like to apologize for any inconvenience. To fix the issue, instead of updating the height property to the iframe embed codes, please try adding a min-height property with a value of 600px.

    <iframe id="JotFormIFrame-203384748954064" title="Year-End Checklist" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/203384748954064" frameborder="0" style=" min-width: 100%; min-height:600px; height:600px; border:none;" scrolling="no" > </iframe>

    Kindly give it a try and let us know if you still continue to encounter any issues.

    On the other hand, I see that you have already injected the custom CSS codes for your form's Thank-You page on your form.

    1607648875_5fd2c66b0641b_zt201210_200701

    Feel free to let us know if you need any further assistance.