Kontaktformular Website Design?

17.01.2022, 14:03

Bild

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, Webseite
17.01.2022, 14:13

Du schreibst doch nur die Nachricht in den Mailkörper. Die wird als Plaintext so übermittelt, wie es der Nutzer im Formular eingegeben hat.

Grundsätzlich kannst du, da du eine E-Mail mit HTML-Mimetype verschickst, auch HTML in den Body einfügen.

Beispiel:

$mail->Body = "<p>${body}</p>";

Halte das HTML aber am besten sehr einfach, nicht jeder E-Mail-Client unterstützt alles. Support-Tabellen findest du auf Can I email?.
MrMuffin2002 
Beitragsersteller
 17.01.2022, 14:15

Okay mach ich. Was ist Encryption_smtps und _starttls?

0
regex9  17.01.2022, 14:37
@MrMuffin2002 
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;

Mit diesem Wert wird explizit angefordert, dass die Nachricht über eine verschlüsselte Verbindung verschickt werden soll. Als Port wird die 587 verwendet.

Mit ENCRYPTION_SMTPS erfolgt die Kommunikation über Port 465. Die gesichterte Verbindung wird implizit generiert.

Für dich als Endnutzer ist nur der Port wichtig.

0
MrMuffin2002 
Beitragsersteller
 17.01.2022, 14:41
@regex9

Okay aber als Websitebetreiber, ist es ratsam das zu schreiben? Oder gibt es noch andere Möglichkeiten für die Sicherheit?

0
regex9  17.01.2022, 14:47
@MrMuffin2002

Wenn immer die Möglichkeit besteht, über SSL/TLS zu kommunizieren, würde ich das auch für den Versand sensibler Daten nutzen.

Es gibt noch andere Ansatzpunkte, wie die Verschlüsselung der Nachricht selbst. Das ersetzt aber nicht obige Maßnahme.

0
MrMuffin2002 
Beitragsersteller
 17.01.2022, 15:34
@regex9

Okay. Weißt du vielleicht auch, wie ich das machen kann, wenn die nachricht gesendet wird, dass über dem Kontaktformular "Erfolgreich gesendet" steht. Weil jetzt mit echo ist es ja auf der neuen seite

0
regex9  17.01.2022, 16:05
@MrMuffin2002

Verschick das Formular mit JavaScript.

<p class="hidden" id="output"></p>
<form id="contact-form">
  <!-- input fields, etc. ... -->
</form>
<script>
  const form = document.getElementById("contact-form");
  form.addEventListener("submit", evt => {
    const data = new FormData(form);
    const querystring = new URLSearchParams(data);
    
    fetch("URL to your PHP script ...", { method: "post", body: querystring })
      .then(response => response.text())
      .then(result => {
        const output = document.getElementById("output");
        output.textContent = result;
        output.classList.remove("hidden");
      })
      .catch(error => console.error(error));

    evt.preventDefault();
  });
</script>

CSS:

.hidden { display: none; }

Die Logik für den Mailversand lagerst du in ein extra PHP-Skript aus. Fehlermeldungen / Erfolgsnachrichten gibst du dort ganz normal mit print / echo / die aus.

Der JavaScript-Code unterbricht bei Auslösen des submit-Events den normalen Formularversandweg und sammelt stattdessen selbst alle Formulardaten, um sie dann (via fetch) an das PHP-Skript zu schicken. Das passiert parallel zur Webseitenanzeige, daher ist ein Neuladen der Webseite nicht nötig.

Die Ausgaben des PHP-Skripts wiederum werden zurückgeschickt und aufgefangen (Response). Das JavaScript schreibt sie in den Paragraph #output.

0