How can I use a background image for my form's autoresponder?

  • Profile Image
    YummyGarden
    Asked on September 03, 2012 at 03:04 PM

    I'm conducting a contest, and upon submission of our online registration, an email confirmation will be sent to appliacants. In the confirmation is auto-response CSS codes to fill in their name, contestant ID#, etc.

    I would like to have a decorative border around this text. I have an image, but it moves the text around and won't allow for the text to be in front of it. This image and text will be printed out for registrants to use in person as proof of pre-registration. It is unique to each applicant.

     

    What do I do?

  • Profile Image
    fxr
    Answered on September 03, 2012 at 03:56 PM

    Can you link us to the form or the thanyou page that you are working on?

    My guess would put the text in div and use this image as the background-image of that div, but would need to have a better idea of what you are working with to be totally happy thats the best way forward. 

  • Profile Image
    Deygus
    Answered on September 03, 2012 at 04:57 PM

    Hi, you could try using the following code that I have created for you and adjust the elemental attributes to meet your needs (size, image, color, border, etc).

    <style>

    .background_image

    {

     background:url(https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcQcc4FGs7zNI6aQKv2CKNWdhUUU0pOGyOhbX24aGI4NG9WWs5t-);  /* places an image to display */

     width:100px;                     /* width of your image */

     height:100px;                    /* height of your image */

     border:1px solid #FFFF00;        /* border around your image if desired */

     overflow:hidden;                 /* stops div from changing sizes */

     }

    .text_properties

    {

     border:1px solid #FFFFFF;        /* border placed around text if desired */

     padding-left:2px;                /* position of text in inner div */

     padding-top:0px;                 /* position of text in inner div */

     padding-right:2px;               /* position of text in inner div */

     padding-bottom:2px;              /* position of text in inner div */

     color:#FF0000;                    /* text color */

     font-size:12px;                  /* font size */

     font-weight:bold;                /* font weight */

     font-family:Arial;               /* font family */

     text-decoration:underline;       /* text decoration */

     margin-left:2px;                 /* left position of your text */

     margin-top:76px;                 /* top position of your text */

     }

    </style>

    <div class="background_image">

    <div class="text_properties">Test 1</div>

    </div>

     

    The end result will look like this:

    If you need more help let us know. I hope this helps you.

  • Profile Image
    YummyGarden
    Answered on September 03, 2012 at 07:09 PM

    I'm not sure if that is something that I can pull off or even begin to understand :-(

    How do I test my email conformation to make sure that it plugs in the correct information from each unique registrant with out using my form usage?

    When I do a test, ti just says {nameOf} and all the plug ins.

  • Profile Image
    srbayless
    Answered on September 03, 2012 at 07:32 PM

    that is a good questions.  I use sitepal and I would love to place a sitepal on my thank you page.

  • Profile Image
    idarktech
    Answered on September 03, 2012 at 09:30 PM

    @YummyGarden,

    Is this something that you want to achieved? http://form.jotform.me/form/21880967745468

    Just check the thank you page background. I have wrap the text with a div tag, something like what my colleague have mentioned above:

    <div style="background: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/8774_2.png) #444; height: 800px; overflow: hidden; margin: -8px;">

    <div style="text-align: center;">

    <h1>Thank You!</h1>

    Your submission has been received.

    </div>

    </div>

    ----------------------------------

    @srbayless

    I'm sorry but JotForm do not allow embedding script codes to thank you pages. As a workaround, create a separate thank you page on your site and point your form thank you URL to your page containing your sitepal. You may check this guide: https://www.jotform.com/help/38-How-to-Redirect-to-a-Page-After-Form-Submission

    Thanks.

  • Profile Image
    YummyGarden
    Answered on September 03, 2012 at 11:28 PM

    Hi,

    That's not exactly what I am trying to accomplish.

    When an applicant submits their application, an auto-response email will be sent to them. This is done through the Auto-Responder, not the Thank You message or email. Here is an example of what I would like the email to look like after submitting and application and receiving the email (with the exception of the auto-fill codes, which will automatically fill in the correct information for each unique applicant)

     

     

    They will print this out from home, but it will automatically have thier name, age group and the unique ID#

     

    Please help me pull this off :-)

  • Profile Image
    NeilVicente
    Answered on September 03, 2012 at 11:40 PM

    @YummyGarden

    Does the following form's autoresponder's appearance fit your requirements?

    http://www.jotform.me/form/22467775226461?

    Feel free to clone the said form to your account.

    By the way, the Test Email function can only send emails with form data placeholders, such as {nameOf}, because the form was not really submitted in the first place.

    A live submission will generate the actual information entered instead of the placeholders.

    If you need specific information on how it can be pulled off, just let me know.

  • Profile Image
    YummyGarden
    Answered on September 03, 2012 at 11:48 PM

    @NeilVicente

     

    Will cloning this form change anything else on my current form set up and CSS codes? How did you get the frame to be behind/around the text? For me, the text is sitting at the bottom of the email, outside of the frame.

    I know the form data placeholders will come with the TEST email, but I'd like to see the actual email work without loosing a form usage.

  • Profile Image
    jeanettebmz
    Answered on September 04, 2012 at 12:14 AM

    @YummyGarden

     No, it won't change anything, as it is a clone of your form.

    However, if you want to do it by yourself, here you have the code, by the way you can accomplish that, using the background-image HTML style 

    <p>&nbsp;</p>
    <table style="background-image: url(http://farm9.staticflickr.com/8179/7923617442_54af41127a_b.jpg);" border="0" cellspacing="0" cellpadding="0" width="545px" height="744px" bgcolor="#f7f9fc">
    <tbody>
    <tr>
    <td colspan="2" rowspan="6" width="50%" align="center">
    <p><span style="font-family: impact, chicago; font-size: xx-large; background-color: #ffffff;">Pumpkin&nbsp;</span><span style="font-size: xx-large;"><span style="color: #ff6600;">A</span><span style="color: #ff6600;"><span style="color: #00ff00;">R</span><span style="color: #9933ff;">T</span></span></span><span style="font-family: impact, chicago; font-size: xx-large; background-color: #ffffff;">&nbsp;Contest</span></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><span style="font-family: impact, chicago; font-size: xx-large;"><span style="color: #9933ff;">Name:</span>&nbsp;</span><span style="font-family: impact, chicago; font-size: xx-large;">{fullName}&nbsp;</span></p>
    <p><span style="font-family: impact, chicago; color: #ff6600;"><span style="font-size: xx-large;">Contest</span><span style="font-size: xx-large;">&nbsp;</span><span style="font-size: xx-large;">#:&nbsp;</span></span><span style="font-family: impact, chicago; font-size: xx-large;">{id}</span></p>
    <p><span style="font-family: impact, chicago;"><span style="font-size: xx-large;"><span style="color: #008000;">Age Group:</span></span><span style="font-size: xx-large;">&nbsp;</span></span><span style="font-family: impact, chicago; font-size: xx-large;">{selectT</span><span style="font-family: impact, chicago; font-size: xx-large;">he}</span></p>
    <p><span style="color: #3366ff; font-family: impact, chicago; font-size: xx-large;">Art Creation:&nbsp;</span><span style="font-family: impact, chicago; font-size: xx-large;">{nameOf}&nbsp;</span></p>
    <p>&nbsp;</p>
    <p><span style="color: #3366ff; font-family: impact, chicago; font-size: xx-large;">&nbsp;</span></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </td>
    </tr>
    </tbody>
    </table>
    <p><br /><br /></p>

     

    You would need to insert  that HTML code into your autoresponder email body,  just click on the HTML BUTTON , as shown below

  • Profile Image
    YummyGarden
    Answered on September 04, 2012 at 12:32 AM

    I tried the codes. It did send the image behind the text as I had wanted, but I filled out the application as a TEST so I could see the data placeholders fill in my information. Unfortunately, it did not nor did it include the frame image at all.

    This is what it looked like in my email:

     

    UPDATE: I used the clone and the image did show up in the email auto-response. However, the Age Group data placeholder gave no result.

  • Profile Image
    idarktech
    Answered on September 04, 2012 at 02:35 AM

    @YummyGarden

    Can you try updating your age group field, just make some changes on its options and save your form. Now try to retest it again.

    I can't seem to replicate it with my form after the clone.  http://form.jotform.me/form/22471657538461?

    You may also clone this if you like.