HTML/Javascript Kontaktformular?

Wie kann ich ein html Formular, erstellen welches mittels Javascript ausgelesen wird und als Objekt auf der Konsole ausgegeben wird nach einem "submit"?

Also ich möchte das Formular auf meiner Webseite als Kontaktformular benutzen, ist eine Uni aufgabe

Comments

[TechPech1984]

du meinst auf der browser console ? oder gibts ein Server ?

[Nerdyderdy]

Ich weis es ehrlich gesagt selbst nicht, also das Kontaktformular soll eine nachricht an meine email senden, kenne mich noch nicht so gut aus mit js

Answer 1

[regex9]

Das Formular kannst du mit den üblichen HTML-Elementen (input, form, button, ...) erstellen. Dazu kannst du auf MDN nachschlagen: HTML forms.

Ich zeige folgend nur ein sehr einfaches Formular:

<form id="my-formular">
  <input name="username">
  <button>Send</button>
</form>

Mit JavaScript kannst du einen Listener an das Formular anhängen, der auf das submit-Event lauscht.

document.getElementById("my-formular").addEventListener("submit", evt => {
  // handle event ...
});

Das Standardverhalten des Browsers bewirkt, dass bei einem submit-Event die Seite in Folge neugeladen wird (es wird ja immerhin ein Request ausgeschickt). Das sollte zuerst verhindert werden:

evt.preventDefault();

In Schritt 2 kannst du dir die Formulardaten mit dem FormData-Objekt herausziehen:

const formData = new FormData(evt.currentTarget);

Und sie anschließend in ein Objekt übertragen.

const data = {};
formData.forEach((value, key) => {
  data[key] = value;
});

Das klappt soweit für Felder mit einem Wert (Textfelder, Radiobuttons, u.ä.). Hättest du z.B. eine Auswahlliste mit Mehrfachauswahl, müsstest du erst schauen, ob es den Schlüssel in data schon gibt und wenn ja, die Werte in einem Array unterbringen.

Die Ausgabe in der Konsole sollte nun kein Problem mehr darstellen.

(...) also das Kontaktformular soll eine nachricht an meine email senden (...)

Wenn das ohne Hilfe einer serverseitigen Webanwendung geschehen soll, müsstest du darauf vertrauen, dass der Nutzer einen Mailclient installiert hat, der den Versand übernehmen kann.

Im einfachsten Fall klappt es ohne JavaScript:

<form action="mailto:[e-mail]">
  <input name="subject">
  <textarea name="body"></textarea>
  <button>Send</button>
</form>

Eine Validation kann man mit verschiedenen Attributen einbauen (pattern, required, maxlength). Das die leicht umgehbar ist, sollte allerdings ebenso klar sein.

Wenn der Versand explizit mit JavaScript getriggert werden soll, kann man sich wie schon oben gezeigt an das submit-Event hängen. Diesmal würde ich das FormData-Objekt nicht in eine Objekt konvertieren, sondern in einen Querystring.

const query = new URLSearchParams(formData).toString();
window.location.href = `mailto:[e-mail]?${query}`;

Besser wäre es allerdings, wenn eine serverseitige Webanwendung die Daten empfangen und an einen Mailserver schicken würde. Dann könnten die Formulardaten auch besser im Vorfeld validiert werden.

Unter der Maßgabe, dass das alles noch immer mit JavaScript entwickelt werden soll, solltest du dich mit Node.js auseinandersetzen. Ein Modul wie nodemailer kann beim E-Mail-Versand helfen.

Comments

[Nerdyderdy]

Vielen Dank, das du sir so viel zeit genommen hast :) hat einwandfrei geklappt.

Answer 2

[elmex7]

Um ohne Aufwand Formulare als Email zu versenden: Du könntest einfach einen Service wie https://formspree.io/ einbinden.