PHP contact formulier zonder pagina refresh

sanderisbestok · 9 feb 2014

Hallo,

Voor mijn eigen website wou ik graag een contactformulier, aangezien ik vrij weinig van PHP wist was het een opgave, gelukkig bestaat hier internet voor. (Ik kan zelf geen paginas PHP schrijven, maar als ik het lees begrijp ik het meeste wel zodat ik het kan aanpassen.) Ik gebruik hiervoor niet de php mail() functie maar die van phpmailer (Meerdere domeinen en was makkelijker dan PHP.ini aanpassen). Het formulier ziet er als volgt uit.

HTML:

<form method="POST" action="email.php">
  						<input name="naam" id="naam" type="text" placeholder="Naam" required /><br />
                        <input name="email" id="email" type="email" placeholder="Email" required />
                        <p>Ik wil graag:</p>
                        <select name="dropdown" id="dropdown" required>
                        	<option class="default" disabled="disabled" value="" default>Selecteer een van de onderstaande opties</option>
                            <option value="een website verzoek">Een website laten maken</option>
                            <option value="een flyer of visitekaartjes ontwerp verzoek">Flyers of visitekaartjes laten ontwerpen</option>
                            <option value="een logo ontwerp verzoek">Een logo laten ontwerpen</option>
                            <option value="een overige ontwerp verzoek">Iets anders laten ontwerpen</option>
                            <option value="een vraag">Wat vragen of meer informatie</option>
                            <option value="iets anders">Iets anders</option>
                      	</select><br />
  						<textarea name="bericht" id="bericht" placeholder="Schrijf hier uw bericht..." required></textarea><br />
 						<input type="submit" value="Verzenden" />
					</form>

En (een deel van) de PHP zo.

PHP:

$mail->WordWrap = 50;
// Email in HTML
$mail->IsHTML(true);
// Onderwerp
$mail->Subject = "Er is&nbsp;". $dropdown. "&nbsp;van&nbsp;". $naam. "&nbsp;ontvangen.";

// HTML selecteren, vervolgens opmaak
$headers = 'MIME-Version: 1.0' . "\r\n"; 
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n"; 
$body = "<html><body><br/>\r\n"
. "Er is&nbsp;". $dropdown. "&nbsp;van&nbsp;". $naam. "&nbsp;ontvangen.". "<br/>\r\n"
. "<br/>\r\n"
. "Naam:&nbsp;". $naam. "<br/>\r\n"
. "Email:&nbsp;". $email. ".<br/>\r\n"
. "<br/>\r\n" 
. "============================================= <br/>\r\n"
. "Het bericht is: <br/>\r\n"
. "<br/>\r\n"
. $bericht
. "<br/>\r\n"
. "<br/>============================================= <br/>\r\n";

// Email in HTML 
$mail->MsgHTML($body);
 
if(!$mail->Send()) { /* PAGINA BIJ EEN ERROR */ }
		else
		{
//Pagina waarnaar toe verzonden wordt als de mail is verstuurd
			header("Location: ".$succespage);
		}
?>

Nu wil ik het liefst dat hij in plaats van naar de $succespage gaat, dat hij op dezelfde pagina blijft en er bijvoorbeeld boven het formulier 'bericht is verzonder' of 'er is iets fout gegaan' komt te staan. En nu kan ik ook daar opzich wel aardig wat informatie over vinden, maar nergens kan ik het echt in combinatie met PHPMailer vinden, en heb ik het gevoel dat ik ongeveer de hele PHP niet meer nodig heb en hij het verzend via jquery/AJAX, maar de SMTP etc staat allemaal in email.php ingesteld.

Oftewel ik snap het laatste stuk afhandeling niet helemaal, kan ik met dit formulier en deze PHP code er voor zorgen dat de pagina niet refreshed na het versturen, waarschijnlijk dus met behulp van jquery en AJAX ofzo? (Uiteraard sta ik voor alles open =D)

Sander Hansen

ginojo · 9 feb 2014

je moet inderdaad een ajax call maken naar email.php. in je post data zet je je de gegevens en andere dingen die normaaal via de post van het form worden verzonden.

wel is dit best lastig als je php nog niet helemaal beheerst, ik adviseer omeerst php onder de knie te krijgen voordat je in javascript en jquery begint.

Hiddehoi · 9 feb 2014

Toevoeging op ginojo:

Inderdaad moet dit met ajax en jquery, een hulpmiddel die ik altijd gebruik is deze: http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59. Lees deze op je gemak een keer door en kom bij problemen hier terug!

sanderisbestok · 11 feb 2014

Echt php onder de knie kijken lukt denk niet door gewoon dingen te proberen, dat is immers ook hoe ik HTML geleerd heb, al is dat heel wat anders. Heb een blok lang PHP gehad op school dus de basis gaat wel, ik denk dat ik het gewoon met de tutorial van Hiddehoi ga proberen, en jullie horen het dan wel!

sanderisbestok · 13 feb 2014

Oke ik heb nu wat geprobeert met de hulp van een tutorial op youtube, de tekst aan het versturen..... blijft staa, de class verdwijnt echter na een paar seconden. Dit is het stukje HTML

HTML:

 <form method="POST" action="email.php" enctype="multipart/form-data">
  						<div id="response"></div>
                        
                        <input name="naam" id="naam" type="text" placeholder="Naam" />
                        <div id="naamdiv"></div><br />
                        <input name="email" id="email" type="email" placeholder="Email" />
                        <div id="emaildiv"></div><br />
                        <p>Ik wil graag:</p>
                        <select name="dropdown" id="dropdown" >
                        	<option class="default" value="" default>Selecteer een van de onderstaande opties</option>
                            <option value="een website verzoek">Een website laten maken</option>
                            <option value="een flyer of visitekaartjes ontwerp verzoek">Flyers of visitekaartjes laten ontwerpen</option>
                            <option value="een logo ontwerp verzoek">Een logo laten ontwerpen</option>
                            <option value="een overige ontwerp verzoek">Iets anders laten ontwerpen</option>
                            <option value="een vraag">Wat vragen of meer informatie</option>
                            <option value="iets anders">Iets anders</option>
                      	</select>
                        <div id="dropdowndiv"></div><br />
  						<textarea name="bericht" id="bericht" placeholder="Schrijf hier uw bericht..." ></textarea>
                        <div id="berichtdiv"></div><br />
 						<input type="submit" id="verzenden" value="Verzenden" />
                        
                        <input type="hidden" name="honeypot" id="honeypot" value="http://" />
                        <input type="hidden" name="humancheck" id="humancheck" class="clear" value="" />
					</form>

Javascript:

Code:

$(document).ready(function() {
	$('#response').hide();
	$('#naamdiv').hide();
	$('#emaildiv').hide();
	$('#dropdowndiv').hide();
	$('#berichtdiv').hide();
	
	$('#verzenden').click(function(e) {

		e.preventDefault();
		
		var check ='';
		var spam = 'Het lijkt erop dat u geen mens bent';
		var naam = $('#naam').val();
		var naamerror = '';
		var email = $('#email').val();
		var emailerror = '';
		var dropdown = $('#dropdown').val();
		var dropdownerror = '';
		var bericht = $('#bericht').val();
		var berichterror = '';
		var honeypot = $('#honeypot').val();
		var humancheck = $('#humancheck').val();
		var humanerror = '';
		
		if (naam == '' || naam.length <= 2) {
			naamerror = '<p>Vult u alstublieft uw naam in.</p>' ;
			check = 'waarde';
		}
		
		if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
			emailerror = '<p>Vult u alstublieft een geldig email adres in.</p>';
			check += 'waarde';
		}
		
		if (dropdown == '') {
			dropdownerror = '<p>Maakt u alstublieft een keuze.</p>';
			check += 'waarde';
		}
		
		if (bericht == '' || bericht.lenght <= 5) {
			berichterror = '<p>Vult u alstublieft een bericht in.</p>' ;
			check += 'waarde';
		}
		
		if (honeypot != 'http://') {
			humanerror = 'waarde';
			check += 'waarde';
		}
		
		if (humancheck != '') {
			humanerror += 'waarde';
			check += 'waarde';
		}
		
		if (naamerror != '') {
			$('#naamdiv').removeClass().addClass('error')
					.html(naamerror).fadeIn('fast');	
		} else {
			$('#naamdiv').hide();
		}
		
		if (emailerror != '') {
			$('#emaildiv').removeClass().addClass('error')
					.html(emailerror).fadeIn('fast');	
		} else {
			$('#emaildiv').hide();
		}

		if (dropdownerror != '') {
			$('#dropdowndiv').removeClass().addClass('error')
					.html(dropdownerror).fadeIn('fast');	
		} else {
			$('#dropdowndiv').hide();
		}

		
		if (berichterror != '') {
			$('#berichtdiv').removeClass().addClass('error')
					.html(berichterror).fadeIn('fast');	
		} else {
			$('#berichtdiv').hide();
		}
		
		if (humanerror != '') {
			$('#response').removeClass().addClass('error')
					.html('<strong>Het lijkt erop dat u geen mens bent.</strong>').fadeIn('fast');			
		}	
		
		if (check != '') {
		}		else { 
			$('#response').removeClass().addClass('versturen').html('aan het versturen...').fadeIn('fast');
				
			var formData = $('form').serialize();
			submitForm(formData);
		}
	
	});
});

function submitForm(formData) {

	$.ajax({
		
			type: 'POST',
			url: 'feedback.php',
			data: formData,
			dataType: 'json',
			cache: false,
			timeout: 7000,
			success: function(data) {
						
						$('#response').removeClass().addClass((data.error === true) ? 'error' : 'success')
													.html(data.msg).fadeIn('fast');
													
						if ($('#response').hasClass('success')) {
							setTimeout("${'#response').fadeOut('fast')", 5000);
						}
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
							
							$('#response').removeClass().addClass('error')
											.html('<p>Er ging wat fout bij het versturen van de mail, u kunt het opnieuw proberen, of een mail sturen naar info@pixelatedcanvas.nl</p> <p>Er was een <strong>' + errorThrown + '</strong> door <strong>' + textStatus + '</strong></p>').fadeIn('fast');	
			},
			complete: function(XMLHttpRequest, status) {
					
				$('form')[0].reset();
			}
			
		
	})

	
};

En feedback.php

PHP:

<?php
	
	sleep(3);
	
	// Nederlandse instructies door Sander Hansen, naar het PHPMAILER pakket van workxware
	// Variablen van HTML omzetten naar PHP
	$naam = trim($_POST['naam']);
	$email = trim($_POST['email']);
	$dropdown = trim($_POST['dropdown']);
	$bericht = trim($_POST['bericht']) ;
	$honeypot = $_POST['honeypot'];
	$humancheck = $_POST['humancheck'];
	$error_message = '';
	$reg_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/ to /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/";
	
	if ($honeypot == 'http://' && empty($humancheck)) {
		
		if(!preg_match($reg_exp, $email)) {
			
			$error_message .= "<p>Een geldig email adress is verplicht.</p>";
		
		}
		
		if (empty($naam)) {
			$error_message .= "<p>Vult u alstublieft uw naam in.</p>";	
		}
		
		if (empty($dropdown)) {
			$error_message .= "<p>Kiest u alstublieft een van de opties.</p>";	
		}
		
		if (empty($bericht)) {
			$error_message .= "<p>Een bericht invullen is verplicht.</p>";	
		}
		
		if (!empty($error_message)) {
			
			$return['error'] = true;
			$return['msg'] = "<p>Het formulier was bijna verstuurd, maar er is toch iets fout gegaan, heeft u gekeken of javascript wel aan staan?</p>".$error_message;
			echo json_encode($retrun);
			exit();
		
		} else {
			
			$return['error'] = false;
			$return['msg'] = "<p>Bedankt voor uw bericht, wij zullen zo snel mogelijk beantwoorden.</p>";
			echo json_encode($return);
				}
	
		
	} else {
	
			$return['error'] = true;
			$return['msg'] = "<p>Het formulier was bijna verstuurd, maar er is toch iets mis gegaan, probeer het opnieuw.</p>";
			echo json_encode($return);
			
			}
	
	




?>

Jullie kunnen het zelf ook onderaan deze pagina testen;
WEBSITE

Hiddehoi · 13 feb 2014

Lijkt me iets in de javascript, werkt mijn tutorial wel?

ginojo · 14 feb 2014

ah, het probleem zit in je php, je ontvangt in json de response, maar dingen als error etc ontbreken.

sanderisbestok · 14 feb 2014

Aaaaah ja hoor ik heb het gevonden, in de php inderdaad @ginojo heb ik simpelweg return een keer verkeerd gespeld!

sanderisbestok · 14 feb 2014

En het formulier verstuurd nu ook met behulp van PHP mailer! Bedankt Jongens!

PHP contact formulier zonder pagina refresh

sanderisbestok

Gebruiker

ginojo

Gebruiker

Hiddehoi

Gebruiker

sanderisbestok

Gebruiker

sanderisbestok

Gebruiker

Hiddehoi

Gebruiker

ginojo

Gebruiker

sanderisbestok

Gebruiker

sanderisbestok

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy