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

    Embedding form in a website?

    Asked by overburnz on April 29, 2015 at 10:06 AM

    Hi i'm trying to add a contact form to my website, i've used your form builder and everything works, but when i try to put it on my site it doesn't go to the middle of the page...

    here's my html:

    Quote:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <meta charset="utf-8" />
    <meta name="author" content="Script Tutorials" />
    <title>Motoclube Motards do Ocidente</title>
    <link target="_blank" href="contactos.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="container">
    <div class="banner">
    </div>
    <ul id="nav">
    <li><a target="_blank" href="../index.html">Início</a></li>
    <li><a target="_blank" href="#s1">Clube</a>
    <span id="s1"></span>
    <ul class="subs">
    <li><a target="_blank" href="#"></a>
    <ul>
    <li><a target="_blank" href="../clube/historia.html">História</a></li>
    <li><a target="_blank" href="../clube/orgaossociais.html">Orgãos Sociais</a></li>
    <li><a target="_blank" href="../clube/socio.html">Tornar-me Sócio</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a target="_blank" href="#s2">Eventos</a>
    <span id="s2"></span>
    <ul class="subs">
    <li><a target="_blank" href="#"></a>
    <ul>
    <li><a target="_blank" href="https://www.facebook.com/events/966158743402630/" rel="nofollow">***ta Motard</a></li>
    <li><a target="_blank" href="https://www.facebook.com/events/1574370846171931/" rel="nofollow">Os Corujas - 2015</a></li>
    <li><a target="_blank" href="https://www.facebook.com/events/1578597819047455/" rel="nofollow">Médio Tejo - 5 Castelos, 5 Rios: 20.º Moto-Rali Motards do Ocidente</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a target="_blank" href="#s3">Galeria</a>
    <span id="s3"></span>
    <ul class="subs">
    <li><a target="_blank" href="#"></a>
    <ul>
    <li><a target="_blank" href="../galeria/fotos.html">Fotos</a></li>
    <li><a target="_blank" href="../galeria/videos.html">Vídeos</a></li>
    </ul>
    </li>
    </ul>
    </li> 
    <li><a target="_blank" href="contactos.html">Contactos</a></li>
    <li><a target="_blank" href="../parcerias/parcerias.html">Parcerias</a></li>
    <li><a target="_blank" href="https://delta.connectserver.org:2096/" rel="nofollow">Webmail</a></li>
    </ul>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main">
    <script src="//d2g9qbzl5h49rh.cloudfront.net/static/prototype.forms.js" type="text/javascript"></script>
    <script src="//d2g9qbzl5h49rh.cloudfront.net/static/jotform.forms.js?3.2.6906" type="text/javascript"></script>
    <script type="text/javascript">
    JotForm.init(function(){
    setTimeout(function() {
    $('input_3').hint('ex: meuemail@mail.com');
    }, 20);
    JotForm.initCaptcha('input_4');
    JotForm.onSubmissionError="jumpToSubmit";
    });
    </script>
    <link target="_blank" href="http://d2g9qbzl5h49rh.cloudfront.net/static/formCss.css?3.2.6906" rel="nofollow" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" target="_blank" href="http://d2g9qbzl5h49rh.cloudfront.net/css/styles/nova.css?3.2.6906" rel="nofollow" />
    <link type="text/css" media="print" rel="stylesheet" target="_blank" href="http://d2g9qbzl5h49rh.cloudfront.net/css/printForm.css?3.2.6906" rel="nofollow" />
    <form class="jotform-form" action="http://submit.jotformeu.com/submit/51183638782362/" method="post" name="form_51183638782362" id="51183638782362" accept-charset="utf-8">
    <input type="hidden" name="formID" value="51183638782362" />
    <div class="form-all">
    <ul class="form-section page-section">
    <li class="form-line jf-required" data-type="control_fullname" id="id_1">
    <label class="form-label form-label-left form-label-auto" id="label_1" for="input_1">
    Nome Completo:
    <span class="form-required">
    *
    </span>
    </label>
    <div id="cid_1" class="form-input jf-required">
    <span class="form-sub-label-container" style="vertical-align: top">
    <input class="form-textbox validate[required]" type="text" size="10" name="q1_nomeCompleto[first]" id="first_1" />
    <label class="form-sub-label" for="first_1" id="sublabel_first" style="min-height: 13px;"> Nome </label>
    </span>
    <span class="form-sub-label-container" style="vertical-align: top">
    <input class="form-textbox validate[required]" type="text" size="15" name="q1_nomeCompleto[last]" id="last_1" />
    <label class="form-sub-label" for="last_1" id="sublabel_last" style="min-height: 13px;"> Apelido </label>
    </span>
    </div>
    </li>
    <li class="form-line jf-required" data-type="control_email" id="id_3">
    <label class="form-label form-label-left form-label-auto" id="label_3" for="input_3">
    E-mail
    <span class="form-required">
    *
    </span>
    </label>
    <div id="cid_3" class="form-input jf-required">
    <input type="email" class=" form-textbox validate[required, Email]" id="input_3" name="q3_email3" size="30" value="" />
    </div>
    </li>
    <li class="form-line jf-required" data-type="control_textarea" id="id_5">
    <label class="form-label form-label-left form-label-auto" id="label_5" for="input_5">
    Deixe aqui a sua mensagem:
    <span class="form-required">
    *
    </span>
    </label>
    <div id="cid_5" class="form-input jf-required">
    <textarea id="input_5" class="form-textarea validate[required]" name="q5_deixeAqui5" cols="40" rows="6"></textarea>
    </div>
    </li>
    <li class="form-line jf-required" data-type="control_captcha" id="id_4">
    <label class="form-label form-label-left form-label-auto" id="label_4" for="input_4">
    Coloque o Captcha:
    <span class="form-required">
    *
    </span>
    </label>
    <div id="cid_4" class="form-input jf-required">
    <div class="form-captcha">
    <label for="input_4"> <img alt="Captcha - Reload if it's not displayed" id="input_4_captcha" class="form-captcha-image" style="background:url(http://d2g9qbzl5h49rh.cloudfront.net...loader-big.gif) no-repeat center;" src="//d2g9qbzl5h49rh.cloudfront.net/images/blank.gif" width="150" height="41" /> </label>
    <div style="white-space:nowrap;">
    <input type="text" id="input_4" class="form-textbox validate[required]" name="captcha" style="width:130px;" />
    <img src="//d2g9qbzl5h49rh.cloudfront.net/images/reload.png" alt="Reload" align="absmiddle" style="cursor:pointer" onclick="JotForm.reloadCaptcha('input_4');" />
    <input type="hidden" name="captcha_id" id="input_4_captcha_id" value="0" />
    </div>
    </div>
    </div>
    </li>
    <li class="form-line" data-type="control_button" id="id_2">
    <div id="cid_2" class="form-input-wide">
    <div style="text-align:left" class="form-buttons-wrapper">
    <button id="input_2" type="submit" class="form-submit-button">
    Enviar
    </button>
    </div>
    </div>
    </li>
    <li style="display:none">
    Should be Empty:
    <input type="text" name="website" value="" />
    </li>
    </ul>
    </div>
    <input type="hidden" id="simple_spc" name="simple_spc" value="51183638782362" />
    <script type="text/javascript">
    document.getElementById("si" + "mple" + "_spc").value = "51183638782362-51183638782362";
    </script>
    </form>
    </div>
    <div id="footer">
    <p id="copyright"><a target="_blank" href="mailto: humbertobebiano@hotmail.com">&copy; Humberto Bebiano 2015</a></p>
    <div class="info">Rua Ondina Pereira, nº175, 5ºE - Rana 2785-343 São Domingos de Rana - Nif: 503 414 123 <br> Tlm: 925015963 <a target="_blank" href="mailto: geral@motardsdoocidente.pt">Mail Geral:geral@motardsdoocidente.pt</a></div>
    <p id="back-top"><a target="_blank" href="#">Vais subir?</a></p>
    </div>
    </div>

    </body>
    </html>

     

    here's the css:

    Quote:
    html {
    background-color: #fff;
    height: 100%;
    }
    body {
    color: #333333;
    font: 0.75em/1.5em Arial,sans-serif;
    margin: 0;
    }
    .right {
    float:right;
    width: 275px;
    background-color:#FFFF33;
    height: 700px;
    }
    .left {
    float:left;
    width: 275px;
    background-color:#FFFF33;
    height: 700px;
    }
    #footer {
    padding: 40px 0 0 0;
    overflow: hidden; 
    clear: both;
    background-color:#FFFF33;
    }
    #footer p#copyright {
    font-size: 12px; 
    float: left; 
    color: #000000;
    margin-left: 10px;
    }
    #footer p#back-top {
    font-size: 12px; 
    float: right; 
    color:#000000;
    margin-right: 10px;
    }
    #footer a {
    color: #000000; 
    text-decoration: none;
    }
    #footer a:hover {
    color: #666666;
    }
    .banner {
    background-repeat: no-repeat;
    background-image:url(../banner_prov.jpg);
    height:350px;
    width: auto;
    background-size:cover;
    }
    #nav span {
    display: none;
    }
    #nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    }
    #nav {
    background-color: #0000FF;
    border-bottom: 5px solid #FF0;
    float: left;
    position: relative;
    width: 100%;
    }
    #nav ul.subs {
    background-color: #0000ff;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #ff0;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
    }
    #nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
    }
    #nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
    }
    #nav > li > a {
    color: #ff0;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
    }
    #nav > li:hover > a, #nav > a:hover {
    background-color: #f55856;
    color: #FF0;
    }
    /* submenu */
    #nav li:hover ul.subs {
    display: block;
    }
    #nav ul.subs > li {
    display: inline-block;
    float: none;
    padding: 10px 1%;
    vertical-align: top;
    width: 33%;
    }
    #nav ul.subs > li a {
    color: #FF0;
    line-height: 20px;
    }
    #nav ul li a:hover {
    color: #F55856;
    }
    #nav ul.subs > li > a {
    font-size: 1.3em;
    margin-bottom: 10px;
    text-transform: uppercase;
    }
    #nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
    }
    #nav ul.subs > li li:hover {
    padding-left: 15px;
    }
    .info {
    text-align: center;
    color: black;
    height: 35px;
    width: 550px;
    background:#09F;
    clear: both;
    display: inline-block;
    margin-left: 20%;
    }
    .form-line{
    padding-top:12px;
    padding-bottom:12px;
    }
    .form-all{
    width:350px;
    color:#555 !important;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
    font-size:14px;
    margin-top: 10%;
    }
    .main {
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
    }

    when i open the page, the form is on the left bottom side of the page, instead of being in the middle, i don't understand much of js, but i believe the css is the problem.

    any help would be gratefuul 

    Screenshot
    contact form form creation Form Builder form class JotForm textarea
  • Profile Image
    JotForm Support

    Answered by Charlie on April 29, 2015 at 12:08 PM

    Hi,

    Is the website live? It is better if you can share us the link so that we can inspect better on how the form is embedded in your website. 

    Also, may I know how you are embedding the form? You can check this guide on how to embed the JotForm to a web page: http://www.jotform.com/help/34-Adding-a-Form-to-a-Web-Page.

    For a quick guide, you can check the "Embed Form" options in the Form builder to get the embed code of your form.

     

    Do let us know if you need more assistance on this.

    Thanks.

  • Profile Image

    Answered by overburnz on April 29, 2015 at 12:44 PM

    http://projectoverburnz.esy.es/contactos/contactos.html

     

    that is the live page, i've embedded the code just like you said, now it's on the bottom... 

     

    Thanks for the help :)

  • Profile Image
    JotForm Support

    Answered by Charlie on April 29, 2015 at 01:11 PM

    You could try embedding using the iFrame code, here is the guide: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

    But, make sure that the width matches the width of your main div. The reason why it is being placed at the bottom because the width of the form is larger that the main div.

    Here's an example iFrame code that I copied and pasted in my end, make sure that the width is larger that your main div, in my case, I changed it to 700px.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50885628517971" frameborder="0" style="width:700px; height:539px; border:none;" scrolling="no"></iframe>

    See if that works.

    Thank you.

  • Profile Image

    Answered by overburnz on April 29, 2015 at 02:04 PM

    okay, thanks now it's on the right position, but cutted in half, and i've alreday tried changing width and nothing... lolol 

  • Profile Image

    Answered by overburnz on April 29, 2015 at 02:20 PM

    Fixed! used iframe and just change the with to 50% :)

  • Profile Image
    JotForm Support

    Answered by Charlie on April 29, 2015 at 02:25 PM

    Great! I'm glad you have already fixed the positioning of it. 

    For other concerns, please do not hesitate to open a new thread here in the forum anytime.

    Thank you.