After pasting the form code to my site, the site CSS was overriden

  • Profile Image
    St_Georges
    Asked on March 29, 2011 at 10:22 PM

    The color to the right of where the code is no longer appears on my site. How can I alter the form code so that the original style shows?

  • Profile Image
    mliz
    Answered on March 29, 2011 at 10:51 PM

    Hi,

    Please use the iframe integration so that it won't create conflict with the
    css code on your page.

    To get the iFrame code please do the following:

    1. Open the form in JotForm
    2. Click on 'Setup and Embed'
    3. Choose 'Embed Form'
    4. Select iFrame and copy the code to be posted on your site

    Let me know if this works

    Regards.

  • Profile Image
    St_Georges
    Answered on March 29, 2011 at 11:03 PM

    Thanks for your quick reply!

    The iFrame stretched the form out even more--the form fields stretched past the center column. I changed the width of the text box, but the style problem remains.

  • Profile Image
    NeilVicente
    Answered on March 30, 2011 at 01:54 AM

    Hi,

    Are you still experiencing any problem with your site's layout? Judging from how your site looks now, it seems to me that you've taken care of the last issue. If you have any other questions or concern, please let us know.

    Thank you for using Jotform.

     

    Neil

  • Profile Image
    St_Georges
    Answered on March 30, 2011 at 07:13 AM

    Hi, Neil.

    Yes, a problem remains. A color that should in the right column isn't there once the code is pasted.

  • Profile Image
    NeilVicente
    Answered on March 30, 2011 at 08:11 AM

    I assume that this is the color that you're talking about:

    Your form has nothing to do with the missing color but may I ask you what software you are using to design this page?

    Anyway, this is the missing code which I copied from the source code of your homepage:

     

    Insert that code after the 3rd tags of the 4th tags of your page's table. If you are using a code editor, insert the code after line 100 or after this snippet:

    <BR><BR> <br>td> tr> table> td>

    Hope this helps. Let me know if if doesn't.


    Neil
  • Profile Image
    liyam
    Answered on March 30, 2011 at 08:38 AM

    Hello,

    When I compared your HTML source with the other pages I saw the problem that you may have deleted some parts of your HTML tags.

    I tried recreating it from scratch and it worked fine with the form.

    This is the area where it jumbles:

    ========================================================

    <td><FONT FACE="verdana,arial" SIZE="2"><b><font size="+2">E-mail Us</font><br>
                    <br>
                
                <iframe allowtransparency="true" src="//www.jotform.com/form/10732545715" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no">
    </iframe>
                
              
      <tr>

      <td colspan="2"><div align="right"><font size="-1" FACE="verdana,arial"><A HREF="index.html">Return to Homepage</a></font></div></td>
      </tr>
    </table>
    </FORM>
    <BR><BR>



                    <br></td>
                </tr>
              </table>

             </td>
            </tr>
          </table>
        </td>
        <td width="5" align="right" background="images/4right_bg.jpg">&nbsp;</td>

    ========================================================

    As you see, there is an unclosed tags and there's even a </form> tag that does not have an opening form tag.  Now replace that part of the code with this:

    ========================================================

    <td><FONT FACE="verdana,arial" SIZE="2"><b><font size="+2">E-mail Us</font><br>
                    <br>
               
                <iframe allowtransparency="true" src="//www.jotform.com/form/10732545715" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no">
    </iframe>
       </td>
       </tr>        
      <tr>

      <td colspan="2"><div align="right"><font size="-1" FACE="verdana,arial"><A HREF="index.html">Return to Homepage</a></font></div>
     

                    <br></td>
                </tr>
              </table>

             </td>
            </tr>
          </table>
        </td>
        <td width="5" align="right" background="images/4right_bg.jpg">&nbsp;</td>

    ========================================================

    Hope this helps

     

  • Profile Image
    St_Georges
    Answered on March 30, 2011 at 10:48 PM

    I can't thank all of you enough for your help! As you can tell, I'm not the most savvy of webmasters.

    Your fix worked wonders, liyam. I'm relieved to have the page working correctly again.