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

    white frame around "Thank you" page background

    Asked by tlumaczfr on October 24, 2013 at 12:34 PM

    Hi,

    I have a problem with setting background in "Thank you" page. I used the following html code to set the background color:

    <div style="width: 100%; height: 100%; border: none; background-color: #f5f5dc; text-align: center;">

    Unfortunatelly it is not working very well because I see white frame around the page on my website and even in the JotForm editor (see the screenshot).

    I'm using Google sites and I tried both gadget and iframe way of embedding JotForm code.

    Any idea how to resolve it?

    Thanks.

    Screenshot
    JotForm problem height background color Google sites style thank you page
  • Profile Image
    JotForm Support

    Answered by ardy0689 on October 24, 2013 at 01:19 PM

    Hello I tried to clone your form and embed the form using Iframe on a blank html file but I could not replicate your issue. I did see the white border around it from the "Thank You Editor" but not when you submit the form.

     

    Can you please give us the URL of your web page so that we can investigate further. A simple test page link would be fine that matches your actual web page background color or image with the embedded form in it. Thanks

  • Profile Image

    Answered by tlumaczfr on October 24, 2013 at 01:47 PM

    Hello,

    please try this url:

    http://traduction-assermentee-polonais.fr/

    Thanks.

  • Profile Image
    JotForm Support

    Answered by ardy0689 on October 24, 2013 at 02:23 PM

    Hello, I have found a solution for that. You may try to use this HTML code instead on your "Thank You Message"

    Please clear all your current HTML code of your Thank You Message and paste this instead and save.

    <div style="width: 100%; height: 100%; background-color: transparent; text-align: center;"><br /> <br /> <br />
    <h1 style="text-align: center;"><span style="font-size: small;">Dziękuję&nbsp;</span><span style="text-align: start;">{imieI4}</span><span style="font-size: small;">!</span></h1>
    <p style="text-align: center;"><span style="text-align: center;">Twoja wiadomość została wysłana</span>&nbsp;&nbsp;</p>
    <br /> <br /> <br /><br /><br /> <br /> <br /> <br /> <br /><br /> <br /> <br /> <br /> <br /> <br /> <br /><br /> <br /> <br /> <br /> <br /> <br /> <br /></div>

     

    You don't need to add border:none

    Please let us know if the above solution has fixed your problem. Thanks

  • Profile Image

    Answered by tlumaczfr on October 24, 2013 at 03:24 PM

    Didn't work. Now the whole area is white.

    You can check it at: http://traduction-assermentee-polonais.fr/

    Try something else: create and open the form from Jotform editor in preview and in new tab, then submit it and you will see the white frame around the "Thank you" page (when background is something else than white of course). I guess it must be the same for all the forms not only for mine.

    Jacek.

  • Profile Image
    JotForm Support

    Answered by abajan on October 24, 2013 at 05:13 PM

    Hi Jacek,

    Having searched our forum for solutions to this "white border" issue, I'm almost inclined to think there's no way to get rid of it. However, I'm sure it can be done. It's just that it may take some time for us to find out how.

    We'll let you know as soon as we figure this out.


    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on October 24, 2013 at 06:13 PM

    Hi again Jacek,

    I've been able to come up with something that works in Chrome but I'll need to test other browsers. For the time being, replace all of your thank you page code with this. You can see the result by completing and submitting this clone of the form.


    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on October 24, 2013 at 06:34 PM

    My tests indicate that the solution also works in Firefox, IE 8+, and Opera but not in Safari, where a 16px white border is displayed along the top of the thank you message. I might be able to correct that while retaining the current formatting in the other browsers but I'm not guaranteeing anything.

  • Profile Image
    JotForm Support

    Answered by abajan on October 24, 2013 at 07:26 PM

    Hi again,

    I've come up with a workaround that works in all of the above mentioned browsers. The only issue is a vertical scrollbar which appears in Safari. Please replace the code I earlier provided with this. (By the way, it was actually a 20px border in Safari, not a 16px one.)


    Cheers

  • Profile Image

    Answered by tlumaczfr on October 25, 2013 at 03:05 AM

    Your last code works perfectly!

    Great thank you.

    Jacek.

    PS. In fact I had to change in second div the left margin from -8px to 0px. Otherwise I could see small white square in right bottom corner of the Thank You page.

  • Profile Image

    Answered by gori-mathew on October 25, 2013 at 03:10 AM

    On behalf of my colleague you are welcome, do let us know if you  need further assistance.

    Regards!

  • Profile Image
    JotForm Support

    Answered by abajan on October 25, 2013 at 05:23 AM

    Jacek,

    You're quite right. After seeing your last reply, changing the background from #F5F5DC to red showed the white rectangle in the bottom right corner quite clearly. Then it occurred to me that substituting top and left for margin-top and margin-left respectively, in both divs (and using values of -8px and 8px for the parent and child divs respectively) might fix the scrollbar issue in Safari. And sure enough, it did! My tests with this updated code works correctly in all of my browsers.

    Incidentally, there are various techniques for centering content on a page but this is the one I used for the innermost div.


    Cheers

  • Profile Image

    Answered by tlumaczfr on October 25, 2013 at 02:28 PM

    Thanks again! :)

    Jacek.