"Absenden"-Button mit E-Mail-Adresse verknüpfen

[Lisa Zöchner]

Hallo Allerseits :) Ich habe meine Homepage selbst erstellt, ist nicht gerade professionell, aber sie erfüllt ihre Zweck (:

Ich möchte nun eine neue Seite einrichten, in der Kunden ihre Daten eintragen können und sie mir durch einen Klick auf den Button "Absenden" per Mail zukommen lassen können! Leider habe ich überhaupt keine Ahnung, wie man den Button dazu bringt mir die eingegebenen Daten zu übermitteln :(

Vielleicht kann mir jemand dabei helfen :) Habe meine Versuche darunter hineinkopiert, weil die Seite natürlich noch nicht veröffentlicht ist:

<form action="action_page.php">
<fieldset><legend><i>Sende mir deine Daten und ich erstelle dir deinen persönlichen Body-Plan, bestehend aus:</i></legend></fieldset><br>

<ul>
 	<li><strong>Trainingsplan</strong></li>
 	<li><strong>Ernährungstipps</strong></li>
</ul>
<i>...abgestimmt auf deine Person, Vorlieben, Möglichkeiten und Ziele!</i>

<label><b>Name:</b> <input name="name" type="text" /></label>

<label><b>Alter:</b> <input type="text" /></label>

<label><input checked="checked" name="gender" type="radio" value="male" /> männlich</label>
<label><input name="gender" type="radio" value="female" /> weiblich</label>

<b>Ziele:
<label></b><input type="text" /></label>

<form><b>So möchte ich trainieren:</b>
<input type="text" /></form><br>

<form><b>So möchte ich mich ernähren:</b>
<label><input type="text" /></label></form><br>

<form>Mail-Adresse:
<label><input type="text" /></label></form><br>

<button>Absenden</button>
<div id="senden"></div>
</form>

[Camping_RIDER]

Aloha ;)

Ich möchte nun eine neue Seite einrichten, in der Kunden ihre Daten eintragen können und sie mir durch einen Klick auf den Button "Absenden" per Mail zukommen lassen können! Leider habe ich überhaupt keine Ahnung, wie man den Button dazu bringt mir die eingegebenen Daten zu übermitteln :(

Indem das php-Skript, an das dein Formular die Daten weitergibt

<form action="action_page.php">

eine E-Mail an deine E-Mail-Adresse schickt, in der die entsprechenden Daten vorkommen. Für den Mailversand mit PHP gibt es Lösungen.

Dazu müsste aber erstmal sichergestellt werden, dass das entsprechende Skript die Daten auch alle bekommt. Bei deinem momentanen Markup ist das so sicher nicht der Fall. Folgende Liste von Dingen, die an deinem Markup "kaputt" sind, erhebt keinen Anspruch auf Vollständigkeit^[1]:

• Du möchtest eigentlich ein Formular haben, hast aber mehrere form-Elemente ineinander verschachtelt. Einige der Form-Elemente möchtest du vielleicht durch andere Block-Elemente ersetzen. Durch p-Elemente zum Beispiel; dann sparst du dir schon die Umbrüche.
• Mehrere deiner input-Elemente haben kein name-Attribut - für die Verarbeitung der Daten sind die aber wichtig bis notwendig.
• Bei "Ziele" und "so möchte ich trainieren" ist das label kaputt (es ist löblich, dass du label einsetzt!)
• Da schwirrt ein einsames div mit id "senden" herum.
• Die legend- und fieldset-Elemente am Anfang deines Codes ergeben so keinerlei Sinn (und unterbrechen übrigens auch logisch den Textfluss.

Bitte achte unbedingt darauf, die Daten, die du da erhältst, zu prüfen^[2] und entsprechend ihrem Kontext zu behandeln^[3], bevor du sie dir als E-Mail schicken lässt.

Ganz allgemein gesprochen ist das sicher ein eher fortgeschrittenes Anliegen, das du nur anpacken solltest, wenn dir die Grundlagen klar sind. Wenn du eine solche Funktionalität irgendwo "onlinestellen" möchtest, ohne zu wissen, was du da tust, kann das negative Auswirkungen für dich^[4] oder andere^[5] haben - auch wenn sich die meisten davon relativ einfach verhindern lassen.

Grüße,

RIDER

---

1. Wenn du die Probleme ausgebügelt hast können wir gemeinsam noch einmal drüberschauen. ↩︎

2. Wiki: Formulardaten serverseitig auswerten ↩︎

3. Wiki: Kontextwechsel ↩︎

4. Beispiel: Dir wird Code als Nutzereingabe untergejubelt, der deine Systeme kapert oder beschädigt oder dich an der Nase herumführt. ↩︎

5. Beispiel: Dein Kontaktformular wird ausgetrickst und als Spamschleuder missbraucht. ↩︎

[Lisa Zöchner]

Vielen lieben Dank für die ausführliche Beschreibung!! Ich werde mir dieses mal zu Gemüte führen und mich dann sehr gerne wieder melden! lg Lisa (:

[Vollzitat entfernt]

[Lisa Zöchner]

Hier meine überarbeitete Version:

<form action="https://Was soll ich hier eingeben um die Daten per Mail zu bekommen?.php">
 <fieldset>
<legend><i>Sende mir deine Daten und ich erstelle dir deinen persönlichen Body-Plan, bestehend aus:</i></legend><br>

<ul>
 	<li><strong>Trainingsplan</strong></li>
 	<li><strong>Ernährungstipps</strong></li>
</ul>
<i>...abgestimmt auf deine Person, Vorlieben, Möglichkeiten und Ziele!</i>

<label><b>Name:</b> <input name="name" type="text" /></label>

<label><b>Alter:</b> <input name="age" type="text" /></label>

<label><input checked="checked" name="gender" type="radio" value="male" /> männlich</label>
<label><input name="gender" type="radio" value="female" /> weiblich</label>

<label><b>Ziele:
</b><input name="goal" type="text" /></label>

<label><b>So möchte ich trainieren:</b>
<input name="training" type="text" /></label><br>

<label><b>So möchte ich mich ernähren:</b>
<input name="nutrition" type="text" /></label><br>

<label>Mail-Adresse:
<input name="mail" type="text" /></label><br>
</fieldset>

<p><button>Absenden</button></p>
<div><id="senden"></div>
</form>

-> Wie kann ich die Daten auf ihre "Reinheit" überprüfen & Missbrauch verhindern? Danke!!!

lg Lisa

[Vollzitat entfernt]

[Matthias Apsel]

Hallo Lisa Zöchner,

bitte vermeide Vollzitate.

Bis demnächst
Matthias

[marctrix]

Hej Lisa,

-> Wie kann ich die Daten auf ihre "Reinheit" überprüfen & Missbrauch verhindern?

Es ist aller Ehren wert, dass du das selber hinbekommen möchtes. Dieser Weg ist aber sehr lang. Du müsstest dazu programmieren können - und zwar nicht so, dass es am Ende irgendwie funktioniert, sondern sicher. Im Grunde sehe ich drei Möglichkeiten für dich:

1. Du lernst es (auch mit Unterstützung dieses Forums) - aber dann werden vermutlich Wochen oder Monate vergehen, bis du dir alle Grundlagen angeeignet hast.
2. Du lässt es machen - dann ist es schnell erledigt - entsprechend auch nicht besonders teuer. Es gibt auch fertige Lösungen, die ein erfahrener Entwickler beurteilen und verwenden kann - du wirst vermutlich nciht erkennen, wenn eine fertige Lösung mit den erhaltenen Daten Schindluder treibt...
3. Du setzt machst daraus ein Coaching-Projekt, das heitß so wie Du Leute in bezug auf Ernährung und Fitness berätst, nimmst du dir jemanden, der Webseiten entwickeln und seine Arbeit erklären kann. Dann setzt ihr das Projekt gemeinsam um und dein Coach erklärt dir, warum er was wie macht. - Dann hast du etwas gelernt, kannst später auch mal Anpassungen machen und musst nicht wieder für jede Kleinigkeit bezahlen. Und du hast erst einmal eine sichere Anwendung, die (hoffentlich) auch den gesetzlichen Vorgaben entspricht.

Die dritte Methode ist zu Beginn die teuerste, auf Dauer kann sich das aber auszahlen. Insbesondere wenn du daran Spaß hast. Ansonsten würde ich auf Punkt 2 zurückgreifen und dir das machen lassen. Wirtschaftlich sinnvoll ist es nciht, alles was zu einem Betrieb gehört (von der Abrechnung/Steuer über die Reinigung der Räume bis hin zur Werbung/Webseite/Kundenbindung) komplett selber zu machen. - Dann hast du keine Zeit mehr für das, was du eigentlich machen möchtest. Die Zeit, die du für das Erlenen von Webtechniken benötigst, könntest du mit Geldverdienen verbringen ;-)

Just my 2 Cent...

Marc

[Gunnar Bittersmann]

@@Lisa Zöchner

<form action="https://Was soll ich hier eingeben um die Daten per Mail zu bekommen?.php">

Die Adresse deines Scripts.

 <fieldset>
<legend><i>Sende mir deine Daten und ich erstelle dir deinen persönlichen Body-Plan, bestehend aus:</i></legend><br>

fieldset ist hier wohl überflüssig, wenn sowieso alles darin gruppiert ist.

Der Text ist keine Überschrift, also nicht legend, sondern p.

Entsorge bitte alle i-, b- und br-Elemente. Schriftformatierung per CSS.

<ul>
 	<li><strong>Trainingsplan</strong></li>
 	<li><strong>Ernährungstipps</strong></li>
</ul>

Ich sehe auch keinen Grund, das in der Bedeutung hervorzuheben. strong auch weg. Schriftformatierung per CSS.

<label><b>Name:</b> <input name="name" type="text" /></label>

type="text" ist Default, muss also nicht angegeben werden. Zu b s.o.

<label><input checked="checked" name="gender" type="radio" value="male" /> männlich</label>
<label><input name="gender" type="radio" value="female" /> weiblich</label>

Der Fehler hier ist nicht-technischer Natur.

Eine Gruppe von Radiobuttons sollte in einem fieldset-Element eingeschlossen sein.

<div><id="senden"></div>

?? Ein Überbleibsel, was du vergessen hast zu löschen?

So in etwa sollte das Markup aussehen:

<form action="…">
	<p>Sende mir deine Daten und ich erstelle dir deinen persönlichen Body-Plan, bestehend aus:</p>
	<ul>
		<li>Trainingsplan</li>
		<li>Ernährungstipps</li>
	</ul>
	<p>… abgestimmt auf deine Person, Vorlieben, Möglichkeiten und Ziele!</p>

	<p><label>Name: <input name="name"/></label></p>

	<p><label>Alter: <input name="age"/></label></p>

	<fieldset>
		<legend>Geschlecht</legend>
		<label><input name="gender" type="radio" value="male"/> männlich</label>
		<label><input name="gender" type="radio" value="female"/> weiblich</label>
		<label><input name="gender" type="radio" value=""/> keine Angabe</label>
	</fieldset>

	<p><label>Ziele: <input name="goal"/></label></p>

	<p><label>So möchte ich trainieren: <input name="training"/></label></p>

	<p><label>So möchte ich mich ernähren: <input name="nutrition"/></label></p>

	<p><label>Mail-Adresse: <input name="mail"/></label></p>
	
	<p><button>Absenden</button></p>
</form>

Im Stylesheet kannst du dann z.B. angeben:

label { font-weight: bold }
p { font-style: italic }

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

type="text" ist Default, muss also nicht angegeben werden.

	<p><label>Mail-Adresse: <input name="mail"/></label></p>

Hier muss aber doch eine type-Angabe hin, da dieses Einagbefeld nicht vom Typ "text" ist:

	<p><label>Mail-Adresse: <input type="email" name="mail"/></label></p>

LLAP 🖖

[Rolf b]

<b>Ziele:
<label></b><input type="text" /></label>

Falls Du nicht weißt, was Rider mit kaputt gemeint hat: Du hast hier nicht korrekt geschachtelt. Das <b>Ziele: muss mit ins Label hinein. HTML-Elemente sind wie große und kleine Kisten zu betrachten, entweder ist die eine komplett innerhalb oder komplett außerhalb der anderen. Was Du gemacht hast, erfordert eine Säge. Der Browser heilt solche Konstruktionen behelfsweise, indem er sich vor dem </b> ein </label> hinzudenkt.

Unabhängig davon bin ich der Meinung, dass man hier auf <b> </b> verzichten und statt dessen per CSS dem Label ein font-weight:bold zuordnen sollte. Mit HTML 5 sind <b> und <i> semantisch definiert worden, ihre Bedeutung als "bold" und "italic" ist zwar historisch noch gegeben, aber für den Browser keine Pflicht.

Rolf

[Lisa Zöchner]

Vielen Dank für die Tipps und die Hilfe! Ich werde es versuchen die Dinge zu bereinigen :) lg Lisa

[Vollzitat entfernt]

[marctrix]

Hej Lisa,

noch ein Hinweis von mir: persönliche Daten nur verschlüsselt übermitteln!

Marc

[Lisa Zöchner]

Hallo Marc! Meine Daten oder die der Kunden? Vielen Dank! lg Lisa

Hej Lisa,

noch ein Hinweis von mir: persönliche Daten nur verschlüsselt übermitteln!

Marc

[marctrix]

Hej Lisa,

noch ein Hinweis von mir: persönliche Daten nur verschlüsselt übermitteln!

Meine Daten oder die der Kunden?

Am besten die ganze Website, damit es schwieriger ist rauszufinden, wo die sensiblen Daten überhaupt übertragen werden, mindestens aber die Kundendaten!

Dazu gibt es auch gesetzliche Regelungen, finde das aber auf die schnelle nicht - ist glaube ich hier im Forum in früheren Threads bereits verlinkt...

Marc