Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Update DSGVO Kontaktformuler Bootstrap 4.1 /3.xx
#1
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.


Angehängte Dateien
.rar   Bootstrap Kontaktformular mit Umleitung 1.1.rar (Größe: 6,01 KB / Downloads: 16)
.rar   Bootstrap Kontaktformular.rar (Größe: 4,96 KB / Downloads: 10)
.rar   Kotaktformular-Modal.rar (Größe: 4,75 KB / Downloads: 9)
Zitieren
#2
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?
Zitieren
#3
Das sollte so gehen:

$from = $_POST['email']; // Absender
Zitieren
#4
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!
Zitieren
#5
$emailText = "Sie haben eine neue Nachricht von Ihrer Webseite \n"; // Überschrift Textbereich email
Zitieren
#6
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.
Zitieren
#7
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>


Eine Katze, die sich im Unterarm fest gebissen hat,
lässt sich leicht unter kaltem Wasser wieder abwaschen. Big Grin
Zitieren
#8
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.
Zitieren
#9
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?
Eine Katze, die sich im Unterarm fest gebissen hat,
lässt sich leicht unter kaltem Wasser wieder abwaschen. Big Grin
Zitieren
#10
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>
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Problem mit Modal
Last Post: The-Error
09.07.2019 11:55
» Replies: 1
» Views: 64
Update DSGVO Kontaktformuler Bootstrap 4...
Last Post: The-Error
21.06.2019 11:46
» Replies: 41
» Views: 5151
Amazon peer CSS ändern ?
Last Post: Caro
18.06.2019 21:41
» Replies: 0
» Views: 133

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 254
» Latest member: mps
» Forum threads: 219
» Forum posts: 902

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>