Hoe ook al weer email form html website werkend krijgen?

Status
Niet open voor verdere reacties.
femke98

femke98

Meubilair
Lid geworden
16 dec 2006
Berichten
6.679
Ik weet het even niet meer.
Ik heb een html website gedownload maar hier zitten geen mail scripts bij. Die mag je erbij kopen ;)
https://templatemo.com/tm-517-timeless

Er staat een contactformulier op de website., de code hiervan is:

Code: 
  <div class="col-lg-6 mb-5">
                <h3 class="tm-text-orange tm-font-400">Contact ons</h3>
                <form action="#contact" method="post" class="tm-contact-form">
                    <div class="row">
                        <div class="form-group col-xl-6">
                            <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name..." required/>
                        </div>
                        <div class="form-group col-xl-6">
                            <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email..." required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <textarea id="contact_message" name="contact_message" class="form-control" rows="6" placeholder="Your Message..." required></textarea>
                    </div>
                    <button type="submit" class="btn  tm-btn-send">Verzenden</button>
                </form>
            </div>

Maar als ik mij nog kan herinneren is dat ik een php script moet maken en deze moet uploaden naar de website waar de index.html staat.
Maar sorry, kan iemand mij helpen?

Hartelijk dank alvast.

edit: de website is: https://test.angelavanderploeg.nl/
 
Laatst bewerkt:
1. Verander de html
Code: 
<form action="contact.php" method="post" class="tm-contact-form">

2. Maak een bestand "contact.php" met de onderstaande php

3. Download zip en uitpakken https://github.com/PHPMailer/PHPMailer/archive/refs/heads/master.zip

4. Kopieer het volgende naar de root van je website
Code: 
+-- PHPMailer
       +-- src
            +-- (bestanden)
+-- contact.php

php voor bestand contact.php
PHP: 
<?php

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

// bestanden
$dir = str_replace('\\', '/', dirname(__FILE__).'/PHPMailer/src');
require $dir . '/Exception.php';
require $dir . '/PHPMailer.php';
require $dir . '/SMTP.php';

if (array_key_exists('contact_email', $_POST)) {
    
    date_default_timezone_set('Europe/Amsterdam');

    // smtp connection
    $mail = new PHPMailer;
    $mail->isSMTP();
    $mail->Host = 'mail.provider.nl';
    $mail->SMTPSecure = 'ssl'; // tls, ssl
    $mail->Port = 465;         // tls:587 ssl:465

    // smtp authentication
    $mail->SMTPAuth = true;
    $mail->Username = 'noreply@jouwsite.nl';
    $mail->Password = '******';

    // debug  geen:0  client:1  server/client:2
    $mail->SMTPDebug = 0;

    // FROM: existing mailbox in your domain
    // DO NOT use the submitter's address here
    $mail->setFrom('noreply@jouwsite.nl', 'No Reply');

    // TO: your address
    $mail->addAddress('piet@gmail.com', 'Piet de Groot');

    // optional cc and bcc
    // $mail->addCC('name@example.nl');
    // $mail->addBCC('name@example.nl');
    
    if (array_key_exists('contact_name', $_POST) && array_key_exists('contact_message', $_POST)) {
                
        if ($mail->addReplyTo($_POST['contact_email'], $_POST['contact_name'])) {
            
            $mail->Subject = 'Contact website';

            $message  = '<div>Naam: '    . $_POST['contact_name']    . '</div>';
            $message .= '<div>Email: '   . $_POST['contact_email']   . '</div>';
            $message .= '<div>Bericht: ' . $_POST['contact_message'] . '</div>';

            // html part
            $msg = str_replace(PHP_EOL, '<br>', $message);
            $msg = str_replace('\\', '|', $msg);
            $mai->Body = $msg;

            // text part
            $txt = strip_tags($message);
            $mail->AltBody = $txt;

            // send the message, check for errors
            if (!$mail->send()) {
                // echo 'Sorry, something went wrong. Please try again later.';
                if ($mail->SMTPDebug <> 0) {
                    echo $mail->ErrorInfo;
                }
            } else {
                // echo 'Thanks for contacting us.';
            }
        } else {
            // echo 'Invalid name or email address.';
        }
    } else {
        // echo 'Invalid name or message.';
    }
} else {
    // echo 'Form submitted without email address.';
}
 
Laatst bewerkt:
En vergeet niet de // weg te halen voor de echo's. Anders zal je lege pagina's te zien krijgen. ;)
 
Of van elke echo een $result maken dan kan dit in de html worden gebruikt ;)
PHP: 
// echo 'Thanks for contacting us.';
$result = "Het bericht is met succes verstuurd.";

Ergens verderop in de html
Code: 
<p><?php echo $result ?></p>

@femke98 dit is een basic script zonder validatie, captcha of andere toeters/bellen.
 
Ja, de map /PHPmailer zet ik in de webroot neer.

Als je composer gebruikt, kan je het ook via composer binnenladen.
 
Laatst bewerkt:
gedaan.
Nu zou het moeten gaan?
Ik ga het van de week testen met mijn eigen email.
Ik laat het uiteraard weten en dan eens kijken of we het met google v2 of 3 kunnen recaptchen.
 

Bijlagen

  • Screenshot 2021-08-21 at 17-11-28 vserver91 axc nl DirectAdmin 1 62 5.png
    Screenshot 2021-08-21 at 17-11-28 vserver91 axc nl DirectAdmin 1 62 5.png
    16,1 KB · Weergaven: 24
Ik denk dat het wel zou werken.
Test maar uit.

Ik raad ReCaptcha 3 aan.
Die is minder opdringerig, en geeft een score aan alle berichten die binnenkomen, zodat je zelf kan bepalen bij welke waarde een bericht geweigerd moet worden.
Daarnaast heb je hier ook geen raadsels waarbij je alle brandweerkranen, bussen of verkeerslichten moet aanklikken. Ik heb tot nu toe geen spam meer gekregen, omdat versie 3 enkel aanroepen uitvoert die vanaf jouw domein zijn gemaakt. Bij ReCaptcha 2 kwam er bij mij echt veel spam doorheen omdat jan-en-alleman naar mijn contact.php kon POST'en vanaf andere servers.

Enige puntje is dat je rechtsonder een banner vierkant bannertje van ReCaptcha moet tonen. Maar de gebruiksvoorwaarden van ReCaptcha zou volgens mij ook wel mogen.
 
Laatst bewerkt:
Om te zorgen dat deze regel werkt:
PHP: 
$dir = str_replace('\\', '/', dirname(__FILE__).'/PHPMailer/src');

Hernoem even de mapnaam "PHPMailer-master" naar "PHPMailer".
 
Enige puntje is dat je rechtsonder een banner vierkant bannertje van ReCaptcha moet tonen. Maar de gebruiksvoorwaarden van ReCaptcha zou volgens mij ook wel mogen.
Klik om te vergroten...
Aar, mijn andere websites hebben dit ook.
Vind het mooier dan zo'n vinkje zetten of plaatjes aanvinken. En het werkt ook, want ik krijg echt geen spam.

Moet alleen even kijken hoe dat werkt met die recaptcha, ja een sleutel aanmaken, dat snap ik.
En dan een code erbij zetten.
Ik zag laatst een topic voorbij komen die die code had.
 
ReCaptcha V3 (Invisible) is zoveel beter dan V2.
Op internet is een hoop hierover te vinden aan voorbeelden.

Ik heb het zo gedaan:
vervang wel JOUW_PUBLIC_KEY en JOUW_PRIVATE_KEY door jouw key's.

In de head sectie:
Code: 
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
   function onSubmit(token) {
     document.getElementById("contactform").submit();
   }
</script>

Het formulier (Bootstrap mag je eruit halen):
Code: 
			<form id="contactform" method="post" action="/contact" enctype="multipart/form-data" role="form">
			    <div class="form-group row">
				<label class="col-md-3 col-xl-2 col-form-label" for="name">
				    Naam
				</label>
				<div class="col-md-9 col-xl-10">
				    <input id="name" name="name" type="text" class="form-control" placeholder="Uw naam...">
				</div>
			    </div>
			    <div class="form-group row">
				<label class="col-md-3 col-xl-2 col-form-label" for="email">
				    E-mail adres
				</label>
				<div class="col-md-9 col-xl-10">
				    <input id="email" name="email" type="text" class="form-control" placeholder="Uw e-mail adres">
				</div>
			    </div>
			    <div class="form-group row">
				<label class="col-md-3 col-xl-2 col-form-label" for="email">
				    Onderwerp
				</label>
				<div class="col-md-9 col-xl-10">
				    <input id="subject" name="subject" type="text" class="form-control" placeholder="Uw onderwerp">
				</div>
			    </div> 
			    <div class="form-group row">
				<label class="col-md-3 col-xl-2 col-form-label" for="message">
				    Uw bericht
				</label>
				<div class="col-md-9 col-xl-10">
				    <textarea id="message" name="message" class="form-control" rows="6" placeholder="Uw bericht...."></textarea>
				</div>
			    </div>
			    <div class="clearfix">
				<div class="float-right">
				    <button type="submit" class="btn btn-primary g-recaptcha" data-sitekey="JOUW_PUBLIC_KEY" data-callback='onSubmit' data-action='submit'>Verstuur</button>
				</div>
			    </div>
			</form>

En de afhandeling in simpele vorm:
(Voeg wel zelf goede formuliervalidatie toe)
PHP: 
<?php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
    $response = $_POST["g-recaptcha-response"];
    $url = 'https://www.google.com/recaptcha/api/siteverify';
    $data = array(
	'secret' => 'JOUW_PRIVATE_KEY',
	'response' => $_POST["g-recaptcha-response"]
    );
    $options = array(
	'http' => array(
	    'method' => 'POST',
	    'content' => http_build_query($data)
	)
    );
    $context = stream_context_create($options);
    $verify = file_get_contents($url, false, $context);
    $captcha = json_decode($verify);
    if ($captcha->success == false || $captcha->score <= 0.5) {
	   echo "Sorry! Je bent gedetecteerd als een robot. Stuur maar een mail!";
    } else {
       echo "Je inzending is goedgekeurd";
      // stuur hier een mail
    }
}
?>
 
Laatst bewerkt:
Top!
Heb natuurlijk al wel een contactformulier op de website (zie test.angelavanderploeg.nl)
Dus daar alleen het volgende onder zetten:
HTML: 
<div class="clearfix">
				<div class="float-right">
				    <button type="submit" class="btn btn-primary g-recaptcha" data-sitekey="JOUW_PUBLIC_KEY" data-callback='onSubmit' data-action='submit'>Verstuur</button>
				</div>
			    </div>

Waar zet ik de PHP code? Ook in de root uiteraard.
 
Laatst bewerkt:
Er is geen specifieke plek waar je PHP-scripts moet plaatsen. Het gaat erom dat het pad klopt.

In mijn geval is het /contact maar je kan het ook in contact.php plaatsen.
 
Laatst bewerkt:
En de afhandeling in simpele vorm:
(Voeg wel zelf goede formuliervalidatie toe)
Klik om te vergroten...
sorry voor mijn onkunde in deze, maar de En de afhandeling in simpele vorm:
(Voeg wel zelf goede formuliervalidatie toe) kan ik die in contact.php zetten?
En wat is een goede formuliervalidatie?

een html website (one-page) is toch wat betreft emailen niet echt mijn ding.
Maar dat komt vast omdat ik het niet helemaal snap.
 
Je wilt, neem ik aan, toch controleren of een veld is ingevuld, en of die aan een bepaalde notatie voldoet? Zoals bijvoorbeeld een lengte, postcode of telefoonnummer.
 
Laatst bewerkt:
het leuke vierkantje rechtsonder staat er.
Mail sturen werkt niet.

Heb die php
Code: 
<?php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
    $response = $_POST["g-recaptcha-response"];
    $url = 'https://www.google.com/recaptcha/api/siteverify';
    $data = array(
    'secret' => 'JOUW_PRIVATE_KEY',
    'response' => $_POST["g-recaptcha-response"]
    );
    $options = array(
    'http' => array(
        'method' => 'POST',
        'content' => http_build_query($data)
    )
    );
    $context = stream_context_create($options);
    $verify = file_get_contents($url, false, $context);
    $captcha = json_decode($verify);
    if ($captcha->success == false || $captcha->score <= 0.5) {
       echo "Sorry! Je bent gedetecteerd als een robot. Stuur maar een mail!";
    } else {
       echo "Je inzending is goedgekeurd";
      // stuur hier een mail
    }
}
?>
nog nergens gezet. Kan deze onder deze het script van contact.php:

Code: 
<?php
 
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
 
// bestanden
$dir = str_replace('\\', '/', dirname(__FILE__).'/PHPMailer/src');
require $dir . '/Exception.php';
require $dir . '/PHPMailer.php';
require $dir . '/SMTP.php';
 
if (array_key_exists('contact_email', $_POST)) {
    
    date_default_timezone_set('Europe/Amsterdam');
 
    // smtp connection
    $mail = new PHPMailer;
    $mail->isSMTP();
    $mail->Host = 'mail.xxxxxxx.nl';
    $mail->SMTPSecure = 'ssl'; // tls, ssl
    $mail->Port = 465;         // tls:587 ssl:465
 
    // smtp authentication
    $mail->SMTPAuth = true;
    $mail->Username = 'xxxxxx.nl';
    $mail->Password = xxxxxxx
 
    // debug  geen:0  client:1  server/client:2
    $mail->SMTPDebug = 0;
 
    // FROM: existing mailbox in your domain
    // DO NOT use the submitter's address here
    $mail->setFrom('noreply@example.nl', 'No Reply');
 
    // TO: your address
    $mail->addAddress('info@example.nl', 'Naam Bedrijf');
 
    // optional cc and bcc
    // $mail->addCC('name@example.nl');
    // $mail->addBCC('name@example.nl');
    
    if (array_key_exists('contact_name', $_POST) && array_key_exists('contact_message', $_POST)) {
                
        if ($mail->addReplyTo($_POST['contact_email'], $_POST['contact_name'])) {
            
            $mail->Subject = 'Contact website';
 
            $message  = '<div>Naam: '    . $_POST['contact_name']    . '</div>';
            $message .= '<div>Email: '   . $_POST['contact_email']   . '</div>';
            $message .= '<div>Bericht: ' . $_POST['contact_message'] . '</div>';
 
            // html part
            $msg = str_replace(PHP_EOL, '<br>', $message);
            $msg = str_replace('\\', '|', $msg);
            $mai->Body = $msg;
 
            // text part
            $txt = strip_tags($message);
            $mail->AltBody = $txt;
 
            // send the message, check for errors
            if (!$mail->send()) {
                 echo 'Sorry, er gaat wat mis. Probeer het later nog eens.';
                if ($mail->SMTPDebug <> 0) {
                    echo $mail->ErrorInfo;
                }
            } else {
                 echo 'Bedankt voor uw mail.';
            }
        } else {
             echo 'Ongeldige naam of emailadres.';
        }
    } else {
         echo 'Ongeldige naam of bericht.';
    }
} else {
     echo 'Formulier ingediend zonder e-mailadres.';
}

getest door bovenstaande in contact.php te zetten maar ik krijg geen mail binnen.
En nog geen validatie ;(
 
Laatst bewerkt door een moderator:
Scripts moet je wel begrijpen als je deze wilt combineren.
Lukraak kopiëren en plakken gaat niet altijd lukken. In Bron's voorbeeld zit er al enige validatie in, dus daarop kan je voortborduren als je meerdere velden hebt.

Is een PHP tutorial misschien een idee, Femke?

Als mailen niet lukt, zet dan de debugging aan. Wat gebeurt er nu met Bron's script?
 
Laatst bewerkt:
Het lukt me niet.
De verzendknop doet niets. Dus ik ga eens helemaal overnieuw beginnen.

Daarna heb ik gelezen over via ajax

Code: 
Plak dit tussen je head tags:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#myform").validate({
            debug: false,
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('contact.php', $("#myform").serialize(), function(data) {
                    $('#results').html(data);
                });
            }
        });
    });
    </script>
    <style>
    label.error { width: 250px; display: inline; color: red;}
    </style>

en dit tussen de tags:
HTML: 
En dit tussen je body tags:

<div id="DivContact">
<form method="post" action="" id="myform">
  <br />
  Voornaam *<br />
  <input name="voornaam" type="text" size="40" />
      <br />
      <br />
      Achternaam *<br />
      <input name="achternaam" type="text" size="40" />
      <br />
      <br />
      E-mail adres *<br />
      <input name="email" type="text" size="40" />
      <br />
      <br />
      Bericht *
      <br />
      <textarea cols="40" rows="12" name="bericht"></textarea>
      <br />
      <br />
      <input type="submit" name="versturen" value="Verstuur bericht" />
      <input type="reset" value="Begin opnieuw" />
      <h5>Alle velden gemarkeerd met een * zijn verplicht.</h5>  
</form>
</div>
<!-- We will output the results from process.php here -->
<div id="results"><div>

Dat laatste is dus het contactformulier.

Vraag ik mij af, heb ik dan nog wel het contact.php nodig?

En ja Aar, een cursus zou mooi zijn, maar daar ben ik nu even niet mee geholpen. Ik hoop dat als ik dit eenmaal snap, ik het blijf snappen. Het zal niet vaak voorkomen omdat ik eigenlijk geen one-page websites maak. Maar nu wel voor iemand. Hoewel ik hoop dat hij kiest voor de WP uitvoering. ;)
 
Laatst bewerkt:
AJAX is niet verplicht. Ik gebruik dat ook niet. Het is ook een middel, en geen doel. ;)

De vraag is: Waar loop je op vast?
Wat heb je nu exact aan code?

Als je geen AJAX gebruikt moet je uiteraard wel contact.php gebruiken in je action-attribuut van je form.
Mogelijk was dat het euvel? Want anders roept hij zichzelf aan, maar gebeurt er niks omdat daar geen PHP-script in staat.
ALs je wel AJAX gebruikt, dan is het een kwestie van kijken wat contact.php uitspuugt als antwoord. Dat kan je prima zien in de netwerk-tab van de debugging-tools van je browser.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan