|
@ilovephp - ma kakve tabele, to se retko koristi.
Sredio sam formu, naravno ti ćeš morati malo da je doteraš, ako treba. Dodao sam i neki CSS reset kako bi se isto prikazivalo u različitim browser-ima.
<html>
<head>
<meta charset="utf-8">
<title>PHP Contact Form Style Demo</title>
<style type="text/css">
/* CSS Reset */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, body { height: 100%; margin:0;}
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
input:focus, textarea:focu { outline: none}
body { margin: 0; font-size: 1em; }
a:focus { outline: none; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
ul, ol { margin: 0 0; padding: 0 0 0 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { border: 0; margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; width: 13px; height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
p {margin:0px}
/* END CSS Reset */
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:650px;
padding:14px;
}
/* ----------- basic ----------- */
#basic{
border:solid 2px #DEDEDE;
}
#basic h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#basic p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #dedede;
padding-bottom:10px;
}
#basic label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#basic .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#basic input{
float:left;
width:200px;
margin:2px 0 30px 10px;
}
#basic button{
clear:both;
margin-left:150px;
background:#888888;
color:#FFFFFF;
border:solid 1px #666666;
font-size:11px;
font-weight:bold;
padding:4px 6px;
}
fieldset{
float: left;
border: none;
margin: 10px;
position: relative;
width: 100%;
}
legend{
font-size: 14px;
font-weight: bold;
padding-bottom: 20px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
overflow: hidden;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
font-weight:bold;
text-align:left;
float: left;
padding-top: 7px;
width: 140px;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
/*margin:2px 0 20px 2px;*/
}
#stylized button{
clear:both;
margin-left:160px;
width:125px;
height:31px;
background:#444;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
.form_hold{
float: left;
width: 300px;
position: relative;
margin-bottom: 3px;
}
.form_hold input[type="text"]{
width:140px;
}
.form_hold_full{
width: 100%;
overflow: hidden;
position: relative;
margin-bottom: 3px;
}
.form_hold_full input[type="text"]{
width:140px;
}
#offert{
width: 460px;
}
#offert .form_hold_full input[type="radio"]{
width: 26px;
position: relative;
}
#offert .form_hold_full input[type="text"]{
float: right;
position: relative;
right: 150px;
top: -6px;
}
.form_hold_full input[type="checkbox"]{
width: 14px;
float: left;
}
#objekt_bauteil .form_hold_full label{
width: 180px;
}
#objekt_bauteil .form_hold_full input[type="checkbox"]{
width: 14px;
float: left;
margin-bottom: 3px;
}
.checkbox_holder{
position: relative;
width: 200px;
left: 177px;
margin-bottom: 3px;
}
.checkbox_holder input[type="checkbox"]{
width: 23px;
}
#info .form_hold_full{
padding-top: 7px;
}
#info .form_hold_full input[type="checkbox"]{
width: 23px;
}
#info .form_hold_full input[type="text"]{
float: right;
position: relative;
right: 260px;
top: -7px;
}
#arbeiten textarea{
width: 400px;
height: 60px;
}
#termin .form_hold input[type="radio"]{
width: 23px;
}
#termin .form_hold input[type="text"]{
float: right;
position: relative;
right: 30px;
top: -8px;
}
#notizen textarea{
width: 400px;
height: 100px;
}
</style>
</head>
<body>
<div id="stylized" class="myform">
<p>
Sie erreichen uns unkompliziert
telefonisch 0848 044 044
per Mail info@schlagenhauf.ch
per Post Rolf Schlagenhauf AG
Seestrasse 1013, 8706 Meilen
Wenn Sie Fragen haben, zögern Sie nicht, uns zu kontaktieren. Unser
Fachpersonal berät Sie gerne.
</p>
<form method="post" action="formiraj.php">
<fieldset id="offert">
<legend>Offert-/Auftragsformular</legend>
<p>Haben Sie konkrete Fragen oder Wünsche. Mit dem untenstehenden Kontaktformular
können Sie uns diese mitteilen.</p>
<div class="form_hold_full">
<input type="radio" name="deo1" value="Beratung" checked>Beratung
</div>
<div class="form_hold_full">
<input type="radio" name="deo1" value="Offerte schriftlich">Offerte schriftlich
</div>
<div class="form_hold_full" style="padding-top: 7px;">
<input type="radio" name="deo1" value="Auftrag gemäss Offerte" >Auftrag gemäss Offerte
<input type="text" name="deo1dop">
</div>
<div class="form_hold_full">
<input type="radio" name="deo1" value="Auftrag ohne Offerte">Auftrag ohne Offerte
</div>
</fieldset>
<fieldset style="width: 290px;">
<legend>Auftraggeber</legend>
<div class="form_hold">
<label for="auffir">Firma</label>
<input type="text" name="auffir" id="auffir">
</div>
<div class="form_hold">
<label for="aufvor">Vorname/Name</label>
<input type="text" name="aufvor" id="aufvor">
</div>
<div class="form_hold">
<label for="aufstr">Strasse</label>
<input type="text" name="aufstr" id="aufstr">
</div>
<div class="form_hold">
<label for="aufplz">PLZ/Ort</label>
<input type="text" name="aufplz" id="aufplz">
</div>
<div class="form_hold">
<label for="auftel">Tel. Direktwahl</label>
<input type="text" name="auftel" id="auftel">
</div>
<div class="form_hold">
<label for="auffax">Fax</label>
<input type="text" name="auffax" id="auffax">
</div>
<div class="form_hold">
<label for="aufema">E-Mail</label>
<input type="text" name="aufema" id="aufema">
</div>
</fieldset>
<fieldset style="width: 290px;">
<legend>Eigentümer/Bauherr</legend>
<div class="form_hold_full">
<label for="eigbet">Betreff</label>
<input type="text" name="eigbet" id="eigbet">
</div>
<div class="form_hold_full">
<label for="eigvor">Vorname/Name</label>
<input type="text" name="eigvor" id="eigvor">
</div>
<div class="form_hold_full">
<label for="eigstr">Strasse</label>
<input type="text" name="eigstr" id="eigstr">
</div>
<div class="form_hold_full">
<label for="eigplz">PLZ/Ort</label>
<input type="text" name="eigplz" id="eigplz">
</div>
<div class="form_hold_full">
<label for="eigtel">Tel. G.</label>
<input type="text" name="eigtel" id="eigtel">
</div>
<div class="form_hold_full">
<label for="eigfax">Fax/Natel</label>
<input type="text" name="eigfax" id="eigfax">
</div>
</fieldset>
<fieldset id="objekt_bauteil">
<div class="form_hold_full">
<label for="objekt">Objekt (Ort, Strasse)</label>
<input type="text" name="objekt" id="objekt">
</div>
<div class="form_hold_full">
<label>Bauteil (z.B. EG, OG, Wohnung, EFH)</label>
<input type="text" name="bauteil"><br><br>
</div>
<div class="checkbox_holder">
<input type="checkbox" name="baucheck[]" value="Neubau">Neubau
</div>
<div class="checkbox_holder">
<input type="checkbox" name="baucheck[]" value="Umbau">Umbau
</div>
<div class="checkbox_holder">
<input type="checkbox" name="baucheck[]" value="Renovation">Renovation
</div>
<div class="checkbox_holder">
<input type="checkbox" name="baucheck[]" value="Fassade">Fassade
</div>
</fieldset>
<fieldset id="info">
<legend>Info zum Objekt</legend>
<div class="form_hold_full">
<input type="checkbox" name="infcheck[]" value="tel. anmelden bei">tel. anmelden bei
<input type="text" name="inf1">
</div>
<div class="form_hold_full">
<input type="checkbox" name="infcheck[]" value="muss nicht angemeldet werden">muss nicht angemeldet werden
<input type="text" name="inf2">
</div>
<div class="form_hold_full">
<input type="checkbox" name="infcheck[]" value="Schlüssel ist abzuholen in/bei">Schlüssel ist abzuholen in/bei
<input type="text" name="inf3">
</div>
<div class="form_hold_full">
<input type="checkbox" name="infcheck[]" value="swart informieren">Hauswart informieren
<input type="text" name="inf4">
</div>
</fieldset>
<fieldset id="arbeiten">
<legend>Arbeitsbeschrieb, auszuführende Arbeiten:</legend>
<textarea name="arbeits" ></textarea>
</fieldset>
<fieldset id="termin">
<legend>Termin</legend>
<div class="form_hold" style="width: 240px;">
<input type="radio" name="terminr" value="innert 24 Std." checked>innert 24 Std.
</div>
<div class="form_hold">
<input type="radio" name="terminr" value="Wunschtermin">Wunschtermin
<input type="text" name="termint1">
</div>
<div class="form_hold" style="width: 240px;">
<input type="radio" name="terminr" value="Die nächsten 1-2 Wochen">Die nächsten 1-2 Wochen
</div>
<div class="form_hold">
<input type="radio" name="terminr" value="Zu erledigen bis">Zu erledigen bis
<input type="text" name="termint2">
</div>
</fieldset>
<fieldset id="notizen">
<legend>Bemerkungen/Notizen</legend>
<textarea placeholder="test" name="bemerk" rows="10" cols="30"></textarea>
</fieldset>
<input type="submit" value="senden"><input type="reset" value="Clear">
</form>
</div> <!-- end of form class -->
</body>
</html>
|
