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

    Put an image as background in email responder

    Asked by mommyssage on September 09, 2015 at 11:03 AM

    I have a gift certificate template all setup and ready to go. I wanted to add my gift certificate image and put some of the elements over it. Like Gift Certificate Number, Service and Recipient's name. Can you point me in the right direction of how I could code for this?! Thanks!

    Page URL:
    https://cms.jotform.com/uploads/image_upload/image_upload/mommyssage/3<br/>4548_EmailGiftCertificate.jpg

    email in template name recipient elements
  • Profile Image
    JotForm Support

    (Private)

    Answered by mert on September 09, 2015 at 11:57 AM

    Hi,

    For this operation you need to delete the table from your email template, because it doesn't let the users see the background.

    To add an background image to your email,

    - First access the source code of your mail template.

     

    - You need to add this code to your email template's source code. You can change the image URL by using blue marked area below.

    <div style="background: url(https://www.jotform.com/uploads/mommyssage/form_files/da96af7f-a4e5-4128-b8c1-4c67918093eb.jpg) #444; height: 800px; overflow: hidden; margin: -8px;"> 

     

    Everything else needs to stay inside the background <div>.

     

    </div>

     

    To make it simple, you can first apply this code, then you can add informations into your responder email. With this way, you don't need to mess with that source code again.

    The blank email template's source code looks like this after applied background image. You can directly copy this code.

    <div style="background: url(https://www.jotform.com/uploads/mommyssage/form_files/da96af7f-a4e5-4128-b8c1-4c67918093eb.jpg) #444; height: 800px; overflow: hidden; margin: -8px;"> 

     

    <p><br /><br /></p>

    <p>&nbsp;</p>

    <pre>&nbsp;</pre>

     

    </div>

     

    It needs some effort, but it does what's you asking for.

    For further assistance, please don't hesitate to ask us.

    Thanks.

  • Profile Image

    Answered by mommyssage on September 10, 2015 at 10:09 AM

    Is there any recommendations for my image size? The one I uploaded seems too large. 

  • Profile Image
    JotForm Support

    Answered by david on September 10, 2015 at 12:24 PM

    You can adjust the height of the image in the code itself:

    <div style="background: url(https://www.jotform.com/uploads/mommyssage/form_files/da96af7f-a4e5-4128-b8c1-4c67918093eb.jpg) #444; height: 800px; overflow: hidden; margin: -8px;"> 

     

    <p><br /><br /></p>

    <p>&nbsp;</p>

    <pre>&nbsp;</pre>

     

    </div>

    Changing the value of the height will allow you to control how much the image is stretched across your background. 

  • Profile Image

    Answered by mommyssage on September 10, 2015 at 01:14 PM

    I tried that and it cut off the bottom of the image

  • Profile Image

    Answered by mommyssage on September 10, 2015 at 01:34 PM

    Hey! Thanks for all the help! I found the right html to enter in and got the image the size I needed. Only one thing, when I send myself a test email the image doesn't show up. The name of the email is "Mommyssage Gift Certificate" 

  • Profile Image
    JotForm Support

    Answered by david on September 10, 2015 at 03:14 PM

    I am able to get the image to show up in the body of the notification but not in the background.  I will do some more testing and follow up once I get things sorted.

  • Profile Image
    JotForm Support

    Answered by david on September 10, 2015 at 03:28 PM

    I am able to get the original background image working with this code:

    <div style="background: url(https://www.jotform.com/uploads/mommyssage/form_files/da96af7f-a4e5-4128-b8c1-4c67918093eb.jpg) #444; height: 600px; overflow: hidden; margin: -8px;"> 

    {yourEmail}{recipientsName10}{recipientsEmail}{selectService}{specialMessage}{howTo}{giftCertificate}

    </div>

    Something in your additional styling seems to not load properly in email clients. 

     

  • Profile Image

    Answered by mommyssage on September 13, 2015 at 08:28 PM

    I reuploaded the file with a more web friendly version and it worked. Most of been too big an image! Thank you for all your help!

  • Profile Image

    Answered by mommyssage on September 13, 2015 at 09:11 PM

    Okay, no, it didn't take. I sent myself a test email and it worked perfectly. Then I did a dry run from the website and it didn't work. I sent myself a test email again and then it didn't work. It worked the first test email then stopped. I need my image to fit into the page and be sent, not my just my logo or the top half of the image. I tried adjust the height and it cuts off the bottom half. help 

     

  • Profile Image

    Answered by mommyssage on September 13, 2015 at 09:12 PM

    Here is the image https://cms.jotform.com/uploads/image_upload/image_upload/mommyssage/34593_Email-Gift-Certificate.jpg

  • Profile Image
    JotForm Support

    Answered by Charlie on September 14, 2015 at 10:06 AM

    Hi,

    This is because the email and the content dynamically changes the height and width of the images, based from the email client that you are using, but this is just my observation.

    My suggestion would be that you used a table to wrapped your code.

    Here's an example:

    <table border="0" width="600" cellspacing="0" cellpadding="0" align="center">

    <tbody>

    <tr>

    <td style="background: url('https://cms.jotform.com/uploads/image_upload/image_upload/mommyssage/34593_Email-Gift-Certificate.jpg') center/600px auto no-repeat; width: 600px; height: 600px; overflow: hidden; margin: -8px;">

    <div style="position: relative; left: 20%;">

    <p>{yourEmail}</p>

    <p>{recipientsName10}</p>

    <p>{recipientsEmail}</p>

    <p>{selectService}</p>

    <p>{specialMessage}</p>

    <p>{howTo}</p>

    <p>{giftCertificate}</p>

    </div>

    </td>

    </tr>

    </tbody>

    </table>

    This is how it looks like in my email notification when I receive it:

     

    In my case, I added it inside the <td>, you can try experimenting it, you can try adding the messages and image inside the <td> tags. You just need to consider the following:

    1. Width of the table

    2. Placement of the image

    Here's my cloned form, you can clone it and see how it was setup: http://form.jotformpro.com/form/52563475090962?. I also use this reference for the CSS syntax for the background image: http://www.w3schools.com/cssref/css3_pr_background.asp 

    I'll try to edit further to have a more appealing display. But I would advise experimenting on it so that you can adjust with your own preferences.

  • Profile Image

    Answered by mommyssage on September 18, 2015 at 01:55 AM

    Here is the code I have in there now.

    <p>&nbsp;</p>

    <table border="0" width="600" cellspacing="0" cellpadding="0" align="center">

    <tbody>

    <tr>

    <td style="background: url('https://cms.jotform.com/uploads/image_upload/image_upload/mommyssage/34593_Email-Gift-Certificate.jpg') center/600px auto no-repeat; width: 600px; height: 600px; overflow: hidden; margin: -8px;">

    <div style="position: relative; left: 20%;">

    <p><span class="centerText" style="color: #999999;">TO:</span> {recipientsName10}</p>

    <p><span class="centerText" style="color: #999999;">FROM:</span> {yourName}</p>

    <p><span class="centerText" style="color: #999999;">FOR:</span> {selectService}</p>

    <p><span class="centerText" style="color: #999999;">Message:</span> {specialMessage}</p>

    <p>Certificate Number:&nbsp;{giftCertificate21}</p>

    <p>&nbsp;</p>

    </div>

    </td>

    </tr>

    </tbody>

    </table>

     

    The new issue is the text isn't centered on the email test. The text centers fine in the client window.

  • Profile Image
    JotForm Support

    Answered by Charlie on September 18, 2015 at 03:41 AM

    Hi,

    Try this one:

    <p>&nbsp;</p>

    <table border="0" width="600" cellspacing="0" cellpadding="0" align="center">

    <tbody>

    <tr>

    <td style="background: url('https://cms.jotform.com/uploads/image_upload/image_upload/mommyssage/34593_Email-Gift-Certificate.jpg') center/600px auto no-repeat; width: 600px; height: 600px; overflow: hidden; margin: -8px;">

    <div style="display: block; margin-left: 50px !important;">

    <p><span class="centerText" style="color: #999999;">TO:</span> {recipientsName10}</p>

    <p><span class="centerText" style="color: #999999;">FROM:</span> {yourName}</p>

    <p><span class="centerText" style="color: #999999;">FOR:</span> {selectService}</p>

    <p><span class="centerText" style="color: #999999;">Message:</span> {specialMessage}</p>

    <p>Certificate Number:&nbsp;{giftCertificate21}</p>

    <p>&nbsp;</p>

    </div>

    </td>

    </tr>

    </tbody>

    </table>

     

    I changed the div style to "display:block;margin-left:50px !important;".

    You can clone my form here: http://form.jotformpro.com/form/52563475090962 

    Do let us know if that works.

  • Profile Image

    Answered by mommyssage on September 18, 2015 at 11:38 AM

    That worked perfectly! Thank you!

     

  • Profile Image
    JotForm Support

    Answered by Charlie on September 18, 2015 at 01:01 PM

    You're welcome. Glad to hear that. Should you need any assistance again, feel free to open a new thread here in the forum.

    Thank you.