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

    having problem with coding!!!!

    Asked by The_Mighty_Optiq on April 18, 2012 at 06:14 PM

    here's the link to my form

    http://form.jotform.us/form/21075340636145

    ... in the regular web browser it looks PERFECT.. all the links are aligned AND the src I have for the iframe shows up... when I bring it over into this it doesn't work... the links go downward like stairs and the dropdowns have a huge gap between them... and the src l ink isn't showing up.... why is this happening?

  • Profile Image

    Answered by fxr on April 18, 2012 at 09:14 PM

    What is the exact nature of the problem you are having? it looks like you trying to use a lot of javascript/bespoke HTML in that form. 

  • Profile Image

    Answered by The_Mighty_Optiq on April 18, 2012 at 10:03 PM

    actually it's CSS.... as far as the problem.... I thought it would be obvious... maybe it looks different on your end, but on mine this is way it looks like

     

    but the SAME CODING loaded in my browser as an html file looks like this

     

    The page you see in the second pic isn't loading into the frame in the first one... which I don't understand because I did another sample like that wit hth iframe first to see if it would work and it did... Then the links step downwards and the drop down menus have a huge gap in between them... while on the second pic they're snug right under each other with a 1px space. The scroll bar on the iframe isn't present on th first pic either... and while experimenting yesterday even when I didn't have the root worked out properly to display the page the scroll bar was still there...  I don't know why it's doing this once I inject it into the html editor on here.  Here's the coding for the whole page...

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Optiq</title>
    <style type="text/css">
        * {padding:0; margin:0;}
        body {padding:5px; font-family:Arial, Helvetica, sans-serif; margin-left:auto; margin-right:auto; text-align:center;}
        ul {list-style:none; margin-left:auto; margin-right:auto;}
        ul li {float:left; padding-right:1px; position:relative;}
        ul a {display:table-cell; vertical-align:middle; width:84px;                       height:50px; text-align:center; background:#69C;
              color:#FFF; text-decoration:none;}
        ul a:hover {background:#09C;}
        li > ul {display:none; position:absolute; left:0; top:100%;}
        li:hover > ul {display:block; }
        li > ul li {padding:0; padding-top:1px;}
        li > ul li > ul {left:100%; top:0; padding-left:1px;}
        li > ul li > ul li {width:85px; }
        li:hover > a {background:#09C;}
        #frameholder {width:516px; height:600px; margin-left:auto;
        margin-right:auto;}
        #links {width:516px; height:52px; margin-left:auto;
                margin-right:auto;}
       

    </style>

    </head>

    <body>
    <div id="links">
    <ul>
    <li><a target="_blank" href="#">Home</a></li>
    <li><a target="_blank" href="#">T Shirts</a>
        <ul>
        <li><a target="_blank" href="#">Men</a>
            <ul>
            <li><a target="_blank" href="#">Regular</a></li>
            <li><a target="_blank" href="#">V-Neck</a></li>
            <li><a target="_blank" href="#">Ringer</a></li>
            <li><a target="_blank" href="#">Raglan</a></li>
            <li><a target="_blank" href="#">Tank Top</a></li>
            <li><a target="_blank" href="#">Sleeveless</a></li>
            <li><a target="_blank" href="#">Hoodie</a></li>
            </ul>
        </li>
        <li><a target="_blank" href="#">Women</a>
            <ul>
            <li><a target="_blank" href="#">Regular</a></li>
            <li><a target="_blank" href="#">V-Neck</a></li>
            <li><a target="_blank" href="#">Scoop Neck</a></li>
            <li><a target="_blank" href="#">Ringer</a></li>
            <li><a target="_blank" href="#">Raglan</a></li>
            <li><a target="_blank" href="#">Tank Top</a></li>
            <li><a target="_blank" href="#">Spaghetti Strap</a></li>
            <li><a target="_blank" href="#">Hoodie</a></li>
            </ul>
        </li>
        <li><a target="_blank" href="#">Boys</a>
            <ul>
            <li><a target="_blank" href="#">Regular</a></li>
            <li><a target="_blank" href="#">V-Neck</a></li>
            <li><a target="_blank" href="#">Ringer</a></li>
            <li><a target="_blank" href="#">Raglan</a></li>
            <li><a target="_blank" href="#">Tank Top</a></li>
            <li><a target="_blank" href="#">Sleeveless</a></li>
            <li><a target="_blank" href="#">Hoodie</a></li>
            </ul>
        </li>
        <li><a target="_blank" href="#">Girls</a>
            <ul>
            <li><a target="_blank" href="#">Regular</a></li>
            <li><a target="_blank" href="#">V-Neck</a></li>
            <li><a target="_blank" href="#">Scoop Neck</a></li>
            <li><a target="_blank" href="#">Ringer</a></li>
            <li><a target="_blank" href="#">Raglan</a></li>
            <li><a target="_blank" href="#">Tank Top</a></li>
            <li><a target="_blank" href="#">Hoodie</a></li>
            </ul>
        </li>
        <li><a target="_blank" href="#">Babies</a>
            <ul>
            <li><a target="_blank" href="#">Regular</a></li>
            <li><a target="_blank" href="#">Onsie</a></li>
            <li><a target="_blank" href="#">Bib</a></li>
            <li><a target="_blank" href="#">Hoodie</a></li>
            </ul>
        </li>
        </ul>
        </li>
    <li><a target="_blank" href="#">Gallery</a></li>
    <li><a target="_blank" href="#">Testimonials</a></li>
    <li><a target="_blank" href="#">Bulk Specials</a>
        <ul>
        <li><a target="_blank" href="#">Family Reuinion</a></li>
        <li><a target="_blank" href="#">Sports Team</a></li>
        <li><a target="_blank" href="#">Social Club</a></li>
        <li><a target="_blank" href="#">Community Event</a></li>
        <li><a target="_blank" href="#">Company Apparel</a></li>
        </ul>
    </li>
    <li><a target="_blank" href="#">Contact</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="frameholder">
    <iframe name="Content" id="Content" width="516px" height="600px"
     src="//form.jotform.us/form/20666463850154" scrolling="yes" frameborder="2px">
    </iframe>
    </div>
    </body>
    </html>

     

    The only difference is I loaded the styles into the CSS part of the page from the preferes menu and the rest of the html into the editor... presently it's just the coding from <div id="links" to the closing div at the bottom..... and it shows the same thing as it does with everything inside of it from html to the closing html....  I'm lost.. lol

  • Profile Image
    JotForm Support

    Answered by idarktech on April 18, 2012 at 11:25 PM

    Hi,

    Is this what you are trying to achieved? http://form.jotform.me/form/21088451105446?

    I just cloned your form and added the codes that you've shared here. Feel free to clone it back.

    Just a reminder, do not edit your HTML codes on the work area. You should click HTML button on the toolbar everytime you edit/paste/add your HTML codes. Check this screen:

    Hope this helps. Thanks.

  • Profile Image

    Answered by The_Mighty_Optiq on April 19, 2012 at 01:32 AM

    SPLENDID!!!!! THAT'S WHAT IT WAS!!!! THANKS!!!!!