Having problems with backgrounds in 3 separate forms.

  • Profile Image
    Asked on October 28, 2011 at 08:33 AM

    Hi all

    I have a site with 3 separate forms on it, they are all supposed to have the same background on them, white background with a blue sort of header border.

    The first 2 forms look fine: 



    and you can see clearly the blue top border, however on the third form, although it shows up as being there in 'My Forms' and when I am editing it - it's just not appearing when the form is live: http://ewlyn.com/testsites/HISTEMP/enquires.html

    I am a little desperate to fix this so any help would be great!



  • Profile Image
    Answered on October 28, 2011 at 09:11 AM

    http://ewlyn.com/testsites/HISTEMP/bestcover.html is now doing the exact same thing - very frustrating!

  • Profile Image
    Answered on October 28, 2011 at 10:09 AM

    Hello Louis,

    I have checked your form and here are a few things that I can point out.

    http://ewlyn.com/testsites/HISTEMP/contact.html - You placed the actual HTML code in this page.  I also noticed that because of this type of form embedding, your changes on your form did not reflect the updates on your webpage.

    https://www.jotform.com/form/90752508424 - This is the actual updated form that you have.

    The reason why the background stripe is showing on your contact.html page is because of this CSS code:

    .tbmain{ /* Changes on the form */ background: url(http://jotform.com/images/styles/style1_bg.gif) #ffffff top repeat-x !important;}


    First, let's fix your contact.html page:

    1. Remove the form HTML codes in your web page. 
    2. Get the script embed code and place it in your webpage, similar to what you did with contact.html and enquires.html


    Now, let's get to have that web pages fixed:

    To explain:  The blue stripe background that you are looking for is actually part of the form theme called JotForm Theme.  If you wish to use that background, what you can do is find the background and use CSS.

    Then insert this CSS code in your form editor via CSS Injection:

    .form-all{ background:url(http://jotform.com/images/styles/style1_bg.gif) #ffffff top repeat-x; }

    To inject the CSS code:

    1.Edit your form and click Preferences

    2. A pop-up will appear, go to Form Styles tab, at the bottom is the Inject Custom CSS field

    3. Click the "Click to Edit" part beside the Inject Custom CSS and paste the CSS code.

    4. Do these on the other forms in your form editor

    Please let us know if you need further assistance.


  • Profile Image
    Answered on October 28, 2011 at 10:19 AM

    I think I may do - that has totally lost me!

  • Profile Image
    Answered on October 28, 2011 at 10:32 AM

    OK, let's take this one at a time, and make it easier for you:

    1. Copy your bestcover.html and save a new file called contact.html
    2. Edit your contact.html, replace this code:

    <script type="text/javascript" src="http://form.jotform.com/jsform/90712508463"></script>

       with this code:

    <script type="text/javascript" src="http://form.jotform.com/jsform/90752508424"></script>

    Notice the difference between the two sets of numbers.

    3. Save the new contact.html file and upload. You will notice that the layout of the form has changed.

  • Profile Image
    Answered on October 28, 2011 at 10:53 AM

    Here's a better idea for your web pages. Instead of placing the blue stripe background in your form, let's put it in your webpages.

    1. Set the forms background to transparent.

    2. Download this image and upload it in your website: http://www.jotform.com/images/styles/style1_bg.gif

    Example: graphics/style1_bg.gif

    Editing your HTML pages:

    Now, edit the web pages: enquires.html, contact.html, and bestcover.html

    1. Find this code in the pages you're editing: <td valign="top" height="300" background="graphics/main.png">

    2. Replace the code with this one:

    <td valign="top" height="300" style="background: url(graphics/style1_bg.gif) #ffffff top repeat-x !important;">

    3. Save the HTML files and upload