Anzeige
Tutorialbeschreibung

Formulare in HTML erstellen

Formulare in HTML erstellen

Eine Homepage ohne Kontaktformular ist fast, wie eine Küche ohne Kochlöffel.
Vor kurzem stand ich vor dem Problem, dass ich ein Kontaktformular erstellen soll, nur hatte ich nicht die geringste Ahnung, wie das geht.

Ziel ist es, ein einfaches Kontaktformular mit Hilfe eines kostenlosen "Formularmailer" zu erstellen, das im E-Mail Postfach bei euch dann auch ankommt.

davidmarco.ohost.de/psd_forum/psd_tutorial.html

Aber jetzt beginnen wir mit dem Wesentlichen.

Wir wollen ein Kontaktformular erstellen, mit den wichtigsten Feldern wie Textarea, Optionsschaltergruppe, Sendebutton, sowie dem Löschbutton.

Wie oben bereits gesagt, werde ich in diesem Tutorial den für Einsteiger sehr leichten Weg mit dem Gratis-Formmailer verwenden.

Schritt 1:
Wir erstellen uns unser gewünschtes Formular; das geht am besten mit verschiedenen Editoren wie Dreamweaver, GoLive, Frontpage etc. etc.

Bilder


Die wichtigsten Tags hab ich oben beschrieben, die locker reichen, damit ihr das alles bewältigen könnt.
de.selfhtml.org/html/formulare/index.htm
Wie in meinem Beispiel:
Geschlecht
Vorname
Nachname
E-Mail Adresse
Nachricht an uns

In der rechten Spalte fügen wir jetzt die Felder ein:
Ich habe bei meinem Beispiel eine
Optionsschaltergruppe
3 Textareas
und einen Textbereich sowie Sende- und Löschbutton.
So sollte das Formular jetzt aussehen:
Bilder

Schritt 2:
Den Gratis-Formmailer eintragen.
Solltet ihr das Formular fertig erstellt haben, so habt ihr (wenn ihr das Formular nach meinen beschriebenen Tags gemacht habt) am Anfang diesen Befehl stehen:
<form method="POST" action="(z.B. eure Adresse des Formmailers)"

Schritt 3:
E-Mail Adresse hinzufügen

Hier schreiben wir jetzt den Formmailer rein:
In meinem Beispiel:
<form action="http://www.nettz.de/Formular-Chef/Formular-Chef.cgi" method="post" enctype="multipart/form-data">

Bilder


Gleich nach dem <form action=".........."> schreiben wir in die nächste Zeile folgenden Befehl:
<input type="hidden" name="empfaenger" value="youremail@adresse.at"> (youremail@adresse.at" bitte editieren mit der E-Mail Adresse, wo die Formulardaten hingeschickt werden sollen)

Bilder

Schritt 4:
Testet euer Formular

Tippt überall was rein und klickt auf "Senden". Schaut danach in euer Postfach; es sollte nun eine E-Mail mit den eingegebenen Daten eingegangen sein.

Schritt 5:
Formularfelder richtig bennen

Ihr seht jetzt in eurer Email, dass leider nicht sehr hilfreiche Phrasen wie textfield = , textfield 2 = etc. stehen.
Diese stehen da, weil ihr im Formular die Textfelder nicht richtig benannt habt.
Das ändern wir am besten gleich in unserem Formular:

Bilder

Wir gehen darauf, wo unsere "Vorname-Textarea" steht, also die Textarea nebem dem Vorname:
Im Quelltext steht folgendes:
<input type="text" name="textfield" />
Das "text" ändern wir jetzt ganz einfach in "Vorname"

Das macht ihr jetzt bei allen anderen Bereichen auch, damit ihr euch besser auskennt, wenn ihr die Mail gesendet bekommt.

Schritt 6:
Fertiges Formular testen

Hier mein Quellcode:
<body>
<form action="http://www.nettz.de/Formular-Chef/Formular-Chef.cgi" method="post" enctype="multipart/form-data">
 <input type="hidden" name="empfaenger" value="youremail@adresse.at">
 
  <table width="100%" border="0" cellspacing="5">
    <tr>
      <td width="23%">Geschlecht</td>
      <td width="77%"><p>
        <label>
          <input type="radio" name="Optionsschaltergruppe1" value="optionsschalter" />
          männlich</label>
        <br />
        <label>
          <input type="radio" name="Optionsschaltergruppe1" value="optionsschalter" />
          weiblich</label>
        <br />
      </p></td>
    </tr>
    <tr>
      <td>Vorname</td>
      <td><label>
        <input name="vorname" type="text" id="vorname" />
      </label></td>
    </tr>
    <tr>
      <td>Nachname</td>
      <td><label>
        <input name="nachname" type="text" id="nachname" />
      </label></td>
    </tr>
    <tr>
      <td>E-Mail Adresse </td>
      <td><label>
        <input name="Email" type="text" id="Email" />
      </label></td>
    </tr>
    <tr>
      <td>Nachricht an uns </td>
      <td><label>
        <textarea name="nachricht an uns" cols="50" rows="5" id="nachricht an uns"></textarea>
      </label></td>
    </tr>
    <tr>
      <td><label>
        <input name="senden" type="submit" id="senden" value="Senden" />
      </label></td>
      <td><label>
        <input name="l&ouml;schen" type="reset" id="l&ouml;schen" value="Alles L&ouml;schen" />
      </label></td>
    </tr>
  </table>
</form>
</body>

So das war mein erstes Tutorial auf dieser Seite.
Ich hoffe, es hat euch gefallen. Über ein Feedback von euch wäre ich natürlich sehr erfreut.

HTML Formulare Teil 2 folgt
Thema:
Formulare mit CSS formatieren

Mit freundlichen Grüßen
David10


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von waternimfchen
  • 03.11.2013 - 11:35

das war jetzt leider nicht das was ich gesucht hatte,

Portrait von Hiero
  • 05.04.2012 - 21:02

Ganz im ernst, so prall ist das Tutorial nicht!
Hier wird nicht komplett auf externe Hilfsmittel verzichtet, was m.M.n. aber so sein sollte.

Typisch wie immer, alle schreiben nur "aah toll", "super..." usw.

Portrait von s0lix
  • 02.11.2010 - 15:41

Danke für das hilfreiche tutorial.
Hat mir sehr weitergeholfen ;D

Portrait von LoWBiRd
  • 13.10.2010 - 09:53

Danke, feines tut hat mir weitergeholfen ! viele dank

Portrait von JulianART
  • 02.04.2010 - 23:13

danke, gutes tut habe mal wieder was gelernt

Portrait von miactive
  • 02.03.2010 - 13:12

Danke, gut beschrieben!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.01.2010 - 12:07

Hat mir geholfen, sehr gut, danke

Portrait von Martin92
  • 05.01.2010 - 16:05

sehr gut erklärt. danke

Portrait von creezer
  • 17.11.2009 - 11:01

hat mir sehr geholfen. Danke

Portrait von r1zZo
  • 24.10.2009 - 00:06

zusammenhänge hätten besser erklärt sein können aber ging schon.
für blutige anfänger vllt nicht ganz so leicht.

Portrait von Logifech
  • 21.10.2009 - 15:33

ich schließ mich satcharlie an sorry.

Portrait von satcharlie
  • 29.09.2009 - 07:32

Nicht das was ich erwartet habe.

Portrait von SamBooka
  • 11.08.2009 - 14:34

etwas dürftig und der beschreibung nicht ganz nachkommend.

Portrait von gizmarulez
  • 11.03.2009 - 15:05

Das Tutorial heißt "Formulare in HTML erstellen". Dann kommt im ersten Schritt: Formular erstellen in einem Editor wie Dreamweaver, GoLive....

Das ist ja wohl nicht ganz ernst gemeint!

Und dann noch, wie auch andere das schon bemängeln, die Sache mit dem Formmailer. Will ich das wirklich jemandem zumuten, dass die Daten darüber laufen?

Das hier ist kein Tutorial, das zur Überschrift passt.

Portrait von t00nfish
  • 07.08.2008 - 22:18

schade, dass Du in Deiner Kurzbeschreibung nicht darauf hingewiesen hast, dass man für dieses Tut den formmailer nutzen muss.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.02.2008 - 22:25

Sehr schön gemacht, so kann man auch die Hintergründe verstehen.

Gruß elheizo

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.12.2007 - 11:49

kommt mir bekannt vor aus video2brain ;-)
suche eher etwas ohne einen "form-mailer" also muss ich glaube ich im php bereich schauen.
sonst ganz okay...


gruß

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.01.2007 - 11:26

Perfekt, so was hab ich gesucht. Danke

Portrait von Hagbard666
  • 24.12.2006 - 15:10

Warum nutzt du Tabellen?
Man kann es genau so aufbauen nur mit DIV`s.

Portrait von David10
  • 25.12.2006 - 01:41

klar KANN man!

is jedem selber überlassen, man kann das Formular auch schön mit Hilfe von CSS designen, aber hier gehts ums Prinzip, Formulare ohne PHP Code!

x
×
×