Erstes deutsches Bootstrap-Forum

Normale Version: Update DSGVO Kontaktformuler Bootstrap 4.1 /3.xx
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Seiten: 1 2 3 4 5
Hier mal ein einfaches DSGVO konformes Kontakt- Formular.
- Mit Chekbox für die Zustimmung zur Speicherung der Daten.
- Validator: jQuery validator.js

Grundvoraussetzung ist das ein SSL-Zertifikat installiert ist  !!!
Es funktioniert aber auch ohne SSL dann ist es aber nicht DSGVO konform.


Update Version 1.1!

Demo mit Alertmeldung
Hier wird  eine Erfols- oder Fehlermeldung in einer Alertbox augegeben.
Demo mit Umleitung
Nach den senden wird auf einen danke.html oder error.html umgeleitet
Demo mit Modal
Hier wird  eine Erfols- oder Fehlermeldung in einen Modal augegeben.
Super, vielen Dank! Es hat auch funktioniert.
Allerdings versuche ich noch hinzubekommen, dass der Absender der Mail gleichzeitig der Wert ist, der ins E-Mail-Feld eingegeben wurde, sodass ich nur auf "Antworten" klicken brauche. Könntest du mir da eventuell einen Tipp geben, was ich im Feld $from = 'mail@st.de'; // Absender eingeben muss?
Das sollte so gehen:

$from = $_POST['email']; // Absender
Super! Ich danke dir sehr!
Das hat funktioniert.

Noch eine dumme Frage (sorry, ich bin wirklich absoluter Anfänger): Wie füge ich in contact.php einen Zeilenumbruch ein?
In der Mail steht der Name direkt hinter dem Satz: "Sie haben eine neue Nachricht von Ihrer WebseiteName:"

Ich habe schon /n und <br> und </br> ausprobiert.

Und noch eine Frage:
Ist es möglich, anstatt diesen Text einzublenden ("$okMessage = 'Ihre Nachricht wurde gesendet!'; // Erfolgsmeldung") auf eine Seite umzuleiten, z.B. danke.html?

Vielen, vielen Dank für deine Hilfe!
$emailText = "Sie haben eine neue Nachricht von Ihrer Webseite \n"; // Überschrift Textbereich email
Super, das hat auch geklappt.
Du bist mein Held!

Vielen Dank auch fürs Bereitstellen des Formulars.

Hast du noch einen Tipp zum Weiterleiten auf eine danke.html-Seite beim erfolgreichen Übermitteln?
Das wäre großartig.
hallo The-Error,

ich würde gerne diesen part -

Zitat:* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend. Dieses Formular speichert Ihren Namen, Ihre Email Adresse sowie den Inhalt, damit wir Ihre Anfrage auch auswerten können. Weitere Informationen finden Sie auf unserer Seite der Datenschutzerklärung.



* Pflichtfelder

in mein Formular aufnehmen




HTML5
  1. <div class="col-md-12">
  2.  
  3. <label for="checkbox"><span class="text-danger">* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.</span></label>
  4.  
  5. <input type="checkbox" name="myCheckbox" id="myCheckbox" required> Dieses Formular speichert Ihren Namen, Ihre Email Adresse sowie den Inhalt, damit wir Ihre Anfrage auch auswerten können. Weitere Informationen finden Sie auf unserer Seite der <a href="[url=https://bootstrap-forum.de/beispiele/Kontakt-Formular/datenschutz.html]datenschutz.html[/url]"> Datenschutzerklärung.</a><br><br>
  6.  
  7. <input type="submit" class="btn btn-success btn-send" value="Nachricht absenden"> </div>
  8.  
  9. </div>
  10.  
  11. <div class="row">
  12.  
  13. <div class="col-md-12">
  14.  
  15. <p class="text-muted"><strong>*</strong> Pflichtfelder</p>
  16.  
  17. </div>


Brauche ich da schon SSL? Ich befürcht ja.


Was wäre an meinem zu ändern, wenn SSL ( kostet doch auch was. Oder?) nicht gewünscht wäre

meins:
HTML5
  1. <div id="contact" class="text-center">
  2.         <div class="container">
  3.             <div class="section-title center">
  4.                 <h2>Get In Touch</h2>
  5.                 <hr>
  6.             </div>
  7.             <div class="col-md-8 offset-md-2">
  8.                 <form name="sentMessage" id="contactForm" novalidate>
  9.                     <div class="row">
  10.                         <div class="col-md-6">
  11.                             <div class="form-group">
  12.                                 <input type="text" id="name" class="form-control" placeholder="Name" required="required">
  13.                                 <p class="help-block text-danger"></p>
  14.                             </div>
  15.                         </div>
  16.                         <div class="col-md-6">
  17.                             <div class="form-group">
  18.                                 <input type="email" id="email" class="form-control" placeholder="Email" required="required">
  19.                                 <p class="help-block text-danger"></p>
  20.                             </div>
  21.                         </div>
  22.                     </div>
  23.                     <div class="form-group">
  24.                         <textarea name="message" id="message" class="form-control" rows="4" placeholder="Nachricht" required></textarea>
  25.                         <p class="help-block text-danger"></p>
  26.                     </div>
  27.                     <div id="success"></div>
  28.                     <button type="submit" class="btn btn-default btn-lg">Senden</button>
  29.                 </form>
  30.                 <div class="social">
  31.                     <ul>
  32.                         <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  33.                         <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  34.  
  35.                     </ul>
  36.                 </div>
  37.             </div>
  38.         </div>
  39.     </div>


Grundsätzlich funktioniert das Formular auch ohne SSL aber laut DSGVO dürfen Benutzerdaten nur verschlüsselt übertragen werden.
Also Vorsicht die Abmahnspezis lauern schon!!!
Bei welchen Provider hast du deine Seite gehorstet manche bieten das SSL-Zertifikat auch kostenlos an.
Mein Hoster ist Alfahosting. Bei meinem Tarif ist ein SSL verfügbar, dass sich alle 90 Tage verlängrt.
Für die Seite, an der wir gerade herumbasteln, haben ich noch keinen Hoster ausgesucht. 

Wie genau kann ich deine check box samt Button in mein Formular einfügen?
Wo werden die Scripte gespeichrt? Und kann ich das css einfach in meines einfügen?
So könnte es aus seheh:
HTML5
  1.         <div id="contact">
  2.             <div class="container">
  3.                 <div class="section-title center">
  4.                     <h2 class="text-center">Get In Touch</h2>
  5.                     <hr>
  6.                 </div>
  7.                 <div class="col-md-8 offset-md-2">
  8.                             <div id="contact">
  9.             <div class="container">
  10.                 <div class="section-title center">
  11.                     <h2 class="text-center">Get In Touch</h2>
  12.                     <hr>
  13.                 </div>
  14.                 <div class="col-md-8 offset-md-2">
  15.                     <form name="sentMessage" id="contactForm" action="contact.php" role="form">
  16.                         <div class="row">
  17.                             <div class="col-md-6">
  18.                                 <div class="form-group">
  19.                                     <input type="text" id="name" class="form-control" placeholder="Name" required="required">
  20.                                     <p class="help-block text-danger"></p>
  21.                                 </div>
  22.                             </div>
  23.                             <div class="col-md-6">
  24.                                 <div class="form-group">
  25.                                     <input type="email" id="email" class="form-control" placeholder="Email" required="required">
  26.                                     <p class="help-block text-danger"></p>
  27.                                 </div>
  28.                             </div>
  29.                         </div>
  30.                         <div>
  31.                             <textarea name="message" id="message" class="form-control" rows="4" placeholder="Nachricht" required></textarea>
  32.                             <p class="help-block text-danger"></p>
  33.                         </div>
  34.                         <label for="checkbox"><span class="text-danger float-left">* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.</span></label><br>
  35.                         <input type="checkbox" name="myCheckbox" id="myCheckbox" required> Dieses Formular speichert Ihren Namen, Ihre Email Adresse sowie den Inhalt, damit wir Ihre Anfrage auch auswerten können. Weitere Informationen finden Sie auf unserer Seite der <a href="datenschutz.html"> Datenschutzerklärung.</a>
  36.                         <div id="success" class="text-center">
  37.                             <button type="submit" class="btn btn-default btn-lg ">Senden</button></div>
  38.                     </form>
  39.                     <div class="social mt-4">
  40.                         <ul class="d-flex justify-content-center">
  41.                             <li class="mr-4"><a href="#"><i class="fa fa-facebook"></i></a></li>
  42.                             <li class="mr-4"><a href="#"><i class="fa fa-twitter"></i></a></li>
  43.                             <li class="mr-4"><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
  44.                         </ul>
  45.                     </div>
  46.                 </div>
  47.             </div>
  48.         </div>
  49.                         <div class="row">
  50.                             <div class="col-md-6">
  51.                                 <div class="form-group">
  52.                                     <input type="text" id="name" class="form-control" placeholder="Name" required="required">
  53.                                     <p class="help-block text-danger"></p>
  54.                                 </div>
  55.                             </div>
  56.                             <div class="col-md-6">
  57.                                 <div class="form-group">
  58.                                     <input type="email" id="email" class="form-control" placeholder="Email" required="required">
  59.                                     <p class="help-block text-danger"></p>
  60.                                 </div>
  61.                             </div>
  62.                         </div>
  63.                         <div>
  64.                             <textarea name="message" id="message" class="form-control" rows="4" placeholder="Nachricht" required></textarea>
  65.                             <p class="help-block text-danger"></p>
  66.                         </div>
  67.                         <label for="checkbox"><span class="text-danger float-left">* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.</span></label><br>
  68.                         <input type="checkbox" name="myCheckbox" id="myCheckbox" required> Dieses Formular speichert Ihren Namen, Ihre Email Adresse sowie den Inhalt, damit wir Ihre Anfrage auch auswerten können. Weitere Informationen finden Sie auf unserer Seite der <a href="datenschutz.html"> Datenschutzerklärung.</a>
  69.                         <div id="success" class="text-center">
  70.                             <button type="submit" class="btn btn-default btn-lg ">Senden</button></div>
  71.                     </form>
  72.                     <div class="social mt-4">
  73.                         <ul class="d-flex justify-content-center">
  74.                             <li class="mr-4"><a href="#"><i class="fa fa-facebook"></i></a></li>
  75.                             <li class="mr-4"><a href="#"><i class="fa fa-twitter"></i></a></li>
  76.                             <li class="mr-4"><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
  77.                         </ul>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.         </div>



der pfad zur php-datei welche ausgeführt wird wenn auf den Submit-Button geklickt wird, muss hier angegeben werden "<form name="sentMessage" id="contactForm" action="pfad/contact.php" role="form">"
das Script lädst du über <script src="pfad/kontakt.js"></script>
Seiten: 1 2 3 4 5