contactformulier

[gast0187]

Hallo,

kan iemand me helpen bij het maken van een contactformulier?
Dit bij klikken op de verzendknop verstuurd worden naar naam@outlook.com

De form moet er zo uitzien:

Bekijk bijlage 190649

Alleen dat er voor voornaam nog 3 radiobuttons moeten komen(zie hieronder)

Maak een keuze:

- keuze 1
- keuze 2
- keuze 3

ook wil ik zoals bij afbeelding waar een sterretje staat bij het niet invullen een foutmelding verschijnt gelieve alle vereiste velden in te vullen.

Dat captcha code wil ik ook.

Ik weet niet goed hoe te doen, kan/wil iemand mij helpen of tips geven?

Alvast op voorhand bedankt.

Mvg gast0187

 

[Dinux]

We kunnen je adviseren in bepaalde keuzes of een oplossing aandragen voor een probleem, maar we gaan niets voor je maken. Mocht je dat willen plaats dan een (betaalde) opdracht. Mocht je het wel zelf willen doen, lees dan eerst een boek / tutorial etc..

Wat je topic betreft:
Je zal een serverside taal moeten gaan gebruiken om de gegevens te verwerken en te valideren. Aangezien je topic onder het forum PHP staat ga ik er vanuit dat je PHP tot je beschikking hebt. Er zijn genoeg scripts/classes die je zo kunt gebruiken voor een contact formulier. Houd er wel rekening mee dat je host de mail() functie moet ondersteunen (te controleren met phpinfo()).

Nog even een algemene opmerking / tip:
Een captcha is lang niet altijd nodig en vergt voor jou en de gebruiker een extra handeling.
Het is namelijk een oplossing voor een probleem dat meestal niet voorkomt (Database / backend throttling). Je gaat vanzelf zien wanneer zo'n oplossing handig is.
Kortom, ga niet zomaar dingen toevoegen omdat andere websites dat ook hebben!
Uiteraard blijft het jou keuze.

 

[ciske de rat]

mooi geformulieerd
er zijn meerdere optie om contact script tot stand te brengen dit door dingen uit de database te haleen onderwerpen product
uit producten kun je naam halene uit de database
simpel is gewoon cotact sricpt te maken en door te laten sturen naar jou
contact script bestaan er zat van op internet alleen is de keuze van een ander anders met passen en meten kom je er wel
tevens kun je de email op stelling versturen er van in tekst of in html php binnen laten komen
kijk gerust eens hier op forum ik weet er staat er eentje op die moet het doen doet het bij mijn ook
alleen deze is niet beveiligt

 

[gast0187]

Ik wil gebruik maken van dat captcha code omdat het veilig moet zijn en geen spam mails in de mailbox zouden komen dus dacht ik captcha daarvoor als oplossing te gebruiken.

Ik heb een tutorial doorgenomen en met wat aanpassingen heb ik ongeveer gevonden wat ik wil alleen nog enkele aanpassingen.

Ook weet ik niet of ik dat mag gebruiken want er staat niets over licensies/betalen.

de link: http://www.vasplus.info/tutorial.ph...ptcha using Ajax, Jquery and PHP#.Ug4jC5KpXSg

het enige wat erbij moet zijn de radiobuttons en de verplichte velden aanpassen ik heb ondertussen de layout en de dingen die ik niet wil al veranderd nu nog aan de verplichte velden sleutelen en die radiobuttons + captcha werkend krijgen.

weet iemand waar ergens ik dit kan aanpassen?

met HTML kan ik zelf wel het formulier maken maar ik vraag me dan af of dit wel veilig genoeg is en of ik daar dan captcha bij kan gebruiken?

een ding is zeker er moet een soort van beveiliging opzitten tegen spamrobots die mails versturen.

Mvg gast0187

 

[Dinux]

Ik wil gebruik maken van dat captcha code omdat het veilig moet zijn en geen spam mails in de mailbox zouden komen dus dacht ik captcha daarvoor als oplossing te gebruiken.

1ste zoekopdracht, 1ste hit. Wikipedia weet alles.

Ik heb een tutorial doorgenomen en met wat aanpassingen heb ik ongeveer gevonden wat ik wil alleen nog enkele aanpassingen.

Ook weet ik niet of ik dat mag gebruiken want er staat niets over licenties/betalen.

Er is geen licentie gespecificeerd dus is het publiek domein. De laatste zin geeft zelfs aan dat je het mag gebruiken (naast de donatie).

een ding is zeker er moet een soort van beveiliging opzitten tegen spamrobots die mails versturen.

Komt die gedachten uit een ervaring? Ik denk het niet, want voor de doorsnee website is dat helemaal niet nodig. Waarom zou een bot eindeloos gegevens blijven invullen zonder zichtbaar resultaat? Misschien ben je in verwarring met bots die zoeken naar vulnerabilities, maar de connectie met spam zie ik dan niet.

 

[ciske de rat]

html zou ik niet gebruiken zou eerder in php doen
aan gezien je de code

<input type="text" id="naam" name="naam" value="' . (isset($_POST['naam']) ? htmlspecialchars($_POST['naam']) : '') . '" /><br />

php gebruikt

tip kijk hier eens naar

<?php
// E-mailadres van de ontvanger
$mail_ontv = 'loketwebsite@gmail.com'; // <<<----- voer jouw e-mailadres hier in!

// Speciale checks voor naam en e-mailadres
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    // naam controle
    if (empty($_POST['naam']))
        $naam_fout = 1;
    // e-mail controle
    if (function_exists('filter_var') && !filter_var($_POST['mail'], FILTER_VALIDATE_EMAIL))
            $email_fout = 1;
    // antiflood controle
    if (!empty($_SESSION['antiflood']))
    {
        $seconde = 20; // 20 seconden voordat dezelfde persoon nog een keer een e-mail mag versturen
        $tijd = time() - $_SESSION['antiflood'];
        if($tijd < $seconde)
            $antiflood = 1;
    }
}

// Kijk of alle velden zijn ingevuld - naam mag alleen uit letters bestaan en het e-mailadres moet juist zijn
if (($_SERVER['REQUEST_METHOD'] == 'POST' && (!empty($antiflood) || empty($_POST['naam']) || !empty($naam_fout) || empty($_POST['mail']) || !empty($email_fout) || empty($_POST['bericht']) || empty($_POST['onderwerp']))) || $_SERVER['REQUEST_METHOD'] == 'GET')
{
    if ($_SERVER['REQUEST_METHOD'] == 'POST')
    {
        if (!empty($naam_fout))
            echo '<p>Uw naam is niet ingevuld.</p>';
        elseif (!empty($email_fout))
            echo '<p>Uw e-mailadres is niet juist.</p>';
        elseif (!empty($antiflood))
            echo '<p>U mag slechts &eacute;&eacute;n bericht per ' . $seconde . ' seconde versturen.</p>';
        else
            echo '<p>U bent uw naam, e-mailadres, onderwerp of bericht vergeten in te vullen.</p>';
    }
        
  // HTML e-mail formlier
  echo '<form method="post" action="' . $_SERVER['REQUEST_URI'] . '" />
  <p>
  
      <label for="naam">Naam:</label><br />
      <input type="text" id="naam" name="naam" value="' . (isset($_POST['naam']) ? htmlspecialchars($_POST['naam']) : '') . '" /><br />
      
      <label for="mail">E-mailadres:</label><br />
      <input type="text" id="mail" name="mail" value="' . (isset($_POST['mail']) ? htmlspecialchars($_POST['mail']) : '') . '" /><br />
      
      <label for="onderwerp">Onderwerp:</label><br />
      <input type="text" id="onderwerp" name="onderwerp" value="' . (isset($_POST['onderwerp']) ? htmlspecialchars($_POST['onderwerp']) : '') . '" /><br />
      
      <label for="bericht">Bericht:</label><br />
      <textarea id="bericht" name="bericht" rows="8" style="width: 400px;">' . (isset($_POST['bericht']) ? htmlspecialchars($_POST['bericht']) : '') . '</textarea><br />
      
      <input type="submit" name="submit" value=" Versturen " />
  </p>
  </form>';
}
// versturen naar
else
{      
  // set datum
  $datum = date('d/m/Y H:i:s');
    
  $inhoud_mail = "===================================================\n";
  $inhoud_mail .= "Ingevulde contact formulier " . $_SERVER['HTTP_HOST'] . "\n";
  $inhoud_mail .= "===================================================\n\n";
  
  $inhoud_mail .= "Naam: " . htmlspecialchars($_POST['naam']) . "\n";
  $inhoud_mail .= "E-mail adres: " . htmlspecialchars($_POST['mail']) . "\n";
  $inhoud_mail .= "Bericht:\n";
  $inhoud_mail .= htmlspecialchars($_POST['bericht']) . "\n\n";
    
  $inhoud_mail .= "Verstuurd op " . $datum . " via het IP adres " . $_SERVER['REMOTE_ADDR'] . "\n\n";
    
  $inhoud_mail .= "===================================================\n\n";
  
 
  
  $headers = 'From: ' . htmlspecialchars($_POST['naam']) . ' <' . $_POST['mail'] . '>';
  
  $headers = stripslashes($headers);
  $headers = str_replace('\n', '', $headers); // Verwijder \n
  $headers = str_replace('\r', '', $headers); // Verwijder \r
  $headers = str_replace("\"", "\\\"", str_replace("\\", "\\\\", $headers)); // Slashes van quotes
  
  $_POST['onderwerp'] = str_replace('\n', '', $_POST['onderwerp']); // Verwijder \n
  $_POST['onderwerp'] = str_replace('\r', '', $_POST['onderwerp']); // Verwijder \r
  $_POST['onderwerp'] = str_replace("\"", "\\\"", str_replace("\\", "\\\\", $_POST['onderwerp'])); // Slashes van quotes
  
  if (mail($mail_ontv, $_POST['onderwerp'], $inhoud_mail, $headers))
  {
      // zorg ervoor dat dezelfde persoon niet kan spammen
      $_SESSION['antiflood'] = time();
      
      echo '<h1>Het contactformulier is verzonden</h1>
      
      <p>Bedankt voor het invullen van het contactformulier. Ik zal zo spoedig mogelijk contact met u opnemen.</p>';
  }
  else
  {
      echo '<h1>Het contactformulier is niet verzonden</h1>
      
      <p><b>Mijn excuses.</b> Het contactformulier kon niet verzonden worden.</p>';
  }
}
?>

hier heb hoop leer stof

 

[gast0187]

Hallo,

ik ben begonnen met het aanpassen van het contactformulier uit de tutorial (zie link die ik plaatste post #4)

Nu zit ik met een heel vreemd probleem als ik niets bij de captcha code invul zegt hij om code in te voeren wat goed is maar als ik de verkeerde code ingeef vraagt hij om een voornaam in te vullen.

ik denk dat het formulier 2x gecontroleerd wordt. (door js en php)

kan me iemand vertellen waarom hij dat doet ?

ik heb bij de ene foutcontrole voornaam1 ipv voornaam gezet en het is die dat hij toont als je een fout captcha ingeeft
terwijl == "" bij mij weten betekent is leeg en het is die tekst dat erbij staat dat er getoond wordt bij foutieve captcha code.

de volledige code:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>vasPLUS Programming Blog - Contact Form with Captcha using Ajax, Jquery and PHP</title>
	<!-- Required header files -->
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="js/jquery_1.5.2.js"></script>
	<script type="text/javascript" src="js/vpb_contact_form.js"></script>
</head>
<body>
		<!-- Code Begins Here -->
		<div class="vasplus_programming_blog_wrapper">			
			<div id="titel">Contact Form</div><br clear="all" />			
			<div id="contactform">			
				<div class="labels">Voornaam (*) :</div>
				<div class="input"><input type="text" id="voornaam" name="v" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Email Address:</div>
				<div class="input"><input type="text" id="email" name="email" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Phone Number:</div>
				<div class="input"><input type="text" id="phone" name="phone" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Email Subject:</div>
				<div class="input"><input type="text" id="subject" name="subject" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Your Message:</div>
				<div class="input">
					<textarea id="message" name="message" style="width:280px; height:80px; padding:10px;" class="vpb_input_fields"></textarea>
				</div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Security Code:</div>
				<div class="input">
					<div class="vpb_captcha_wrappers"><input type="text" id="vpb_captcha_code" name="vpb_captcha_code" style="border-bottom: solid 2px #cbcbcb;" class="vpb_input_fields"></div>
				</div><br clear="all">
				
				<div class="labels">&nbsp;</div>
				<div class="input"><div class="vpb_captcha_wrapper"><img src="vasplusCaptcha.php?rand=<?php echo rand(); ?>" id='captchaimg' ></div><br clear="all">
					<div style=" padding-top:5px;" align="left"><font style="font-family:Verdana, Geneva, sans-serif; font-size:11px;">Can't read the above security code? <a class="ccc" href="javascript:void(0);" onClick="vpb_refresh_aptcha();">Refresh</a></font></div>
				</div>
				
				<br clear="all"><br clear="all">
				
				<div style="width:420px; float:left;" align="left"></div>
				<div style="width:100px; float:left;" align="left">&nbsp;</div>
				<div style="width:300px; float:left;" align="left">
					<span class="vpb_general_button" onclick="vpb_submit_form();">Submit</span>
				</div>
				<br clear="all">
				<div id="response_brought"></div><!-- This will display the response from the server -->			
			</div>		
		</div>
		<!-- Code Ends Here -->		
		<p style="margin-bottom:200px;">&nbsp;</p>
</body>
</html>

vpb_contact_form.php

<?php
/********************************************************************************************************************
* Contact Form with Captcha using Ajax, Jquery and PHP
* This script is brought to you by Vasplus Programming Blog by whom all copyrights are reserved.
* Website: www.vasplus.info
* Email: vasplusblog@gmail.com or info@vasplus.info
* Please, this script must not be sold and do not remove this information from the top of this page.
*********************************************************************************************************************/
session_start();
ob_start();

$to_email = "";
$from_voornaam = "";
$from_email = "";
$phone_number = "";
$email_subject = "";
$email_message = "";
$security_code = "";
$vpb_message_body = "";
$headers = "";

if(isset($_POST["submitted"]) && !empty($_POST["submitted"]) && $_POST["submitted"] == 1)
{
	global $to_email,$from_voornaam,$from_email,$phone_number,$email_subject,$email_message,$security_code,$vpb_message_body,$headers;
	
	//Read POST request params into global vars
	$to_email          = "example@outlook.com"; // Replace this email field with your email address or your company email address
	$from_voornaam     = trim(strip_tags($_POST['voornaam']));
	$from_email        = trim(strip_tags($_POST['email']));
	$phone_number        = trim(strip_tags($_POST['phone']));
	$email_subject     = trim(strip_tags($_POST['subject']));
	$email_message     = trim(strip_tags($_POST['message']));
	$security_code     = trim(strip_tags($_POST['vpb_captcha_code']));
	
	
	$vpb_message_body = nl2br("Dear Admin,\n
	The user whose detail is shown below has sent this message from ".$_SERVER['HTTP_HOST']." dated ".date('d-m-Y').".\n
	
	voornaam: ".$from_voornaam."\n
	Email Address: ".$from_email."\n
	Phone Number: ".$phone_number."\n
	Message: ".$email_message."\n
	
	
	Thank You!\n\n");
	
	//Set up the email headers
    $headers      = "From: $from_voornaam <$from_email>\r\n";
    $headers   .= "Content-type: text/html; charset=iso-8859-1\r\n";
    $headers   .= "Message-ID: <".time().rand(1,1000)."@".$_SERVER['SERVER_NAME'].">". "\r\n";   
	
	//More validation for the input fields
	if($from_voornaam == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your voornaam1 in the required field to proceed. Thanks.</div>';
	}
	else if($from_email == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your email address in the required email field to proceed. Thanks.</div>';
	}
	else if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/", $from_email))
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Sorry, your email address is invalid. Please enter a valid email address to proceed. Thanks.</div>';
	}
	else if($phone_number == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your telephone number in the required field to proceed. Thanks.</div>';
	}
	else if($email_subject == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter the subject of your message in the required field to proceed. Thanks.</div>';
	}
	else if($email_message == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your message in the required message field to proceed. Thanks.</div>';
	}
	else if($security_code == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter the security code in its field to send us your message. Thanks.</div>';
	}
	else if(!isset($_SESSION['vpb_captcha_code']))
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Sorry, no proper session was created for the security code to proceed. Please refresh this page and try again. Thanks.</div>';
	}
	else
	{
		if(empty($_SESSION['vpb_captcha_code']) || strcasecmp($_SESSION['vpb_captcha_code'], $_POST['vpb_captcha_code']) != 0)
		{
			//Note: the captcha code is compared case insensitively. If you want case sensitive match, update the check above to strcmp()
			echo '<br clear="all"><div class="vpb_info" align="left">Sorry, the security code you provided was incorrect, please try again. Thanks.</div>';
		}
		else
		{
			 if(@mail($to_email, $email_subject, $vpb_message_body, $headers))
			 {
				//Displays the success message when email message is sent
				  echo "<br clear='all'><div align='left' class='vpb_success'>Congrats ".$from_voornaam.", your email message has been sent successfully!<br>We will get back to you as soon as possible. Thanks.</div>";
			 } 
			 else 
			 {
				 //Displays an error message when email sending fails
				  echo "<br clear='all'><div align='left' class='vpb_info'>Sorry, your email could not be sent at the moment. <br>Please try again or contact this website admin to report this error message if the problem persist. Thanks.</div>";
			 }
		}
	}
}

?>

vpb_contact_form.js

/********************************************************************************************************************
* Contact Form with Captcha using Ajax, Jquery and PHP
* This script is brought to you by Vasplus Programming Blog by whom all copyrights are reserved.
* Website: www.vasplus.info
* Email: vasplusblog@gmail.com or info@vasplus.info
* Please, this script must not be sold and do not remove this information from the top of this page.
*********************************************************************************************************************/


//This function refreshes the security or captcha code when you click on the refresh link at the form
function vpb_refresh_aptcha()
{
	return document.getElementById("vpb_captcha_code").value="",document.getElementById("vpb_captcha_code").focus(),document.images['captchaimg'].src = document.images['captchaimg'].src.substring(0,document.images['captchaimg'].src.lastIndexOf("?"))+"?rand="+Math.random()*1000;
}

//This is the JS function that sends the mail - It is called when you click on the submit button which is in the form
function vpb_submit_form()
{
	//Variable declaration and assignment
	var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	var voornaam = $("#voornaam").val();
	var email = $("#email").val();
	var phone = $("#phone").val();
	var subject = $("#subject").val();
	var message = $("#message").val();
	var vpb_captcha_code = $("#vpb_captcha_code").val();
	
	if( voornaam == "" ) //Validation against empty field for fullname
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter your voornaam in the required field to proceed. Thanks.</div>');
		$("#voornaam").focus();
	}
	else if( email == "" ) //Validation against empty field for email address
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter your email address in the required email field to proceed. Thanks.</div>');
		$("#email").focus();
	}
	else if(reg.test(email) == false) //Validation for working email address
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Sorry, your email address is invalid. Please enter a valid email address to proceed. Thanks.</div>');
		$("#email").focus();
	}
	else if( phone == "" ) //Validation against empty field for telephone number
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter your telephone number in the required field to proceed. Thanks.</div>');
		$("#phone").focus();
	}
	else if( subject == "" ) //Validation against empty field for email subject
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter the subject of your message in the required field to proceed. Thanks.</div>');
		$("#subject").focus();
	}
	else if( message == "" ) //Validation against empty field for email message
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter your message in the required message field to proceed. Thanks.</div>');
		$("#message").focus();
	}
	else if( vpb_captcha_code == "" ) //Validation against empty field for security captcha code
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter the security code in its field to send us your message. Thanks.</div>');
		$("#vpb_captcha_code").focus();
	}
	else
	{
		var dataString = 'Voornaam=' + voornaam + '&email=' + email + '&phone=' + phone + '&subject=' + subject + '&message=' + message + '&vpb_captcha_code=' + vpb_captcha_code + '&submitted=1';
		$.ajax({  
			type: "POST",  
			url: "vpb_contact_form.php",  
			data: dataString,
			beforeSend: function() 
			{
				//Show loading image
				$("#response_brought").html('<br clear="all"><div align="left" style=" padding-top:6px; margin-left:100px; margin-top:15px;"><font style="font-family:Verdana, Geneva, sans-serif; font-size:12px; color:black;">Please wait</font> <img src="images/loading.gif" alt="Loading...." align="absmiddle" title="Loading...."/></div>');
				
			},  
			success: function(response)
			{
				//Check to see if the message is sent or not
				var response_brought = response.indexOf('Congrats');
				if( response_brought != -1 )
				{
					//Clear all form fields on success
					$("#voornaam").val('');
					$("#email").val('');
					$("#phone").val('');
					$("#subject").val('');
					$("#message").val('');
					$("#vpb_captcha_code").val('');
					
					//Display success message if the message is sent
					$("#response_brought").html(response);
					
					//Remove the success message also after a while of displaying the message to the user
					setTimeout(function() {
						$("#response_brought").html('');
					},10000);
				}  
				else  
				{
					//Display error message is the message is not sent
					 $("#response_brought").html(response);
				}
			}
		});
	}
}

style.css

/********************************************************************************************************************
* Contact Form with Captcha using Ajax, Jquery and PHP
* This script is brought to you by Vasplus Programming Blog by whom all copyrights are reserved.
* Website: www.vasplus.info
* Email: vasplusblog@gmail.com or info@vasplus.info
* Please, this script must not be sold and do not remove this information from the top of this page.
*********************************************************************************************************************/

/*Main Form Wrapper*/
.vasplus_programming_blog_wrapper 
{
	width:470px;
	margin: 0 auto;
	border: solid 1px #cbcbcb;
	 background-color: #FFF;
	 box-shadow: 0 2px 20px #cbcbcb;
	-moz-box-shadow: 0 2px 20px #cbcbcb;
	-webkit-box-shadow: 0 2px 20px #cbcbcb;
	-webkit-border-radius: 15px 15px; 15px 15px;-moz-border-radius: 15px 15px; 15px 15px;border-radius: 15px 15px; 15px 15px;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	padding-top:12px;
	padding-bottom:12px;
}

#titel{
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	padding-left:10px;
	font-weight: bold;
	text-align: center;
}

#contactform{
	width:430px; 
	font-family:Verdana, Geneva, sans-serif; 
	font-size:12px;
	padding:10px;
}

.labels{
	width:100px;
	padding-top:10px;
	float:left;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
}

.input{
	width:300px; 
	float:left;
}

/*Input and Textare Field Style*/
.vpb_input_fields {
	width:280px;box-shadow: 0 0 6px #666666;-moz-box-shadow: 0 0 6px #666666;-webkit-box-shadow: 0 0 6px #666666;font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight:normal;height:25px; padding:3px;padding-left:10px;padding-right:10px; padding-top:2px;border: 0px solid  #F1F1F1;outline:none;border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius:2px;
}	
.vpb_input_fields:focus { 
 outline:none;border: 0px solid #4195fc;box-shadow: 0 0 12px #66F;-moz-box-shadow: 0 0 12px #66F;-webkit-box-shadow: 0 0 12px #66F;
}

/*Captcha Box wrapper*/
.vpb_captcha_wrapper 
{
	width:280px;
	height:auto;
	padding:10px; 
	border: solid 1px #cbcbcb;
	 background-color: #FFF;
	 box-shadow: 0 0 20px #cbcbcb;
	-moz-box-shadow: 0 0 20px #cbcbcb;
	-webkit-box-shadow: 0 0 20px #cbcbcb;
	border-top: solid 0px #cbcbcb;
	text-align:center;
	position:relative;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	float:left;
}


/*Success Message Style*/
.vpb_success {width:390px;font-family:Verdana, Geneva, sans-serif; font-size:11px; padding:10px; background:#FFFFB7; border:1px solid #F1F1F1;box-shadow: 0 0 20px #cbcbcb;-moz-box-shadow: 0 0 20px #cbcbcb;-webkit-box-shadow: 0 0 20px #cbcbcb;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; line-height:20px;}


/*Error Messages Style*/
.vpb_info {  text-align:left;border: 1px solid #999; padding:8px 10px 8px 10px; font: bold 12px verdana;-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888;box-shadow: 0 0 5px #888;text-shadow: 2px 2px 2px #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;font-family:Verdana, Geneva, sans-serif; font-size:11px; line-height:20px;font-weight:normal;color: black;background: #BDE5F8; }

.ccc{ text-decoration:none; color:blue;}
.ccc:hover{ text-decoration:underline;}

/*Vasplus Button*/
.vpb_general_button 
{
 background-color: #7fbf4d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: linear-gradient(top, #7fbf4d, #63a62f);
  border: 2px solid #63a62f;box-shadow: 0 2px 3px #666666;-moz-box-shadow: 0 2px 3px #666666;-webkit-box-shadow: 0 2px 3px #666666;
  -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
  color: #fff;
  font-family:Verdana, Geneva, sans-serif;
  font-size:14px;
  text-align: center;
  text-shadow: 0 -1px 0 #4c9021;
  width: auto;
  padding:9px;
  padding-left:13px; padding-right:13px;padding-bottom:7px;
  text-decoration:none;
  float:left;
  margin-right:20px;
}
.vpb_general_button:hover 
{
    background-color: #76b347;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e));
    background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
    background-image: linear-gradient(top, #76b347, #5e9e2e);
    box-shadow: 0 2px 3px #666666;
	-moz-box-shadow: 0 2px 3px #666666;
	-webkit-box-shadow: 0 2px 3px #666666;
	-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
    cursor: pointer; 
}



.back_to_tutorial {
	
background-color: #ee432e;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100));
  background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  border: 1px solid #951100;box-shadow: 0 2px 3px #951100;-moz-box-shadow: 0 2px 3px #951100;-webkit-box-shadow: 0 2px 3px #951100;
  -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  color: #fff;
  font: bold 15px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 12px 0 14px 0;
  text-align: center;
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
  width: 200px; }
.back_to_tutorial:hover 
{
    background-color: #f37873;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601));
    background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    cursor: pointer; }
.back_to_tutorial:active 
{
    background-color: #d43c28;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d43c28), color-stop(50%, #ad3224), color-stop(50%, #9c1500), color-stop(100%, #700d00));
    background-image: -webkit-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -ms-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
    box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); 
}

Ik had het proberen aanpassen eerst juist voor voornaam maar werkt niet, ik vind het vreemd.

Mijn online testpagina: http://contactform.uphero.com/

Bedankt voor de tips.

Mvg gast0187

 

[phobia]

het voordeel dat javascript een eerste controle doet van de ingegevens data is alleen maar 'beter'.
het scheelt weer een page-request op de server.
Maar op de server moet je dan nog wel altijd de data controleren en wassen voor gebruik!

 

[gast0187]

Bedankt voor de informatie

ik heb net de captcha code werkend gekregen maar nu heb ik een nog een extra regel erbij gedaan met naam hij geeft foutmelding als je geen naam geeft, maar als je een verkeerd of juist captcha code geeft krijg ik terug de foutmelding om mijn naam in te vullen.

Kan iemand mij dat probleem verklaren het is nu de 2e keer op rij dat ik op het zelfde probleem bots.

mijn online testpagina: http://contactform.uphero.com/

Als ik lokaal test krijg ik deze foutmelding:

Bekijk bijlage 190801

en hier is de code van C:\wamp\www\contactform\vpb_contact_form.php on line 30

<?php
/********************************************************************************************************************
* Contact Form with Captcha using Ajax, Jquery and PHP
* This script is brought to you by Vasplus Programming Blog by whom all copyrights are reserved.
* Website: www.vasplus.info
* Email: vasplusblog@gmail.com or info@vasplus.info
* Please, this script must not be sold and do not remove this information from the top of this page.
*********************************************************************************************************************/
session_start();
ob_start();

$to_email = "";
$from_voornaam = "";
$from_naam = "";
$from_email = "";
$phone_number = "";
$email_subject = "";
$email_message = "";
$security_code = "";
$vpb_message_body = "";
$headers = "";

if(isset($_POST["submitted"]) && !empty($_POST["submitted"]) && $_POST["submitted"] == 1)
{
	global $to_email,$from_voornaam,$from_naam,$from_email,$phone_number,$email_subject,$email_message,$security_code,$vpb_message_body,$headers;
	
	//Read POST request params into global vars
	$to_email          = "example@outlook.com"; // Replace this email field with your email address or your company email address
	$from_voornaam     = trim(strip_tags($_POST['voornaam']));
	$from_naam         = trim(strip_tags($_POST['naam']));
	$from_email        = trim(strip_tags($_POST['email']));
	$phone_number      = trim(strip_tags($_POST['phone']));
	$email_subject     = trim(strip_tags($_POST['subject']));
	$email_message     = trim(strip_tags($_POST['message']));
	$security_code     = trim(strip_tags($_POST['vpb_captcha_code']));
	
	
	$vpb_message_body = nl2br("Dear Admin,\n
	The user whose detail is shown below has sent this message from ".$_SERVER['HTTP_HOST']." dated ".date('d-m-Y').".\n
	
	Voornaam: ".$from_voornaam."\n
	Naam: ".$from_naam."\n
	Email Address: ".$from_email."\n
	Phone Number: ".$phone_number."\n
	Message: ".$email_message."\n
	
	
	Thank You!\n\n");
	
	//Set up the email headers
    $headers      = "From: $from_voornaam <$from_email>\r\n";
    $headers   .= "Content-type: text/html; charset=iso-8859-1\r\n";
    $headers   .= "Message-ID: <".time().rand(1,1000)."@".$_SERVER['SERVER_NAME'].">". "\r\n";   
	
	//More validation for the input fields
	if($from_voornaam == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your first name in the required field to proceed. Thanks.</div>';
	}
	else if($from_naam == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your name in the required email field to proceed. Thanks.</div>';
	}
	else if($from_email == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your email address in the required email field to proceed. Thanks.</div>';
	}
	else if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/", $from_email))
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Sorry, your email address is invalid. Please enter a valid email address to proceed. Thanks.</div>';
	}
	else if($phone_number == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your telephone number in the required field to proceed. Thanks.</div>';
	}
	else if($email_subject == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter the subject of your message in the required field to proceed. Thanks.</div>';
	}
	else if($email_message == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your message in the required message field to proceed. Thanks.</div>';
	}
	else if($security_code == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter the security code in its field to send us your message. Thanks.</div>';
	}
	else if(!isset($_SESSION['vpb_captcha_code']))
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Sorry, no proper session was created for the security code to proceed. Please refresh this page and try again. Thanks.</div>';
	}
	else
	{
		if(empty($_SESSION['vpb_captcha_code']) || strcasecmp($_SESSION['vpb_captcha_code'], $_POST['vpb_captcha_code']) != 0)
		{
			//Note: the captcha code is compared case insensitively. If you want case sensitive match, update the check above to strcmp()
			echo '<br clear="all"><div class="vpb_info" align="left">Sorry, the security code you provided was incorrect, please try again. Thanks.</div>';
		}
		else
		{
			 if(@mail($to_email, $email_subject, $vpb_message_body, $headers))
			 {
				//Displays the success message when email message is sent
				  echo "<br clear='all'><div align='left' class='vpb_success'>Congrats ".$from_voornaam.", your email message has been sent successfully!<br>We will get back to you as soon as possible. Thanks.</div>";
			 } 
			 else 
			 {
				 //Displays an error message when email sending fails
				  echo "<br clear='all'><div align='left' class='vpb_info'>Sorry, your email could not be sent at the moment. <br>Please try again or contact this website admin to report this error message if the problem persist. Thanks.</div>";
			 }
		}
	}
}

?>

alvast op voorhand bedankt

Mvg gast0187

 

[phobia]

je zult geen input field hebben met de name="naam"
in je html form, want hij komt niet voor in je $_POST array

 

[gast0187]

Inderdaad ik had dat veld nog niet, net aangepast.

maar ik krijg nog steeds de error nochtans is de naam hetzelfde als de class/name in het form

dit is de post array:

<?php
/********************************************************************************************************************
* Contact Form with Captcha using Ajax, Jquery and PHP
* This script is brought to you by Vasplus Programming Blog by whom all copyrights are reserved.
* Website: www.vasplus.info
* Email: vasplusblog@gmail.com or info@vasplus.info
* Please, this script must not be sold and do not remove this information from the top of this page.
*********************************************************************************************************************/
session_start();
ob_start();

$to_email = "";
$from_voornaam = "";
$from_naam = "";
$from_email = "";
$phone_number = "";
$email_subject = "";
$email_message = "";
$security_code = "";
$vpb_message_body = "";
$headers = "";

if(isset($_POST["submitted"]) && !empty($_POST["submitted"]) && $_POST["submitted"] == 1) 
{
	global $to_email,$from_voornaam,$from_naam,$from_email,$phone_number,$email_subject,$email_message,$security_code,$vpb_message_body,$headers;
	
	//Read POST request params into global vars
	$to_email          = "example@outlook.com"; // Replace this email field with your email address or your company email address
	$from_voornaam     = trim(strip_tags($_POST['voornaam']));
	$from_naam         = trim(strip_tags($_POST['naam']));
	$from_email        = trim(strip_tags($_POST['email']));
	$phone_number      = trim(strip_tags($_POST['phone']));
	$email_subject     = trim(strip_tags($_POST['subject']));
	$email_message     = trim(strip_tags($_POST['message']));
	$security_code     = trim(strip_tags($_POST['vpb_captcha_code']));
	
	$vpb_message_body = nl2br("Dear Admin,\n
	The user whose detail is shown below has sent this message from ".$_SERVER['HTTP_HOST']." dated ".date('d-m-Y').".\n
	
	Voornaam: ".$from_voornaam."\n
	Naam: ".$from_naam."\n
	Email Address: ".$from_email."\n
	Phone Number: ".$phone_number."\n
	Message: ".$email_message."\n
	
	
	Thank You!\n\n");
	
	//Set up the email headers
    $headers      = "From: $from_voornaam <$from_email>\r\n";
    $headers   .= "Content-type: text/html; charset=iso-8859-1\r\n";
    $headers   .= "Message-ID: <".time().rand(1,1000)."@".$_SERVER['SERVER_NAME'].">". "\r\n";   
	
	//More validation for the input fields
	if($from_voornaam == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your first name in the required field to proceed. Thanks.</div>';
	}
	else if($from_naam == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your name in the required email field to proceed. Thanks.</div>';
	}
	else if($from_email == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your email address in the required email field to proceed. Thanks.</div>';
	}
	else if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/", $from_email))
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Sorry, your email address is invalid. Please enter a valid email address to proceed. Thanks.</div>';
	}
	else if($phone_number == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your telephone number in the required field to proceed. Thanks.</div>';
	}
	else if($email_subject == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter the subject of your message in the required field to proceed. Thanks.</div>';
	}
	else if($email_message == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter your message in the required message field to proceed. Thanks.</div>';
	}
	else if($security_code == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter the security code in its field to send us your message. Thanks.</div>';
	}
	else if(!isset($_SESSION['vpb_captcha_code']))
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Sorry, no proper session was created for the security code to proceed. Please refresh this page and try again. Thanks.</div>';
	}
	else
	{
		if(empty($_SESSION['vpb_captcha_code']) || strcasecmp($_SESSION['vpb_captcha_code'], $_POST['vpb_captcha_code']) != 0)
		{
			//Note: the captcha code is compared case insensitively. If you want case sensitive match, update the check above to strcmp()
			echo '<br clear="all"><div class="vpb_info" align="left">Sorry, the security code you provided was incorrect, please try again. Thanks.</div>';
		}
		else
		{
			 if(@mail($to_email, $email_subject, $vpb_message_body, $headers))
			 {
				//Displays the success message when email message is sent
				  echo "<br clear='all'><div align='left' class='vpb_success'>Congrats ".$from_voornaam.", your email message has been sent successfully!<br>We will get back to you as soon as possible. Thanks.</div>";
			 } 
			 else 
			 {
				 //Displays an error message when email sending fails
				  echo "<br clear='all'><div align='left' class='vpb_info'>Sorry, your email could not be sent at the moment. <br>Please try again or contact this website admin to report this error message if the problem persist. Thanks.</div>";
			 }
		}
	}
}

?>

de form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>vasPLUS Programming Blog - Contact Form with Captcha using Ajax, Jquery and PHP</title>
	<!-- Required header files -->
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="js/jquery_1.5.2.js"></script>
	<script type="text/javascript" src="js/vpb_contact_form.js"></script>
</head>
<body>
		<!-- Code Begins Here -->
		<div class="vasplus_programming_blog_wrapper">			
			<div id="titel">Contact Form</div><br clear="all" />			
			<div id="contactform">			
				<div class="labels">Voornaam (*) :</div>
				<div class="input"><input type="text" id="voornaam" name="voornaam" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Naam (*) :</div>
				<div class="input"><input type="text" id="naam" name="naam" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Email Address:</div>
				<div class="input"><input type="text" id="email" name="email" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Phone Number:</div>
				<div class="input"><input type="text" id="phone" name="phone" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Email Subject:</div>
				<div class="input"><input type="text" id="subject" name="subject" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Your Message:</div>
				<div class="input">
					<textarea id="message" name="message" style="width:280px; height:80px; padding:10px;" class="vpb_input_fields"></textarea>
				</div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Security Code:</div>
				<div class="input">
					<div class="vpb_captcha_wrappers"><input type="text" id="vpb_captcha_code" name="vpb_captcha_code" style="border-bottom: solid 2px #cbcbcb;" class="vpb_input_fields"></div>
				</div><br clear="all">
				
				<div class="labels">&nbsp;</div>
				<div class="input"><div class="vpb_captcha_wrapper"><img src="vasplusCaptcha.php?rand=<?php echo rand(); ?>" id='captchaimg' ></div><br clear="all">
					<div style=" padding-top:5px;" align="left"><font style="font-family:Verdana, Geneva, sans-serif; font-size:11px;">Can't read the above security code? <a class="ccc" href="javascript:void(0);" onClick="vpb_refresh_aptcha();">Refresh</a></font></div>
				</div>
				
				<br clear="all"><br clear="all">
				
				<div style="width:420px; float:left;" align="left"></div>
				<div style="width:100px; float:left;" align="left">&nbsp;</div>
				<div style="width:300px; float:left;" align="left">
					<span class="vpb_general_button" onclick="vpb_submit_form();">Submit</span>
				</div>
				<br clear="all">
				<div id="response_brought"></div><!-- This will display the response from the server -->			
			</div>		
		</div>
		<!-- Code Ends Here -->		
		<p style="margin-bottom:200px;">&nbsp;</p>
</body>
</html>

als ik de id en name in de form bij naam aanpas naar voornaam werkt het wel, nochtans denk ik dat dat niet de bedoeling is dat het met class/name: naam ook moet werken.

Ik heb echt geen typfout gemaakt en toch doet hij het niet.

Weet iemand hier een oplossing voor?

Of kan het kwaad als ik overal bij id/name voornaam zet? (of wordt formulier dan minder goed gecontroleerd?)

Ik vind het vreemd dat het script hierop lastig doet terwijl de naamgeving hetzelfde is.

Ik hoop dat dit maar geen struikelblok zal zijn om mijn formulier werkend te krijgen.

 

[phobia]

kijk eens even in je js file, ik gok dat je daar de data uit je inputfield "naam" niet verwerkt om mee te sturen via je ajax-call

 

[gast0187]

Dit is de js file:

/********************************************************************************************************************
* Contact Form with Captcha using Ajax, Jquery and PHP
* This script is brought to you by Vasplus Programming Blog by whom all copyrights are reserved.
* Website: www.vasplus.info
* Email: vasplusblog@gmail.com or info@vasplus.info
* Please, this script must not be sold and do not remove this information from the top of this page.
*********************************************************************************************************************/


//This function refreshes the security or captcha code when you click on the refresh link at the form
function vpb_refresh_aptcha()
{
	return document.getElementById("vpb_captcha_code").value="",document.getElementById("vpb_captcha_code").focus(),document.images['captchaimg'].src = document.images['captchaimg'].src.substring(0,document.images['captchaimg'].src.lastIndexOf("?"))+"?rand="+Math.random()*1000;
}
//This is the JS function that sends the mail - It is called when you click on the submit button which is in the form
function vpb_submit_form()
{
	//Variable declaration and assignment
	var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	var voornaam = $("#voornaam").val();
	var naam = $("#naam").val();
	var email = $("#email").val();
	var phone = $("#phone").val();
	var subject = $("#subject").val();
	var message = $("#message").val();
	var vpb_captcha_code = $("#vpb_captcha_code").val();
	
	if( voornaam == "" ) //Validation against empty field for voornaam
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter your first name in the required field to proceed. Thanks.</div>');
		$("#voornaam").focus();
	}
	else if( naam == "" ) //Validation against empty field for naam
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter your name in the required name field to proceed. Thanks.</div>');
		$("#naam").focus();
	}
	else if( email == "" ) //Validation against empty field for email address
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter your email address in the required email field to proceed. Thanks.</div>');
		$("#email").focus();
	}
	else if(reg.test(email) == false) //Validation for working email address
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Sorry, your email address is invalid. Please enter a valid email address to proceed. Thanks.</div>');
		$("#email").focus();
	}
	else if( phone == "" ) //Validation against empty field for telephone number
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter your telephone number in the required field to proceed. Thanks.</div>');
		$("#phone").focus();
	}
	else if( subject == "" ) //Validation against empty field for email subject
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter the subject of your message in the required field to proceed. Thanks.</div>');
		$("#subject").focus();
	}
	else if( message == "" ) //Validation against empty field for email message
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter your message in the required message field to proceed. Thanks.</div>');
		$("#message").focus();
	}
	else if( vpb_captcha_code == "" ) //Validation against empty field for security captcha code
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter the security code in its field to send us your message. Thanks.</div>');
		$("#vpb_captcha_code").focus();
	}
	else
	{
		var dataString = 'voornaam=' + voornaam + '&naam' + naam + '&email=' + email + '&phone=' + phone + '&subject=' + subject + '&message=' + message + '&vpb_captcha_code=' + vpb_captcha_code + '&submitted=1';
		$.ajax({  
			type: "POST",  
			url: "vpb_contact_form.php",  
			data: dataString,
			beforeSend: function() 
			{
				//Show loading image
				$("#response_brought").html('<br clear="all"><div align="left" style=" padding-top:6px; margin-left:100px; margin-top:15px;"><font style="font-family:Verdana, Geneva, sans-serif; font-size:12px; color:black;">Please wait</font> <img src="images/loading.gif" alt="Loading...." align="absmiddle" title="Loading...."/></div>');
				
			},  
			success: function(response)
			{
				//Check to see if the message is sent or not
				var response_brought = response.indexOf('Congrats');
				if( response_brought != -1 )
				{
					//Clear all form fields on success
					$("#voornaam").val('');
					$("#naam").val('');
					$("#email").val('');
					$("#phone").val('');
					$("#subject").val('');
					$("#message").val('');
					$("#vpb_captcha_code").val('');
					
					//Display success message if the message is sent
					$("#response_brought").html(response);
					
					//Remove the success message also after a while of displaying the message to the user
					setTimeout(function() {
						$("#response_brought").html('');
					},10000);
				}  
				else  
				{
					//Display error message is the message is not sent
					 $("#response_brought").html(response);
				}
			}
		});
	}
}

Alvast op voorhand bedankt.

 

[phobia]

Dit is regel 70:
var dataString = 'voornaam=' + voornaam + '&naam' + naam + '&email=' +
Je mist een = teken achter de eerste naam!

 

[gast0187]

Ik heb dit net even aangepast de nieuwe testversie online gezet en dit werkte

Bedankt voor de informatie,

voorlopig zal ik voort kunnen, Als ik nog een ander probleem tegenkom zal ik het posten.

Mvg gast0187

 

[phobia]

het zijn altijd een klein dingetje.
gewoon een kwestie van stappen terug lopen en kijken.
PHP vertelde al dat hij de $_POST["naam"] niet vond in de $_POST array.
Dus is het een of de naam van de input is anders of zoals bij jou wordt de data via ajax verzonden zit er daar een fout.

Gewoon logisch de stappen van je script volgen.

Succes met de rest

 

[gast0187]

Hallo,

Dit is het laatste wat nog moet wat me niet lukt dus dit is ook mijn laatste vraag dat ik stel,

nu heb ik ook bovenaan 3 radiobuttons maar hoe moet hiervoor de controle of je een gekozen hebt of niet, en om dan de tekst (naast de radiobutton) ook in de mail te plaatsen.

Ik heb dit geprobeerd maar helaas zonder succes

Mijn volledige code:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>vasPLUS Programming Blog - Contact Form with Captcha using Ajax, Jquery and PHP</title>
	<!-- Required header files -->
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="js/jquery_1.5.2.js"></script>
	<script type="text/javascript" src="js/vpb_contact_form.js"></script>
</head>
<body>
		<!-- Code Begins Here -->
		<div class="vasplus_programming_blog_wrapper">			
			<div id="titel">Contact Form</div><br clear="all" />			
			<div id="contactform">
				
				<div class="labels">Maak een keuze (*) :</div>
				<div class="input">
					<div class="rb"><input type="radio" name="keuze" value="Graag een afhaling">Graag een afhaling</div><br clear="all">
					<div class="rb"><input type="radio" name="keuze" value="Graag meer informatie over labo">Graag meer informatie over labo</div><br clear="all">
					<div class="rb"><input type="radio" name="keuze" value="Graag meer informatie over nieuwe producten">Graag meer informatie over nieuwe producten</div>
				</div>
				<br clear="all"><br clear="all">
							
				<div class="labels">Voornaam (*) :</div>
				<div class="input"><input type="text" id="voornaam" name="voornaam" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Naam (*) :</div>
				<div class="input"><input type="text" id="naam" name="naam" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Telefoon :</div>
				<div class="input"><input type="text" id="phone" name="phone" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Email (*) :</div>
				<div class="input"><input type="text" id="email" name="email" value="" class="vpb_input_fields"></div>
				<br clear="all"><br clear="all">								
				
				<div class="labels">Opmerkingen :</div>
				<div class="input">
					<textarea id="opmerkingen" name="opmerkingen" style="width:291px; height:80px; padding:10px;" class="vpb_input_fields"></textarea>
				</div>
				<br clear="all"><br clear="all">
				
				<div class="labels">Beveiligingscode (*) :</div>
				<div class="input">
					<div class="vpb_captcha_wrappers"><input type="text" id="vpb_captcha_code" name="vpb_captcha_code" style="border-bottom: solid 2px #cbcbcb;" class="vpb_input_fields"></div>
				</div><br clear="all">
				
				<div class="labels">&nbsp;</div>
				<div class="input"><div class="vpb_captcha_wrapper"><img src="vasplusCaptcha.php?rand=<?php echo rand(); ?>" id='captchaimg' ></div><br clear="all">
					<div style=" padding-top:5px;" align="left"><font style="font-family:Verdana, Geneva, sans-serif; font-size:11px;">Can't read the above security code? <a class="ccc" href="javascript:void(0);" onClick="vpb_refresh_aptcha();">Refresh</a></font></div>
				</div>
				
				<br clear="all"><br clear="all">
				
				<div style="width:420px; float:left;" align="left"></div>
				<div class="labels">Verzenden :</div>
				<div style="width:300px; float:left;" align="left">
					<span class="vpb_general_button" onclick="vpb_submit_form();">Verzenden</span>
				</div>
				<br clear="all">
				<div id="response_brought"></div><!-- This will display the response from the server -->			
			</div>		
		</div>
		<!-- Code Ends Here -->		
		<p style="margin-bottom:200px;">&nbsp;</p>
</body>
</html>

vpb_contact_form.php

<?php
/********************************************************************************************************************
* Contact Form with Captcha using Ajax, Jquery and PHP
* This script is brought to you by Vasplus Programming Blog by whom all copyrights are reserved.
* Website: www.vasplus.info
* Email: vasplusblog@gmail.com or info@vasplus.info
* Please, this script must not be sold and do not remove this information from the top of this page.
*********************************************************************************************************************/
session_start();
ob_start();

$to_email = "";
$keuze = "";
$from_voornaam = "";
$from_naam = "";
$phone_number = "";
$from_email = "";
$opmerkingen = "";
$security_code = "";
$vpb_message_body = "";
$headers = "";

if(isset($_POST["submitted"]) && !empty($_POST["submitted"]) && $_POST["submitted"] == 1) 
{
	global $to_email,$keuze,$from_voornaam,$from_naam,$phone_number,$from_email,$opmerkingen,$security_code,$vpb_message_body,$headers;
	
	//Read POST request params into global vars
	$to_email          = "example@outlook.com"; // Replace this email field with your email address or your company email address
	$keuze     		   = trim(strip_tags($_POST['keuze']));
	$from_voornaam     = trim(strip_tags($_POST['voornaam']));
	$from_naam         = trim(strip_tags($_POST['naam']));
	$phone_number      = trim(strip_tags($_POST['phone']));
	$from_email        = trim(strip_tags($_POST['email']));
	$opmerkingen       = trim(strip_tags($_POST['opmerkingen']));
	$security_code     = trim(strip_tags($_POST['vpb_captcha_code']));
	
	$vpb_message_body = nl2br("Dear Admin,\n
	The user whose detail is shown below has sent this message from ".$_SERVER['HTTP_HOST']." dated ".date('d-m-Y').".\n
	
	Keuze: ".$keuze."\n
	Voornaam: ".$from_voornaam."\n
	Naam: ".$from_naam."\n
	Telefoon: ".$phone_number."\n
	Email Address: ".$from_email."\n
	Opmerkingen: ".$opmerkingen."\n
		
	Thank You!\n\n");
	
	//Set up the email headers
    $headers      = "From: $from_voornaam <$from_email>\r\n";
    $headers   .= "Content-type: text/html; charset=iso-8859-1\r\n";
    $headers   .= "Message-ID: <".time().rand(1,1000)."@".$_SERVER['SERVER_NAME'].">". "\r\n";   
	
	//More validation for the input fields
	if( $keuze == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Maak een keuze om verder te gaan. Dank u.</div>';
	}
	else if($from_voornaam == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Voer uw voornaam in het gewenste veld om verder te gaan. Dank u.</div>';
	}
	else if($from_naam == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Voer uw naam in het gewenste veld om verder te gaan. Dank u.</div>';
	}
	else if($from_email == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Voer uw emailadres in het gewenste veld om verder te gaan. Dank u.</div>';
	}
	else if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/", $from_email))
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Sorry, Uw e-mailadres is ongeldig. Voer een geldig emailadres in het gewenste veld om verder te gaan. Dank u.</div>';
	}
	else if($security_code == "")
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Please enter the security code in its field to send us your message. Thanks.</div>';
	}
	else if(!isset($_SESSION['vpb_captcha_code']))
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Sorry, no proper session was created for the security code to proceed. Please refresh this page and try again. Thanks.</div>';
	}
	else
	{
		if(empty($_SESSION['vpb_captcha_code']) || strcasecmp($_SESSION['vpb_captcha_code'], $_POST['vpb_captcha_code']) != 0)
		{
			//Note: the captcha code is compared case insensitively. If you want case sensitive match, update the check above to strcmp()
			echo '<br clear="all"><div class="vpb_info" align="left">Sorry, the security code you provided was incorrect, please try again. Thanks.</div>';
		}
		else
		{
			 if(@mail($to_email, $email_subject, $vpb_message_body, $headers))
			 {
				//Displays the success message when email message is sent
				  echo "<br clear='all'><div align='left' class='vpb_success'>Congrats ".$from_voornaam.", your email message has been sent successfully!<br>We will get back to you as soon as possible. Thanks.</div>";
			 } 
			 else 
			 {
				 //Displays an error message when email sending fails
				  echo "<br clear='all'><div align='left' class='vpb_info'>Sorry, your email could not be sent at the moment. <br>Please try again or contact this website admin to report this error message if the problem persist. Thanks.</div>";
			 }
		}
	}
}

?>

vpb_contact_form.js

/********************************************************************************************************************
* Contact Form with Captcha using Ajax, Jquery and PHP
* This script is brought to you by Vasplus Programming Blog by whom all copyrights are reserved.
* Website: www.vasplus.info
* Email: vasplusblog@gmail.com or info@vasplus.info
* Please, this script must not be sold and do not remove this information from the top of this page.
*********************************************************************************************************************/


//This function refreshes the security or captcha code when you click on the refresh link at the form
function vpb_refresh_aptcha()
{
	return document.getElementById("vpb_captcha_code").value="",document.getElementById("vpb_captcha_code").focus(),document.images['captchaimg'].src = document.images['captchaimg'].src.substring(0,document.images['captchaimg'].src.lastIndexOf("?"))+"?rand="+Math.random()*1000;
}
//This is the JS function that sends the mail - It is called when you click on the submit button which is in the form
function vpb_submit_form()
{
	//Variable declaration and assignment
	var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	var keuze = $("#keuze").val();
	var voornaam = $("#voornaam").val();
	var naam = $("#naam").val();
	var phone = $("#phone").val();
	var email = $("#email").val();
	var opmerkingen = $("#opmerkingen").val();
	var vpb_captcha_code = $("#vpb_captcha_code").val();
	
	if( keuze == "") //Validation against empty field for keuze
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Maak een keuze om verder te gaan. Dank u.</div>');
		$("#keuze").focus();
	}
	else if( voornaam == "" ) //Validation against empty field for voornaam
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Voer uw voornaam in het gewenste veld om verder te gaan. Dank u.</div>');
		$("#voornaam").focus();
	}
	else if( naam == "" ) //Validation against empty field for naam
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Voer uw naam in het gewenste veld om verder te gaan. Dank u.</div>');
		$("#naam").focus();
	}
	else if( email == "" ) //Validation against empty field for email address
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Voer uw emailadres in het gewenste veld om verder te gaan. Dank u.</div>');
		$("#email").focus();
	}
	else if(reg.test(email) == false) //Validation for working email address
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Sorry, Uw e-mailadres is ongeldig. Voer een geldig emailadres in het gewenste veld om verder te gaan. Dank u.</div>');
		$("#email").focus();
	}
	else if( vpb_captcha_code == "" ) //Validation against empty field for security captcha code
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Please enter the security code in its field to send us your message. Thanks.</div>');
		$("#vpb_captcha_code").focus();
	}
	else
	{
		var dataString = 'keuze=' + keuze + '&voornaam=' + voornaam + '&naam=' + naam + '&phone=' + phone + '&email=' + email + '&opmerkingen=' + opmerkingen + '&vpb_captcha_code=' + vpb_captcha_code + '&submitted=1';
		$.ajax({  
			type: "POST",  
			url: "vpb_contact_form.php",  
			data: dataString,
			beforeSend: function() 
			{
				//Show loading image
				$("#response_brought").html('<br clear="all"><div align="left" style=" padding-top:6px; margin-left:100px; margin-top:15px;"><font style="font-family:Verdana, Geneva, sans-serif; font-size:12px; color:black;">Please wait</font> <img src="images/loading.gif" alt="Loading...." align="absmiddle" title="Loading...."/></div>');			
			},  
			success: function(response)
			{
				//Check to see if the message is sent or not
				var response_brought = response.indexOf('Congrats');
				if( response_brought != -1 )
				{
					//Clear all form fields on success
					$("#keuze").val('');
					$("#voornaam").val('');
					$("#naam").val('');
					$("#phone").val('');
					$("#email").val('');
					$("#opmerkingen").val('');
					$("#vpb_captcha_code").val('');
					
					//Display success message if the message is sent
					$("#response_brought").html(response);
					
					//Remove the success message also after a while of displaying the message to the user
					setTimeout(function() {
						$("#response_brought").html('');
					},10000);
				}  
				else  
				{
					//Display error message is the message is not sent
					 $("#response_brought").html(response);
				}
			}
		});
	}
}

en hier mijn stylesheet

/********************************************************************************************************************
* Contact Form with Captcha using Ajax, Jquery and PHP
* This script is brought to you by Vasplus Programming Blog by whom all copyrights are reserved.
* Website: www.vasplus.info
* Email: vasplusblog@gmail.com or info@vasplus.info
* Please, this script must not be sold and do not remove this information from the top of this page.
*********************************************************************************************************************/

/*Main Form Wrapper*/
.vasplus_programming_blog_wrapper 
{
	width:498px;
	margin: 0 auto;
	border: solid 1px #cbcbcb;
	 background-color: #FFF;
	 box-shadow: 0 2px 20px #cbcbcb;
	-moz-box-shadow: 0 2px 20px #cbcbcb;
	-webkit-box-shadow: 0 2px 20px #cbcbcb;
	-webkit-border-radius: 15px 15px; 15px 15px;-moz-border-radius: 15px 15px; 15px 15px;border-radius: 15px 15px; 15px 15px;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	padding-top:12px;
	padding-bottom:12px;
	margin-bottom: -200px;
}

#titel{
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	padding-left:10px;
	font-weight: bold;
	text-align: center;
}

#contactform{
	width:430px; 
	font-family:Verdana, Geneva, sans-serif; 
	font-size:12px;
	padding:10px;
}

.rb{
	float: left;
	text-align: left;
	margin-left: 0px;
	width: 312px;
}

.labels{
	width: 135px;
	padding-top:10px;
	float: left;
	text-align: left;
	margin-left: 10px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
}

.input{
	width:285px; 
	float:left;
}

/*Input and Textare Field Style*/
.vpb_input_fields {
	width:291px;box-shadow: 0 0 6px #666666;-moz-box-shadow: 0 0 6px #666666;-webkit-box-shadow: 0 0 6px #666666;font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight:normal;height:25px; padding:3px;padding-left:10px;padding-right:10px; padding-top:2px;border: 0px solid  #F1F1F1;outline:none;border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius:2px;
}	
.vpb_input_fields:focus { 
 outline:none;border: 0px solid #4195fc;box-shadow: 0 0 12px #66F;-moz-box-shadow: 0 0 12px #66F;-webkit-box-shadow: 0 0 12px #66F;
}

/*Captcha Box wrapper*/
.vpb_captcha_wrapper 
{
	width:291px;
	height:auto;
	padding:10px; 
	border: solid 1px #cbcbcb;
	 background-color: #FFF;
	 box-shadow: 0 0 20px #cbcbcb;
	-moz-box-shadow: 0 0 20px #cbcbcb;
	-webkit-box-shadow: 0 0 20px #cbcbcb;
	border-top: solid 0px #cbcbcb;
	text-align:center;
	position:relative;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	float:left;
}


/*Success Message Style*/
.vpb_success {width:390px;font-family:Verdana, Geneva, sans-serif; font-size:11px; padding:10px; background:#FFFFB7; border:1px solid #F1F1F1;box-shadow: 0 0 20px #cbcbcb;-moz-box-shadow: 0 0 20px #cbcbcb;-webkit-box-shadow: 0 0 20px #cbcbcb;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; line-height:20px;}


/*Error Messages Style*/
.vpb_info {  text-align:left;border: 1px solid #999; padding:8px 10px 8px 10px; font: bold 12px verdana;-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888;box-shadow: 0 0 5px #888;text-shadow: 2px 2px 2px #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;font-family:Verdana, Geneva, sans-serif; font-size:11px; line-height:20px;font-weight:normal;color: black;background: #BDE5F8; }

.ccc{ text-decoration:none; color:blue;}
.ccc:hover{ text-decoration:underline;}

/*Vasplus Button*/
.vpb_general_button 
{
 background-color: #7fbf4d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: linear-gradient(top, #7fbf4d, #63a62f);
  border: 2px solid #63a62f;box-shadow: 0 2px 3px #666666;-moz-box-shadow: 0 2px 3px #666666;-webkit-box-shadow: 0 2px 3px #666666;
  -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
  color: #fff;
  font-family:Verdana, Geneva, sans-serif;
  font-size:14px;
  text-align: center;
  text-shadow: 0 -1px 0 #4c9021;
  width: auto;
  padding:9px;
  padding-left:13px; padding-right:13px;padding-bottom:7px;
  text-decoration:none;
  float:left;
  margin-left: 235px;
  margin-top: -22px;
}
.vpb_general_button:hover 
{
    background-color: #76b347;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e));
    background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
    background-image: linear-gradient(top, #76b347, #5e9e2e);
    box-shadow: 0 2px 3px #666666;
	-moz-box-shadow: 0 2px 3px #666666;
	-webkit-box-shadow: 0 2px 3px #666666;
	-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
    cursor: pointer; 
}



.back_to_tutorial {
	
background-color: #ee432e;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100));
  background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  border: 1px solid #951100;box-shadow: 0 2px 3px #951100;-moz-box-shadow: 0 2px 3px #951100;-webkit-box-shadow: 0 2px 3px #951100;
  -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  color: #fff;
  font: bold 15px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 12px 0 14px 0;
  text-align: center;
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
  width: 200px; }
.back_to_tutorial:hover 
{
    background-color: #f37873;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601));
    background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    cursor: pointer; }
.back_to_tutorial:active 
{
    background-color: #d43c28;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d43c28), color-stop(50%, #ad3224), color-stop(50%, #9c1500), color-stop(100%, #700d00));
    background-image: -webkit-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -ms-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
    box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); 
}

Mijn online testpagina: http://contactform.uphero.com/

Alvast op voorhand bedankt!

Mvg gast0187

 

[phobia]

<input type="radio" name="radio" value="male"/>
<input type="radio" name="radio" value="female"/>
aan de php kant doe je eerst isset($_POST['radio']).
Html stuurt namelijk niks door als er niks gekozen is.
Vandaar ze check of het verzonden is, is het verzonden dat afhandelen als een normale $_POST

Hetzelfde geld voor de checkboxen!

 

[gast0187]

Bij de php controle heb ik dit:

if (isset($_POST['keuze']))
	{
		echo '<br clear="all"><div class="vpb_info" align="left">Maak een keuze om verder te gaan. Dank u.</div>';
	}

de js controle:

if( keuze == "") //Validation against empty field for keuze
	{
		$("#response_brought").html('<br clear="all"><div class="vpb_info" align="left">Maak een keuze om verder te gaan. Dank u.</div>');
		$("#keuze").focus();
	}

 

[phobia]

en in je js-file? want daar gebeurt de magic, die verzend de data uit je form via een post request.
in je js-file moet je de gegevens van je radiobuttons verzamelen.