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

    Change Background of Thank you Page

    Asked by forumgestaoestrategia on May 13, 2015 at 03:26 PM

    In the thank you page, I need to put the same form background: http://www.gestaoestrategia.com.br/mobile/back.jpg

     

    But he needs to pick up the entire screen, the same as the form.

     

    Current HTML:

    <p>&nbsp;</p>

    <div style="width: 100%; height: 1080px; background-color: #232323; text-align: center;">

    <h1><img style="border: 0;" src="//www.gestaoestrategia.com.br/mobile/logoge.png" alt="Gest&atilde;oLogo" width="335" height="129" /></h1>

    <h1><span style="font-size: medium; font-family: arial, helvetica, sans-serif;"><br /></span></h1>

    <h1><span style="font-size: medium; font-family: arial, helvetica, sans-serif; color: #ffffff;">Confirmamos o preenchimento das seguintes credenciais:</span></h1>

    <p><span style="font-family: arial, helvetica, sans-serif; font-size: medium; color: #ffffff;">Participante 01</span><span style="color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: medium;">: <strong>{nomeCompleto3}</strong></span></p>

    <p><span style="font-family: arial, helvetica, sans-serif; font-size: medium; color: #ffffff;">Participante 02</span><span style="color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: medium;">:&nbsp;<strong>{nomeCompleto119}</strong></span></p>

    <p><span style="font-family: arial, helvetica, sans-serif; font-size: medium; color: #ffffff;">Participante 03</span><span style="color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: medium;">:&nbsp;</span><strong><span style="color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: medium;">{nomeCompleto134}</span></strong></p>

    <p>&nbsp;</p>

    <p><span style="font-family: arial, helvetica, sans-serif; font-size: medium; color: #ffffff;"><strong><br /></strong></span></p>

    <p><span style="font-size: medium; font-family: arial, helvetica, sans-serif; color: #ffffff;">O c&oacute;digo de confirma&ccedil;&atilde;o de seu credenciamento &eacute;:&nbsp;<strong>{numeroDe49}</strong></span></p>

    </div>

  • Profile Image
    JotForm Support

    Answered by Kiran on May 13, 2015 at 04:21 PM

    Please remove the first two lines of the current html (blue color highlighted below) and replace with the following code (Yellow color highlighted) in order to have the background image on your thank you page.

    <p>&nbsp;</p>

    <div style="width: 100%; height: 1080px; background-color: #232323; text-align: center;">

    to be replaced with

    <div style="background-size: cover; background-image: url(http://www.gestaoestrategia.com.br/mobile/back.jpg); background-repeat: no-repeat; background-attachment: fixed; text-align: center;">

    Making these changes on your Thank you page HTML source, thank you message should be displayed as below :

    Hope this information helps! Let us know if you need any further assistance. We will be happy to help.

    Thanks!

  • Profile Image

    Answered by forumgestaoestrategia on May 14, 2015 at 07:32 AM

    Hello Kiran, good morning!

     

    Thanks for the quick return, as always support you is always fast and correct.

     

    I forgot to mention, but the background of the page needs to stay on the entire page, need to fill out the red part well.

     

    Can you help me?

     

    one more time thank you!

  • Profile Image
    JotForm Support

    Answered by Kiran on May 14, 2015 at 09:31 AM

    Please try replacing the <div> element in the beginning of the code with the following :

    <div style="background-size: cover; background-image: url(http://www.gestaoestrategia.com.br/mobile/back.jpg); background-repeat: no-repeat; text-align: center; height: 100%; width: 100%; position: fixed; left: 0; top: 0;">

    This is how it looks like after replacing with the above code :

    Hope this information helps!