Brauche Hilfe: Kontaktformular

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich bräuchte mal Hilfe bei dem erstellen von einem Kontaktformular. Als blutiger Anfänger in Sachen html und css bin ich gerade am gestalten einer eigenen Page. Darin sollte auch ein Kontaktformular enthalten sein. Nachdem ich bisher alles andere alleine mit diversen Infoseiten geschafft habe, kam ich leider beim Kontaktformular nicht weiter. Ich habe mir also (vorübergehend) ein freies Layout aus dem Netz geholt um es optisch zu verändern und zu verstehen wie so etwas gemacht wird. Leider stören mich dabei die beiden Buttons: Abschicken und Eingabe Löschen. Ich möchte sie so gestalten wie die Menüfelder: kontaktdaten, Anfrage, Aktion. Also die gleiche Grafik als Hintergrund verwenden, bekomme das aber nicht hin. Sind die EIngabefelder und die Abschicken und Eingabe Löschen Buttons miteinander verbunden und müssen erst getrennt werden? Aber wie?
Hier der Code:
html:

[code]

     <h1 style="text-decoration:underline;">Kontakt</h1>
     <form name="tutorial_formular" action="contact_out.php" method="post" >

 <fieldset class="kontaktdaten">
    <legend>Kontaktdaten</legend>
  <label for="vorname" accesskey="1">Vorname</label><input id="vorname" name="FormVorname" type="text" value="" /><br />
  <label for="nachname" accesskey="2">Nachname</label><input id="nachname" name="FormNachname" type="text" value="" /><br />
 <label for="email" accesskey="3">E-Mail</label><input id="email" name="FormEMail" type="text" value=""  />
 </fieldset>

<fieldset class="anfrage">
   <legend>Anfrage</legend>
<label for="text">Nachricht</label>
 <textarea id="text" name="FormBemerkung" cols="30" rows="3" onfocus="this.value=''" >Hier können Sie Ihre Nachricht hinterlassen</textarea>
</fieldset>
 <fieldset class="buttons">
  <legend>Ihre Aktion</legend>
 <input type="submit" value="Abschicken"  class="senden" name="senden" />
 <input type="reset" value="Eigabe löschen" class="senden" name="senden" />
  </fieldset>
              
    </div>

[/code]css:



/*Kontaktformular*/    
fieldset {
     width: 30em;
     margin: 1.5em auto 1.5em auto;
     display: block;
     font-size: 0.80em;
     border: 1px solid #ddd;
     background-image:url(kontaktfieldset.png);
     clear: both;
     }
   
* html fieldset {padding: 5px;}
     legend {
     background: url(Button02.jpg);
     padding: 4px;
     border: 1px solid #ddd;
     border-right-width: 2px;
     border-bottom-width: 2px;
     margin-bottom: 4px;
     font-weight: bold;
           }

label {
     margin: 5px 0;}

.kontaktdaten label {
     display: block;
     width: 5em;
     float: left;
     }
.anfrage label {
     display: block;
     width: 5em;
     float: left;
     }
                      
input,textarea {
     margin: 3px 0;
     border: 1px solid #d1d1d1;
     background: white;
     padding: 3px 3px;
     } 
                       
input:active input:focus, input:hover { background: url(Button02.jpg)}
  
.buttons {text-align: center;}

a.locationCat{color: #8d8c8c; font-weight: bold;}

.error {
     font: 13px Verdana, Arial, Helvetica, sans-serif;
     color:red;
     font-weight:bold;
}
2

Versuch’s mal damit:

.senden {
     background: url(Button02.jpg);
     padding: 4px;
     border: 1px solid #ddd;
     border-right-width: 2px;
     border-bottom-width: 2px;
     margin-bottom: 4px;
     font-weight: bold;
           }

oder einfacher, indem du die Definitionen für legend auch für .senden verwendest. Hierzu brauchst du im vorhandenen Code lediglich das rot markierte ergänzen:

 legend[B], .senden[/B] {
 background: url(Button02.jpg);
 padding: 4px;
 border: 1px solid #ddd;
 border-right-width: 2px;
 border-bottom-width: 2px;
 margin-bottom: 4px;
 font-weight: bold;
       }
3

Ah, vielen Dank für die Antwort. Ich werde das gleich mal ausprobieren. Gut das es Leute gibt, die einem weiterhelfen können. :lol:

4

Also das hat geklappt mit deinem Vorschlag, jetzt habe ich nur noch ein kleines Problem. Der Text: „Hier können Sie Ihre Nachricht hinterlassen“ wird nun nicht mehr angezeigt. Hast du eine Idee warum?
Aktueller Code:
html:

[code]

     <h1 style="text-decoration:underline;">Kontakt</h1>
     <form name="formular" action="contact_out.php" method="post" >

 <fieldset class="kontaktdaten">
    <legend>Kontaktdaten</legend>
  <label for="vorname" accesskey="1">Vorname</label><input id="vorname" name="FormVorname" type="text" value="" /><br />
  <label for="nachname" accesskey="2">Nachname</label><input id="nachname" name="FormNachname" type="text" value="" /><br />
 <label for="email" accesskey="3">E-Mail</label><input id="email" name="FormEMail" type="text" value=""  />
 </fieldset>

<fieldset class="anfrage">
   <legend>Anfrage</legend>
<label for="text">Nachricht</label>
 <textarea id="text" name="FormBemerkung" cols="30" rows="3" onfocus="this.value=''" >Hier können Sie Ihre Nachricht hinterlassen</textarea>
</fieldset>
 <fieldset class="buttons">
  <legend>Ihre Aktion</legend>
 <input type="submit" value="Abschicken"  class="senden" name="senden" />
 <input type="reset" value="Eigabe löschen" class="senden" name="senden" />
  </fieldset>
              
    </div>

[/code]css:

[code]

/Kontaktformular/
fieldset {
width: 30em;
margin: 1.5em auto 1.5em auto;
display: block;
font-size: 0.80em;
border: 1px solid #ddd;
background-image:url(kontaktfieldset.png);
clear: both;
}

  • html fieldset {padding: 5px;}
    legend {
    background: url(Buttonkontakt.jpg);
    padding: 4px;
    border: 1px solid #ddd;
    border-right-width: 2px;
    border-bottom-width: 2px;
    margin-bottom: 4px;
    font-weight: bold;
    }

label {
margin: 5px 0;}

/*Sendenbuttons etc */
.senden {
background: url(Buttonkontakt.jpg);
padding: 4px;
border: 1px solid #ddd;
border-right-width: 2px;
border-bottom-width: 2px;
margin-bottom: 4px;
font-weight: bold;
}
.senden:active, .senden:focus, .senden:hover {
color:#e4cf1b;
background-image: url(ButtonKontakthover.jpg);

}

.kontaktdaten label {
display: block;
width: 5em;
float: left;
}
.anfrage label {
display: block;
width: 5em;
float: left;
}

input,textarea {
margin: 3px 0;
border: 1px solid #d1d1d1;
background: white;
padding: 3px 3px;

 }

input:active, input:focus, input:hover { } /Schriftfarbe in Eintragefeldern/

.buttons {text-align: center;}

a.locationCat{color: #8d8c8c; font-weight: bold;}

.error {
font: 13px Verdana, Arial, Helvetica, sans-serif;
color:red;
font-weight:bold;
}

[/code]Danke für die Hilfe

Gruss Sunny

5

Ok, klappt jetzt. Und nun? Kontaktformular ist fertig, aber wie mache ich, dass es auch tatsächlich an eine emailadresse verschickt wird? Dazu habe ich ja noch nichts programmiert. Muss ich das mit php machen? Habe ich irgendwo im Internet gelesen, nur ich kenn mich gar nicht in php aus. Wer kann mir dabei helfen?
Gruss Sunny

6

Ich kann das aus dem Code-Beispiel nicht entnehmen.
Vielleicht bekommt color, aus einer anderen css-Anweisung, die gleiche Farbe wie background für .
Zeige mal einen Link zum klicken.

Zugefügt:
Ich habe deinen letzten Beitrag nicht bemerkt.
Das geht praxistauglich nur mit einem serverseitigen Skript (z.B. php).
Das wurde hier öfter beschrieben (suche nach mailto).
Ansonsten gibt es auch Anbieter, die das für dich übernehmen.

Mit letzterem habe ich keine Erfahrung.

7

Mit php so möglicht:

action=„contact_out.php“ gibt ja die Datei an die beim Absenden geöffnet wird.
Ist das eine andere als die des Forumlars reicht vollgendes aus:
[php]

<? mail("Email des Empfängers", Betreff, Mailtext,"From: Name des Absenders [/php]Die Inhalte des Forumlars werden mit post (method="post") übergeben.

Diese können so ausgelsen werden:
[php]<? $FormName = $_POST['FormName']; ?>[/php]Ist das Beispiel für den Inhalt des Felds „FormName“.
Die angewälte Post-Variable ist durch die Zeichen zwischen den zwei ’ gekennzeichnet. Diese Zeichen entsprechen denen die bei name=„“ angegeben wurden.

Falls deine ausführende Datei dieselbe ist wie die des Formulars kannst du eine if-Schleife einfügen:
[PHP[<? if($_POST['senden']=="Abschicken"){ ?>[/php]
Hierbei wird geprüft ob das Formular abgeschickt wurde. Es wird also die geprüft ob der Inhalt des submit-Buttons übergeben wurde. Ist das der Fall wird der Rest in der Klammer ausgeführt.
Die geschweifte Klammer muss am Ende wieder geschlossen werden:

[php]<?
if($_POST[‚senden‘]==„Abschicken“){

$FormName = $_POST[‚FormName‘];

mail(„Email des Empfängers“, Betreff, Mailtext,„From: Name des Absenders <E-Mail des Absenders“);
}
?>[/php]

Edit: Das kann natürlich alles noch erweitert und verbessert werden. Z.b. Prüfung der einzelnen Felder ob sie ausgefüllt wurden oder nicht oder auch sperren von html-Code o.Ä. um die Sicherheit des Empfängers zu gewähren.