Embedding form in a website?

overburnz

Asked 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 href="contactos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="banner">
</div>
<ul id="nav">
<li><a href="../index.html">Início</a></li>
<li><a href="#s1">Clube</a>
<span id="s1"></span>
<ul class="subs">
<li><a href="#"></a>
<ul>
<li><a href="../clube/historia.html">História</a></li>
<li><a href="../clube/orgaossociais.html">Orgãos Sociais</a></li>
<li><a href="../clube/socio.html">Tornar-me Sócio</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#s2">Eventos</a>
<span id="s2"></span>
<ul class="subs">
<li><a href="#"></a>
<ul>
<li><a href="https://www.facebook.com/events/966158743402630/">***ta Motard</a></li>
<li><a href="https://www.facebook.com/events/1574370846171931/">Os Corujas - 2015</a></li>
<li><a href="https://www.facebook.com/events/1578597819047455/">Médio Tejo - 5 Castelos, 5 Rios: 20.º Moto-Rali Motards do Ocidente</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#s3">Galeria</a>
<span id="s3"></span>
<ul class="subs">
<li><a href="#"></a>
<ul>
<li><a href="../galeria/fotos.html">Fotos</a></li>
<li><a href="../galeria/videos.html">Vídeos</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contactos.html">Contactos</a></li>
<li><a href="../parcerias/parcerias.html">Parcerias</a></li>
<li><a href="https://delta.connectserver.org:2096/">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.onSubmissionDISABLEDerror="jumpToSubmit";
});
</script>
<link href="http://d2g9qbzl5h49rh.cloudfront.net/static/formCss.css?3.2.6906" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://d2g9qbzl5h49rh.cloudfront.net/css/styles/nova.css?3.2.6906" />
<link type="text/css" media="print" rel="stylesheet" href="http://d2g9qbzl5h49rh.cloudfront.net/css/printForm.css?3.2.6906" />
<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 displayed0" 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="Reload1" align="absmiddle" style="cursor:pointer" onDISABLEDclick="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 href="mailto: humbertobebiano@hotmail.com">© 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 href="mailto: geral@motardsdoocidente.pt">Mail Geral:geral@motardsdoocidente.pt</a></div>
<p id="back-top"><a 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 Embedding form in a website? Image 1 Screenshot 22

Charlie

Replied 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.
overburnz

Replied 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 :)
Charlie

Replied on April 29, 2015 at 1: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" onDISABLEDload="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.
overburnz

Replied on April 29, 2015 at 2: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
overburnz

Replied on April 29, 2015 at 2:20 PM

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

Replied on April 29, 2015 at 2: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.