Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

offerteformulier en php

bewerkt do 31 mrt 2016 in PHP, MySQL Posts: 879
Tav @carlos

Offerteformulier digitaal
Het php gedeelte:
<?php


// functie spamcheck
function spamcheck($field)
{
//filter_var() sanitizes the e-mail
//address using FILTER_SANITIZE_EMAIL
$field=filter_var($field, FILTER_SANITIZE_EMAIL);

//filter_var() validates the e-mail
//address using FILTER_VALIDATE_EMAIL
if(filter_var($field, FILTER_VALIDATE_EMAIL))
{
return TRUE;
}
else
{
return FALSE;
}
}

if($_SERVER['REQUEST_METHOD'] == 'POST')
{

// definieren variabelen
$ontvanger = 'jouw@email.com'; // HIEW JOUW EMAIL INVULLEN
$onderwerp_email = "Offerteformulier"; // onderwerp wat in de email te zien is
$naam = $_POST['naam'];
$real_email = $_POST['real_email'];
$tel = $_POST['tel'];
$bedrijfsnaam = $_POST['bedrijfsnaam'];
$datum_workshop = $_POST['datum_workshop'];
$locatie_workshop = $_POST['locatie_workshop'];
$aantal_personen = $_POST['aantal_personen'];
$tijdsduur_workshop = $_POST['tijdsduur_workshop'];
$opmerkingen = $_POST['opmerkingen'];

// headers opmaken
$headers = 'MIME-Version: 1.0';
$headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
$headers .= 'From: '.$real_email;


// body voor de email opmaken
$body = "";
$body .= "Naam: ";
$body .= $naam;
$body .= "\n";
$body .= "Email: ";
$body .= $real_email;
$body .= "\n";
$body .= "Telefoon: ";
$body .= $tel;
$body .= "\n";
$body .= "Bedrijfsnaam: ";
$body .= $bedrijfsnaam;
$body .= "\n";
$body .= "Datum Workshop: ";
$body .= $datum_workshop;
$body .= "\n";
$body .= "Locatie Workshop: ";
$body .= $locatie_workshop;
$body .= "\n";
$body .= "Aantal personen: ";
$body .= $aantal_personen;
$body .= "\n";
$body .= "Tijdsduur Workshop: ";
$body .= $tijdsduur_workshop;
$body .= "\n";
$body .= "Opmerkingen: ";
$body .= $opmerkingen;
$body .= "\n";


// mailcheck, wordt later gechecked
$mailcheck = spamcheck($_POST['real_email']);

// checken of een robot ons formulier bezoekt
if($_POST['spam_email'] != '') {
die();
}
//check of email geldig is en geldige input is geleverd

elseif ($mailcheck==FALSE) {
echo 'U dient een geldig emailadres in te vullen!<br /><br />';
}

else {

// email verzenden
$formsent = mail($ontvanger, $onderwerp_email, $body, $headers);

// echo's als email is verzonden
if ($formsent){
echo '<div class="send_succeed">Het formulier is successvol verstuurd!</div><br /><br />';
}
else{
echo '<div class="send_failed">Sorry, maar er is iets misgegaan met het versturen, probeer het later nog eens.</div>';
}
}
} // eind server request

?>
De javascript validation op verschillende inputvleden:
<script type="text/javascript">

jQuery(function(){
jQuery("#ValidField").validate({
expression: "if (VAL) return true; else return false;",
message: "Vul uw naam in"
});
jQuery("#ValidNumber").validate({
expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
message: "Vul een geheel getal in"
});

jQuery("#ValidDate").validate({
expression: "if (!isValidDate(parseInt(VAL.split('-')[2]), parseInt(VAL.split('-')[1]), parseInt(VAL.split('-')[0]))) return false; else return true;",
message: "Vul een geldige datum in"
});
jQuery("#ValidEmail").validate({
expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
message: "Vul een geldig emailadres in"
});

});

</script>
En de form:
 <form id="offerte" action="" method="post">

<h2>Informatie/offerte HAKA workshop</h2>
<br />

Zodra uw aanvraag binnen is nemen wij zo spoedig mogelijk contact met u op.<br />
Dit zodat we precies uw insteek en verwachtingen van de workshop weten en samen met u de perfecte workshop voor u kunnen maken!<br />
<br /><br />
Als u wilt dat er telefonisch contact met u opgenomen wordt?<br />
Laat dan een telefoonnummer achter waar we u op kunnen bereiken.
<br /><br />
<input type="hidden" id="spam_email" name="spam_email" value="" /> <!-- spamprotectie -->

<table>
<tr>
<td>Uw naam: <span>*</span></td>
<td><input type="text" name="naam" id="ValidField" value="" /></td>
</tr>
<tr>
<td>Uw email: <span>*</span></td>
<td><input type="text" name="real_email" id="ValidEmail" value="" /></td>
</tr>
<tr>
<td>Telefoonnummer:</td>
<td><input type="text" name="tel" name="ValidNumber" value="" /></td>
</tr>
<tr>
<td>Bedrijfsnaam:</td>
<td><input type="text" name="bedrijfsnaam" value="" /></td>
</tr>
<tr>
<td>Datum workshop: <span>*</span></td>
<td><input type="text" name="datum_workshop" id="ValidDate" placeholder="DD-MM-JJJJ" value="" /></td>
</tr>
<tr>
<td>Locatie workshop:</td>
<td><input type="text" name="locatie_workshop" value="" /></td>
</tr>
<tr>
<td>Aantal personen: <span>*</span></td>
<td><input type="text"name="aantal_personen" id="ValidNumber" value="" /></td>
</tr>
<tr>
<td>Tijdsduur:</td>
<td><input type="text" name="tijdsduur_workshop" value="" /></td>
</tr>
<tr>
<td>Opmerkingen:</td>
<td><textarea type="text" name="opmerkingen" rows="6" cols="50" value=""></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="submit" id="FormSubmit" value="Verzenden" />
<input type="reset" class="reset" value="Reset" />
</td>
</tr>
</table>
<span>*</span> Verplichte velden

</form>
Belangrijk: Voor de js form validatie zijn een paar bestanden nodig die je in de head van je pagina moet inladen:
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.validate.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
<script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script src="javascripts/jquery.validate.js" type="text/javascript"></script>
<script src="javascripts/jquery.validation.functions.js" type="text/javascript"></script>
Deze bestanden zijn ook toegevoegd aan de bijlage
De validatie checkt op de volgende velden:
- naamveld verplicht
- email verplicht en checkt een geldig email
- datum verplicht en moet in deze volgorde: DD-MM-JJJJ
- aantal personen verplicht en mag alleen een nummer bevatten

Om te testen: http://webprofis.nl/demo/vd/1/discussievoorbeelden/carlos/offerteformulier/carlosform.php




zip
zip
offerteformulier.zip
125K

Reacties

  • PMPosts: 879
    Uitleg: wat je nu het beste kunt doen is een nieuwe pagina maken bijvoorbeeld offerte.php.
    Maak een copie van contact.php en noem die offerte.php
    Je hebt nu dus contact.php en offerte.php die exact hetzelfde zijn. Haal nu uit offerte.php de hele form weg en pleur hier de php code in, het javascript en de nieuwe form (onder mekaar), zoals de code hierboven
    Zorg ervoor dat je je mappen lib, javascripts, en stylesheets in dezelfde map staan als offerte.php
    Als laatste zet je deze links:
        <link rel="stylesheet" type="text/css" href="stylesheets/jquery.validate.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
    <script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="javascripts/jquery.validate.js" type="text/javascript"></script>
    <script src="javascripts/jquery.validation.functions.js" type="text/javascript"></script>
    in de head van offerte.php

    O jouw contactpagina staat re beneden: "Download hier het word-document ...."
    Maak daar bijvorrbeeld van: "Vul uw offerte hier(en woordje hier linken naar offerte.php) uw offerte in"
Login of Registreer om te reageren.