Formulargenerator von Werner - Feintuning

PHP, CSS und JavaScript lernen. Anwendungen für Webseiten
vr6
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 14
Registriert: So 4. Apr 2021, 14:06

Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von vr6 »

Hallo zusammen,
hallo Werner,
es ist ja schon eine Weile her:

https://www.nof-schule.de/forum/t-formu ... #pid145029

und ich konnte deinen Formulargenerator mit deiner Hilfe auch schon für mich ein bisschen weiter verfeinern.
Vielen Dank nochmals dafür.
Jetzt beschäftige ich mich noch mit den Kleinigkeiten, und dabei hänge ich gerade an den Punkten:

Die Funktion der drei Buttons ganz unten:


Wenn man das Formular irgendwo im Verlauf einer langen page positioniert, dann
springt der Browser nach Betätigung der Buttons "Vorschau" oder "Absenden" zum Anfang der page.
Ich sähe gerne, dass der Browser zu dem Abschnitt springt, in dem die Meldungen erscheinen, also
direkt vor dem Formularcode. Das sollte irgendwie mit href gehen, aber ich habe noch nicht die Stellen gefunden,
an denen ich das href... an den entsprechenden Zeilen dran hängen kann, so dass es funktioniert.



Der "Abbrechen"-Button führt zum ersten Eingabefeld zurück. In den Eingabefeldern steht noch alles drin,
ganz gleich wie oft ich "abbrechen" klicke.
Dachte, ein Abbrechen führt zum echten abbrechen. Also bspw. zum Seitenanfang, und die Formularfelder wären
dann leer. Auch muss ich für "Abbrechen" einen Sicherheitscode eingeben.
Für mich ideal wäre: jederzeit ohne Sicherheitscode auf "Abbrechen" klicken zu können,
daraufhin direkt zum Seitenanfang zu gelangen, und
das Formular zu leeren. Ggf. noch mit einer Rückfrage: "Wirklich abbrechen?".


Sonnige Grüße, vr6.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 1351
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von Tommy Herrmann »

Moin,

hier mal ein Beispiel mit einem meiner Formulare:

https://mobirise-tutorials.com/Formular/

Es wäre gut, wenn Du hier einen Link zu Deiner Formular-Seite postest, denn nur dann kann man auch wirklich helfen.

Ich habe das mit der Position so gelöst, indem ich die ID des Mobirise-Blocks mit an die Formular-Aktion geschrieben habe.

Die Seite mit dem Formular wird ja nochmals aufgerufen - hier ist das im Beispiel meine Startseite "index.php". Du musst also mal gucken, welche ID Dein Block hat (diese ID steht auch ganz oben links im "Code-Editor").

Hier ist das die die:

id="content1-2"

<form name='Form' action='index.php#content1-2' method='post'>

Formular-Aktion.JPG


Das mit dem "Abbrechen" wird Dir sicher Werner noch schreiben ...
vr6
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 14
Registriert: So 4. Apr 2021, 14:06

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von vr6 »

Hey Tommy,
vielen Dank. Manches ist ja echt einfach. :tu:
Das klappt schon mal. Hast mir super helfen können.

Die Seite läuft zur Zeit nur auf einem Server, und wurde noch nicht online freigegeben.
Grüße, vr6.
vr6
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 14
Registriert: So 4. Apr 2021, 14:06

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von vr6 »

Hallo zusammen,
ich habe bei der Vorschau links neben der dann folgenden Auflistung einen senkrechten roten Strich stehen.
Der stammt aus einer älteren Formularversion von Werner. Habe nicht gefunden, wo das Rot definiert ist,
und bekomme ihn auch nicht weg.
Auch Google zeigt mir keine brauchbaren Ergebnisse, wonach man einen durchgehenden senkrechten Strich
neben der Auflistung bekommt, sonst könnte ich mal nach einem Codeschnipsel suchen.

Weiß jemand mehr?

Grüße, vr6.
vr6
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 14
Registriert: So 4. Apr 2021, 14:06

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von vr6 »

Hallo nochmal,
das mit der Linie habe ich zum Teil herausbekommen können.
Könnte eine CSS-Formatierung in Bootstrap selbst sein. In Werners Formular habe ich nichts finden können.

Abhilfe:
Habe dann in der CSS der Mobirise-Page geschrieben:

blockquote {
border-left: 2px solid #farbcode;
}

und schon bekommt die Linie eine andere Farbe (hier: grau). Nur ganz weg bekomme ich sie nicht.

Grüße, vr6.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 1351
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von Tommy Herrmann »

na doch - Du musst doch nur das Tag <blockquote> ... und auch das dazu schließende Tag </blockquote> löschen und gut ist.

https://www.w3schools.com/tags/tag_blockquote.asp

... das sieht mir auch so aus, als hätte das mit dem Formular vom Werner nichts zu tun, sondern so - als hättest Du einen Mobirise-Block mit einem <blockquote> verwendet.

... aber ohne Deine Seite zu sehen ist es einfach unmöglich genaue Angaben zu machen. Ich habe keine Ahnung warum man die Seite nicht einfach mal online stellen kann wenn man Fragen hat. Man kann doch so ein Verzeichnis dann auch mittels Passwort schützen.
vr6
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 14
Registriert: So 4. Apr 2021, 14:06

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von vr6 »

Hallo Tommy,
ich danke dir.
Ich habe leider noch nicht die Erlaubnis, Teile der Site zu zeigen.
Du hast Recht. Es wäre sonst vieles einfacher.
Grüße, vr6.
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 155
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von Werner-Zenk.de »

Hallo vr6,
ich würde auf den Abbrechen-Button verzichten. Wenn jemand ein umfangreiches Formular ausgefüllt hat und dann versehentlich den Button anklickt, dann ist das für den Benutzer sehr ärgerlich. Fraglich ist dann, ob er sich die Mühe mit dem Ausfüllen des Formulars noch einmal macht.
Der "Abbrechen"-Button führt zum ersten Eingabefeld zurück. In den Eingabefeldern steht noch alles drin,
ganz gleich wie oft ich "abbrechen" klicke.
Dachte, ein Abbrechen führt zum echten abbrechen. Also bspw. zum Seitenanfang, und die Formularfelder wären
dann leer. Auch muss ich für "Abbrechen" einen Sicherheitscode eingeben.
Für mich ideal wäre: jederzeit ohne Sicherheitscode auf "Abbrechen" klicken zu können,
daraufhin direkt zum Seitenanfang zu gelangen, und
das Formular zu leeren. Ggf. noch mit einer Rückfrage: "Wirklich abbrechen?".
So etwas ähnliches habe ich auch schon in diversen Formularen eingebaut, aber leider sind das spezielle Anpassungen an das Formular, da oft JavaScript verwendet wird.
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
vr6
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 14
Registriert: So 4. Apr 2021, 14:06

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von vr6 »

Guten Abend Werner,
danke für deine Einschätzung.
Das Weglassen wird wahrscheinlich das Beste sein.
Denn das "Abbrechen" ist ja kein wirkliches abbrechen.

Welche Idee steckte damals bei dir dahinter, einen "Abbrechen"-Button im Formular zu ermöglichen?

Grüße, VR6.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 1351
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von Tommy Herrmann »

gucke mal - hier habe ich noch ein ganz altes Formular vom Werner (noch in "NOF" eingebaut):

http://www.nof-tutorials.com/Kontakt-Fo ... spiel3.php

... da wurde es dann bei "Abbrechen" tatsächlich leer gesetzt. Das kann aber (bei großen Formularen) wirklich lästig sein. Eigentlich kann ich auch keinen Sinn in der Option "Abbrechen" erkennen, denn entweder füllt man das Formular eben neu aus, verbessert Fehler oder lässt es einfach sein und verlässt die Seite.
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 155
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von Werner-Zenk.de »

Hier mal ein JavaScript wie man das umsetzen könnte:

Code: Alles auswählen

<button type="button" id="reset">Abbrechen</button>

<script>
document.querySelector("#reset").addEventListener( "click", function() {
 if (confirm("Möchten Sie die Formulareingaben wirklich beenden?")) {
  window.location.href=document.URL;
 }
});
</script>
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
vr6
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 14
Registriert: So 4. Apr 2021, 14:06

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von vr6 »

Hallo ihr beiden,
ja - super. Danke euch. :tu:
Nun kann ich mal überlegen, ob ich "Abbrechen" noch behalten möchte, oder nicht.
Da werd´ ich mal ´ne Nacht drüber schlafen. :)
Grüße, vr6.
vr6
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 14
Registriert: So 4. Apr 2021, 14:06

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von vr6 »

Hallo zusammen,
ich möchte hier kurz das Thema Placeholder ansprechen.
Finde Placeholder richtig gut, nur, wenn dort vom Nutzer im Betreff nichts rein geschrieben wird,
dann bekomme ich in einer Mail natürlich auch keinen Betreff angezeigt.
Ich möchte den Betreff nicht als Pflichtfeld ausführen.
Gibt es eine Möglichkeit das so zu gestalten:
- Wenn der Nutzer keinen Betreff schreibt, dann wird der Placeholdereintrag verwendet.
- Wenn der Nutzer einen Betreff schreibt, dann wird der Betreff des Nutzers verwendet.
Grüße, vr6.


Beispielformular mit Placeholder im Betreff

Code: Alles auswählen

 <!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
  body, textarea {
   font-family: Verdana, Sans-Serif;
   font-size: 1rem;
  }

  span.pflichtfeld {
   font-size: 0.90rem;
   color: Red;
  }
  </style>

 </head>
<body>

<?php
/*
   Aktion: Formulardaten als E-Mail versenden.
   Formular - PHP 5.4+, Zeichenkodierung: UTF-8
   Siehe: https://werner-zenk.de/tipps/schriftzeichen_richtig_darstellen.php

   Erstellt mit dem Formular Generator (11.06.2021) - 
   https://werner-zenk.de/tools/formulargenerator.php

   Bitte testen Sie das Formular ausführlich und
   beachten Sie die Hinweise im Quelltext!
*/

// PHP Fehlermeldungen (1 um das Formular zu testen) anzeigen.
error_reporting(1); // (0/1)

// Weiterleitung - Nach dem absenden des Formulars,
// gelangt der Benutzer über einen Link auf folgende Seite:
$Weiterleitung = "index.php"; // Relativer Pfad, ausgehend vom Formular.

$name = isset($_POST["name"]) ? htmlspecialchars(trim($_POST["name"])) : ""; // Name
$email = isset($_POST["email"]) ? htmlspecialchars(trim($_POST["email"])) : ""; // E-Mail
$betreff = isset($_POST["betreff"]) ? htmlspecialchars(trim($_POST["betreff"])) : ""; // Betreff
$nachricht = isset($_POST["nachricht"]) ? htmlspecialchars(trim($_POST["nachricht"])) : ""; // Nachricht

// Benutzereingaben überprüfen
// Die Meldungen müssen hier eventuell angepasst werden.
$Fehler = ["name"=>"", "email"=>"", "betreff"=>"", "nachricht"=>""];
if (isset($_POST["submit"])) {
 $Fehler["name"] = strlen($_POST["name"]) < 1 ? " Bitte füllen Sie dieses Feld aus!" : "";
 $Fehler["email"] = filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false ? " Geben Sie eine gültige E-Mail-Adresse ein!" : "";
 $Fehler["betreff"] = strlen($_POST["betreff"]) < 1 ? " Bitte füllen Sie dieses Feld aus!" : "";
 $Fehler["betreff"] .= !ctype_digit($_POST["betreff"]) ? " Geben Sie nur Ziffern ein!" : "";
 $Fehler["nachricht"] = strlen($_POST["nachricht"]) < 10 ? " Bitte füllen Sie dieses Feld aus (min. 10 Zeichen)!" : "";
}

// Formular erstellen
$Formular = "
<form action='" . $_SERVER["SCRIPT_NAME"] . "' method='post'>

<p>
 <label> Name:
<span class='pflichtfeld'>&#10034; " . $Fehler["name"] . "</span><br>
  <input type='text' name='name' value='" . $name . "' size='35' tabindex='1'>
 </label>
</p>

<p>
 <label> E-Mail:
<span class='pflichtfeld'>&#10034; " . $Fehler["email"] . "</span><br>
  <input type='email' name='email' value='" . $email . "' size='35' tabindex='2'>
 </label>
</p>

<p>
 <label> Betreff:
<span class='pflichtfeld'>&#10034; " . $Fehler["betreff"] . "</span><br>
  <input type='text' name='betreff' value='" . $betreff . "' size='45' placeholder='Ihr Anliegen' tabindex='3'>
 </label>
</p>

<p>
 <label> Nachricht:
 <span class='pflichtfeld'>&#10034; " . $Fehler["nachricht"] . "</span><br>
 <textarea name='nachricht' cols='40' rows='8' tabindex='4'>" . $nachricht . "</textarea>
 </label>
</p>

<p>
 <br>
 <input type='submit' name='submit' value='Formular absenden' tabindex='5'>
</p>

<p>
 <small>Bitte alle mit <span class='pflichtfeld'>&#10034;</span>
 markierten Felder ausfüllen.</small>
</p>

</form>
";

// Formular abgesendet
if (isset($_POST["submit"])) {

 // Sind keine Benutzer-Eingabefehler vorhanden
 if (implode("", $Fehler) == "") {

  // Daten als E-Mail versenden (Vorschlag) - Bitte anpassen!

  // Zeitzone und das aktuelle Datum setzen
  // http://de3.php.net/manual/de/timezones.europe.php
  date_default_timezone_set("Europe/Berlin");
  $Datum = date("d.m.Y H:i");

  // Empfänger E-Mail
  // Eine beim Provider registrierte E-Mail Adresse verwenden!
  $Mailto = "name@example.com";

  // Inhalt der E-Mail setzen
  $Text = "   Gesendet am: $Datum Uhr
   Name: $name
   E-Mail: $email
   Betreff: $betreff
   Nachricht: $nachricht
  ";

  // E-Mail versenden
  mb_internal_encoding("UTF-8");
  $Betreff = mb_encode_mimeheader($betreff, "UTF-8", "Q");
  $Kopfzeile = "MIME-Version: 1.0;\nFrom: " . mb_encode_mimeheader($name, "UTF-8", "Q") .
   "<" . $email . ">" . "\nContent-Type: text/plain; Charset=UTF-8;\n";

  if (mail($Mailto, $Betreff, $Text, $Kopfzeile)) {

   echo "<p>Vielen Dank, die Nachricht wurde versendet.</p>";
  }
  else {

   // Wenn die Daten nicht versendet werden konnten,
   // wird die E-Mail-Adresse für den direkten Kontakt eingeblendet.
   echo "<p>Beim Senden der Nachricht ist ein Fehler aufgetreten!<br>" . 
   "Bitte wenden Sie sich direkt an: <a href='mailto:" . $Mailto . "'>" . $Mailto . "</a></p>";
  }

  // Weiterleitung
  echo "<p><a href='" . $Weiterleitung . "' target='_top'>Weiter</a></p>";
 }
 else {

  // Formular und Benutzer-Eingabefehler ausgeben
  echo $Formular;
 }
}
else {

 // Formular ausgeben
 echo $Formular;
}
?>

</body>
</html> 
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 1351
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von Tommy Herrmann »

Moin,

jede Mail muss einen "Betreff" haben, das benötigt der Mail-Header - sonst ist die ungültig.

Entweder Du machst das Feld "Betreff" zu einem Pflichtfeld oder Du musst eine Betreff-Zeile selbst in die Mail aufnehmen.

Der Placeholder ist ein Platzhalter - und kein Inhalt eines Feldes (wie die Bezeichnung ja schon ausdrückt).
vr6
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 14
Registriert: So 4. Apr 2021, 14:06

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von vr6 »

Hey Tommy,
was meinst du mit: "sonst ist die ungültig"?
Die Mails kommen auch ohne Betreff bei mir an. Ist nur nicht übersichtlich.

Es gibt doch bestimmt eine Möglichkeit wie:
if Nutzer "" else "Placeholdertext"

Also, wenn Nutzer nichts eingibt, dann schreibe Placeholdertext.
Den könnte ich ja noch mal benennen.

Weißt du, was ich machen möchte? Vielleicht muss ich es versuchen, anders zu erklären.

Grüße, vr6.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 1351
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von Tommy Herrmann »

... ich glaube das wird Dir Werner besser erklären können.

Du kannst auch anstelle vom Placeholder dort bereits einen Text mit "value" (Wert) vorab eintragen.

https://www.w3schools.com/tags/tryit.as ... nput_value

... also z.B. dann so:

<input type='text' name='betreff' value='Formular von meiner Webseite' size='45' readonly tabindex='3'>
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 155
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Formulargenerator von Werner - Feintuning

Ungelesener Beitrag von Werner-Zenk.de »

vr6 hat geschrieben: Fr 11. Jun 2021, 10:55 Hey Tommy,
was meinst du mit: "sonst ist die ungültig"?
Die Mails kommen auch ohne Betreff bei mir an. Ist nur nicht übersichtlich.
Das mit dem Betreff in der E-Mail hat PHP-technische Gründe. Wie ich bereits an andere Stelle schrieb:
Werner-Zenk.de hat geschrieben: So 13. Jun 2021, 12:45 Die PHP mail()-Funktion erwartet vier Parameter: Empfänger-E-Mail, Betreff, Inhalt und die Kopfzeile (diese ist Optional) https://www.php.net/manual/de/function.mail.php.

In der Kopfzeile ist die Absender-E-Mail mit drin. Ohne die Kopfzeile wird die E-Mail von vielen Providern nicht versendet (und das zurecht, wer möchte schon eine E-Mail von einem unbekannten versenden oder empfangen. Der Provider möchte auch nicht auf einer schwarzen (Spam-)Liste auftauchen, denn sonst kommen die E-Mails nie beim Empfänger an).

Ein leerer Betreff ist auch schlecht, viele Provider identifizieren solche E-Mails als Spam! Und in Outlook ist es so, dass man je nach Betreff oder Absender-E-Mail die Mails automatisch in andere Verzeichnisse verschieben kann (E-Mail Regeln).
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Antworten

Wer ist online?

Mitglieder in diesem Forum: Bing [Bot] und 1 Gast