Moinsen, nunja ich kenne mich mit HTML, CSS Etc. null aus. Deshalb habe ich für meine Homepage die ich einfach aus Zeit vertreib betreibe, ein Kontaktformular mit Hilfe eines Generatoren erstellt. Nunja die Felder sind so wie ich sie haben möchte jedoch, ist das Problem sobald das Kontaktformular ausgefüllt wird und verschickt wird, ich keine Benachrichtung kriege mit den Angaben in dem Kontaktformular. Logisch ich muss ja irgendwo angeben wo es verschickt werden muss. Jedoch habe ich keine Ahnung wie. Ich hoffe ihr könnt mir helfen.
MfG
der HTML Code:
CSS Code:
MfG
der HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="css/uniform.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="TTWForm-container">
<div id="form-title" class="form-title field">
<h2>
Registriere dich jetzt!
</h2>
</div>
<form action="process_form.php" class="TTWForm ui-sortable-disabled" method="post"
novalidate="">
<div id="field2-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
<label for="field2">
eMail Adresse:
</label>
<input type="text" name="field2" id="field2" required="required">
</div>
<div id="field1-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
<label for="field1">
Passwort:
</label>
<input type="password" name="field1" id="field1" required="required">
</div>
<div id="field3-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
<label for="field3">
Passwort wiederholen:
</label>
<input type="password" name="field3" id="field3" required="required">
</div>
<div id="form-submit" class="field f_100 clearfix submit">
<input type="submit" value="Registrieren">
</div>
</form>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="css/uniform.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="TTWForm-container">
<div id="form-title" class="form-title field">
<h2>
Registriere dich jetzt!
</h2>
</div>
<form action="process_form.php" class="TTWForm ui-sortable-disabled" method="post"
novalidate="">
<div id="field2-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
<label for="field2">
eMail Adresse:
</label>
<input type="text" name="field2" id="field2" required="required">
</div>
<div id="field1-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
<label for="field1">
Passwort:
</label>
<input type="password" name="field1" id="field1" required="required">
</div>
<div id="field3-container" class="field f_100 ui-resizable-disabled ui-state-disabled">
<label for="field3">
Passwort wiederholen:
</label>
<input type="password" name="field3" id="field3" required="required">
</div>
<div id="form-submit" class="field f_100 clearfix submit">
<input type="submit" value="Registrieren">
</div>
</form>
CSS Code:
/** Basic Styling **/
.TTWForm{
width: 500px;
}
.TTWForm-container {
font-size: 12px;
color: #798e94;
background: transparent;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.TTWForm-wrapper.wrapped{
padding: 30px 30px 30px 30px;
border: 1px solid #ced4d7;
box-shadow: inset 0 0 0 5px #eef5f7, 0 0 3px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0 0 0 5px #eef5f7, 0 0 3px rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 0 0 5px #eef5f7, 0 0 3px rgba(0, 0, 0, .1);
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.TTWForm-container h2 {
font-size: 2em;
margin-bottom: 0.75em;
color: #65777c;
font-weight: normal;
}
/** Field Styles **/
.TTWForm .field, #form-title.field {
padding-bottom: 12px;
padding-top: 12px;
position: relative;
clear: both;
}
.TTWForm .field:first-child{
padding-top:0;
}
.TTWForm .field:last-child{
padding-bottom:0;}
/** Field Widths */
.f_25 {
width: 21%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.f_50 {
width: 46%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.f_75 {
width: 71%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.f_100 {
width: 96%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.TTWForm input, .TTWForm textarea, .TTWForm select, div.selector, div.uploader {
width:100%;
font: 12px/14px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
padding: 6px 0;
color: #798e94;
border: 1px solid #c2d3d7;
outline: none;
display: inline-block;
position: relative;
z-index: 2;
box-shadow: 0 0 0 5px #f2f7f9;
-moz-box-shadow: 0 0 0 5px #f2f7f9;
-webkit-box-shadow: 0 0 0 5px #f2f7f9;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
}
.TTWForm input[type=radio], .TTWForm input[type=checkbox] {
width: 12px;
margin: 8px 12px;
top: 3px;
position: relative;
}
.TTWForm .option{
margin:6px 0;
}
.TTWForm .option-title{
position:relative;
top:2px;
color: #798e94;
}
.TTWForm textarea {
overflow: hidden;
}
.TTWForm label {
color: #798e94;
text-align: left;
font: 14px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
margin-bottom:5px;
display:inline-block;
}
.TTWForm .submit input {
text-align: center;
font-size: 12px;
text-decoration: none;
border-radius: 3px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
-ms-border-radius: 14px;
text-shadow: 1px 1px 0px #fff;
display: block;
margin: 12px -2px 12px 0;
text-align: center;
float: right;
padding: 6px 12px;
height: 28px;
cursor: pointer;
min-width: 96px;
width:auto;
background:#ddedf3 url(../images/button-bg.jpg) repeat-x 0 0 scroll;
box-shadow: 0 0 0 5px #eef5f7;
-moz-box-shadow: 0 0 0 5px #eef5f7;
-webkit-box-shadow: 0 0 0 5px #eef5f7;
border: 1px solid #a4c5d0;
font-weight: bold;
color: #6b97a8;
}
#form-title {
padding: 12px;
}
#form-title h2{
margin-bottom:0;
color: #798e94;
}
/** Date Input **/
#calroot {
z-index: 10000;
margin-top: -1px;
width: 198px;
padding: 2px;
background-color: #fff;
font-size: 11px;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 0 15px #666;
-webkit-box-shadow: 0 0 15px #666;
}
#calhead {
padding: 2px 0;
height: 22px;
}
#caltitle {
font-size: 14px;
color: #0150D1;
float: left;
text-align: center;
width: 155px;
line-height: 20px;
text-shadow: 0 1px 0 #ddd;
}
#calnext, #calprev {
display: block;
width: 20px;
height: 20px;
float: left;
cursor: pointer;
background: transparent url(../images/prev.png) no-repeat center center scroll;
}
#calnext {
float: right;
background: transparent url(../images/next.png) no-repeat center center scroll;
}
#calprev.caldisabled, #calnext.caldisabled {
visibility: hidden;
}
#caltitle select {
font-size: 10px;
}
#caldays {
height: 14px;
border-bottom: 1px solid #ddd;
}
#caldays span {
display: block;
float: left;
width: 28px;
text-align: center;
}
#calweeks {
background-color: #fff;
margin-top: 4px;
}
.calweek {
clear: left;
height: 22px;
}
.calweek a {
display: block;
float: left;
width: 27px;
height: 20px;
text-decoration: none;
font-size: 11px;
margin-left: 1px;
text-align: center;
line-height: 20px;
color: #666;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.calweek a:hover, .calfocus {
background-color: #ddd;
}
a.calsun {
color: red;
}
a.caloff {
color: #ccc;
}
a.caloff:hover {
background-color: rgb(245, 245, 250);
}
a.caldisabled {
background-color: #efefef !important;
color: #ccc !important;
cursor: default;
}
#calcurrent {
background-color: #498CE2;
color: #fff;
}
#caltoday {
background-color: #333;
color: #fff;
}
/** Range Input **/
.slider {
background: #3C72E6 url(../images/range_gradient.png) repeat-x 0 0;
height: 9px;
position: relative;
cursor: pointer;
border: 1px solid #333;
width: 100%;
float: left;
clear: right;
margin-top: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: inset 0 0 8px #000;
}
.progress {
height: 9px;
background-color: #C5FF00;
display: none;
opacity: 0.6;
}
.handle {
background: #fff url(../images/range_gradient.png) repeat-x 0 0;
height: 28px;
width: 28px;
top: -12px;
position: absolute;
display: block;
margin-top: 1px;
border: 1px solid #000;
cursor: move;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
}
.range {
border: 1px solid #ddd;
float: left;
font-size: 20px;
margin: 0 0 0 15px;
padding: 3px 0;
text-align: center;
width: 50px !important;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/**Error Messages **/
.TTWForm .error {
height: 16px;
font: 11px/16px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
color: #ff0033;
padding-left: 12px;
z-index: 999;
position:relative;
top:-1px;
}
/** Loading Indicator **/
.loading-text{
position:relative;
top:-3px;
}
/** IE Hacks **/
.TTWForm input{
*height: 28px;
}
/** Clearfix */
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
zoom: 1;
}
.TTWForm{
width: 500px;
}
.TTWForm-container {
font-size: 12px;
color: #798e94;
background: transparent;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.TTWForm-wrapper.wrapped{
padding: 30px 30px 30px 30px;
border: 1px solid #ced4d7;
box-shadow: inset 0 0 0 5px #eef5f7, 0 0 3px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0 0 0 5px #eef5f7, 0 0 3px rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 0 0 5px #eef5f7, 0 0 3px rgba(0, 0, 0, .1);
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.TTWForm-container h2 {
font-size: 2em;
margin-bottom: 0.75em;
color: #65777c;
font-weight: normal;
}
/** Field Styles **/
.TTWForm .field, #form-title.field {
padding-bottom: 12px;
padding-top: 12px;
position: relative;
clear: both;
}
.TTWForm .field:first-child{
padding-top:0;
}
.TTWForm .field:last-child{
padding-bottom:0;}
/** Field Widths */
.f_25 {
width: 21%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.f_50 {
width: 46%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.f_75 {
width: 71%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.f_100 {
width: 96%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
.TTWForm input, .TTWForm textarea, .TTWForm select, div.selector, div.uploader {
width:100%;
font: 12px/14px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
padding: 6px 0;
color: #798e94;
border: 1px solid #c2d3d7;
outline: none;
display: inline-block;
position: relative;
z-index: 2;
box-shadow: 0 0 0 5px #f2f7f9;
-moz-box-shadow: 0 0 0 5px #f2f7f9;
-webkit-box-shadow: 0 0 0 5px #f2f7f9;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
}
.TTWForm input[type=radio], .TTWForm input[type=checkbox] {
width: 12px;
margin: 8px 12px;
top: 3px;
position: relative;
}
.TTWForm .option{
margin:6px 0;
}
.TTWForm .option-title{
position:relative;
top:2px;
color: #798e94;
}
.TTWForm textarea {
overflow: hidden;
}
.TTWForm label {
color: #798e94;
text-align: left;
font: 14px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
margin-bottom:5px;
display:inline-block;
}
.TTWForm .submit input {
text-align: center;
font-size: 12px;
text-decoration: none;
border-radius: 3px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
-ms-border-radius: 14px;
text-shadow: 1px 1px 0px #fff;
display: block;
margin: 12px -2px 12px 0;
text-align: center;
float: right;
padding: 6px 12px;
height: 28px;
cursor: pointer;
min-width: 96px;
width:auto;
background:#ddedf3 url(../images/button-bg.jpg) repeat-x 0 0 scroll;
box-shadow: 0 0 0 5px #eef5f7;
-moz-box-shadow: 0 0 0 5px #eef5f7;
-webkit-box-shadow: 0 0 0 5px #eef5f7;
border: 1px solid #a4c5d0;
font-weight: bold;
color: #6b97a8;
}
#form-title {
padding: 12px;
}
#form-title h2{
margin-bottom:0;
color: #798e94;
}
/** Date Input **/
#calroot {
z-index: 10000;
margin-top: -1px;
width: 198px;
padding: 2px;
background-color: #fff;
font-size: 11px;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 0 15px #666;
-webkit-box-shadow: 0 0 15px #666;
}
#calhead {
padding: 2px 0;
height: 22px;
}
#caltitle {
font-size: 14px;
color: #0150D1;
float: left;
text-align: center;
width: 155px;
line-height: 20px;
text-shadow: 0 1px 0 #ddd;
}
#calnext, #calprev {
display: block;
width: 20px;
height: 20px;
float: left;
cursor: pointer;
background: transparent url(../images/prev.png) no-repeat center center scroll;
}
#calnext {
float: right;
background: transparent url(../images/next.png) no-repeat center center scroll;
}
#calprev.caldisabled, #calnext.caldisabled {
visibility: hidden;
}
#caltitle select {
font-size: 10px;
}
#caldays {
height: 14px;
border-bottom: 1px solid #ddd;
}
#caldays span {
display: block;
float: left;
width: 28px;
text-align: center;
}
#calweeks {
background-color: #fff;
margin-top: 4px;
}
.calweek {
clear: left;
height: 22px;
}
.calweek a {
display: block;
float: left;
width: 27px;
height: 20px;
text-decoration: none;
font-size: 11px;
margin-left: 1px;
text-align: center;
line-height: 20px;
color: #666;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.calweek a:hover, .calfocus {
background-color: #ddd;
}
a.calsun {
color: red;
}
a.caloff {
color: #ccc;
}
a.caloff:hover {
background-color: rgb(245, 245, 250);
}
a.caldisabled {
background-color: #efefef !important;
color: #ccc !important;
cursor: default;
}
#calcurrent {
background-color: #498CE2;
color: #fff;
}
#caltoday {
background-color: #333;
color: #fff;
}
/** Range Input **/
.slider {
background: #3C72E6 url(../images/range_gradient.png) repeat-x 0 0;
height: 9px;
position: relative;
cursor: pointer;
border: 1px solid #333;
width: 100%;
float: left;
clear: right;
margin-top: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: inset 0 0 8px #000;
}
.progress {
height: 9px;
background-color: #C5FF00;
display: none;
opacity: 0.6;
}
.handle {
background: #fff url(../images/range_gradient.png) repeat-x 0 0;
height: 28px;
width: 28px;
top: -12px;
position: absolute;
display: block;
margin-top: 1px;
border: 1px solid #000;
cursor: move;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
}
.range {
border: 1px solid #ddd;
float: left;
font-size: 20px;
margin: 0 0 0 15px;
padding: 3px 0;
text-align: center;
width: 50px !important;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/**Error Messages **/
.TTWForm .error {
height: 16px;
font: 11px/16px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
color: #ff0033;
padding-left: 12px;
z-index: 999;
position:relative;
top:-1px;
}
/** Loading Indicator **/
.loading-text{
position:relative;
top:-3px;
}
/** IE Hacks **/
.TTWForm input{
*height: 28px;
}
/** Clearfix */
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
zoom: 1;
}