WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > PROGRAMMING LANGUAGES > Scripting and Server Side > Help... form

Reply
  Thread Tools Display Modes
Old 29th April 15, 01:54 PM   #1
overburnz
WLC Member
 
Join Date: Mar 2015
Posts: 7
Default Help... form

Hi i'm trying to add a contact form to my website, i've use an online 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:

Code:
<!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="http://d2g9qbzl5h49rh.cloudfront.net/static/prototype.forms.js" type="text/javascript"></script>
<script src="http://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 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 displayed" id="input_4_captcha" class="form-captcha-image" style="background:url(http://d2g9qbzl5h49rh.cloudfront.net...loader-big.gif) no-repeat center;" src="http://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="http://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 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 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>

Last edited by meesa; 30th April 15 at 10:05 PM.
overburnz is offline   Reply With Quote
Old 29th April 15, 01:55 PM   #2
overburnz
WLC Member
 
Join Date: Mar 2015
Posts: 7
Default Re: Help... form

here's the css:

Code:
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

Last edited by meesa; 30th April 15 at 10:05 PM.
overburnz is offline   Reply With Quote
Old 30th April 15, 10:06 PM   #3
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,710
Default Re: Help... form

Do you have a live link?

Also, please use code tags, not quote tags.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:21 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.