Dette ble jækla avansert for meg, merker jeg.
Jeg satt og knota litt med det nå nettopp, helt fra scratch via diverse manualsider. Problemet er at jeg roter det til, og klarer aldri konsentrere meg om alt på en gang, siden jeg ikke kan mye av verken PHP eller JS.
Slik ser det ut nå...
HTML:
HTML-kode
<!-- Skjult div (via display: none; i CSS) med feedback som "unhides" med JS -->
<div id="feedback"><h3>Takk!</h3><p>Din melding er mottatt. Du hører fra oss så snart som mulig.</div>
<form action="mail.php" method="POST" id="contactForm">
<p>Fullt navn: <span class="req">*</span><br />
<input type="text" name="navn" value="" /></p>
<p>E-post: <span class="req">*</span><br />
<input type="text" name="epost" value="" /></p>
<p>Telefon: <span class="req">*</span><br />
<input type="text" name="telefon" value="" /></p>
<p>Emne: <br />
<select name="emne">
<option value="Generel henvendelse">Generell henvendelse</option>
<option value="Bestilling">Bestilling</option>
<option value="Reklamasjon">Reklamasjon</option>
</select></p>
<p>Melding: <span class="req">*</span><br />
<textarea name="melding"></textarea></p>
<input type="submit" id="submit" name="submit" value="SEND SKJEMA" class="button" />
</form>
PHP:
Kode
// Hvem skal mailen sendes til?
$mottaker = "xxxx@xxxx.xx";
// Variablene fra skjemaet
$navn = $_POST['navn'];
$epost = $_POST['epost'];
$telefon = $_POST['telefon'];
$emne = $_POST['emne'];
$melding = $_POST['melding'];
// Bevaring av linjeskift fra meldingsfeltet
$ferdig = nl2br($_POST['melding']);
// Mailens emne
$subject = "Melding fra WEB :: $emne";
// Generering av mail
$innhold = '<html><body>';
$innhold .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
$innhold .= "<tr style='background: #eee;'><td><strong>Fra:</strong> </td><td>" . $_POST['navn'] . "</td></tr>";
$innhold .= "<tr><td><strong>Telefon:</strong> </td><td>" . $_POST['telefon'] . "</td></tr>";
$innhold .= "<tr><td><strong>E-post:</strong> </td><td>" . $_POST['epost'] . "</td></tr>";
$innhold .= "<tr><td><strong>Emne:</strong> </td><td>" . $_POST['emne'] . "</td></tr>";
$innhold .= "<tr><td><strong>Melding:</strong> </td><td>" . $ferdig . "</td></tr>";
$innhold .= "</table>";
$innhold .= "</body></html>";
// Mailheaders
$headers = "From:" . $navn . "\r\n";
$headers .= "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type: text/html; charset=utf-8" . "\r\n";
// Sending av mail
if(mail ($mottaker, $subject, $innhold, $headers)) {
echo 'TAKK!';
}
else {
echo 'FEIL!';
}
?>
JS fra index.php:
Kode
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- Validering av kontaktskjema -->
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
// initiate validator on load
$(function() {
// validate contact form on keyup and submit
$("#contactForm").validate({
// set the rules for the field names
rules: {
navn: {
required: true,
minlength: 4
},
epost: {
required: true,
email: true
},
telefon: {
required: true,
number: true
},
melding: {
required: true,
minlength: 6
},
},
// set messages to appear inline
messages: {
navn: "<br /> Vennligst oppgi fullt navn",
epost: "<br /> Vennligst oppgi en gyldig e-postadresse",
telefon: "<br /> Vennligst oppgi telefonnummer",
melding: "<br /> Du har glemt å skrive meldingen!"
}
});
});
</script>
<script type="text/javascript">
// vis feedback div
$(function() {
$('#submit').click(function(){
$('#feedback').slideDown();
});
});
</script>
Som dere ser her, så er det et salig rot.
Jeg har ikke lyst til å kødde med mailscriptet. Ja, jeg vet det ikke er hackersafe og spamsafe, og alt det der, men det driter vi i. Som dere ser så sender scriptet mailen som html, noe som er ønskelig.
Valideringen er veldig enkel, og gjøres med en ferdig plugin jeg fant. Husker ikke navnet nå, men det står i førsteposten.
Problemet nå er følgende: hvis jeg bruker
HTML-kode
<input type="submit" id="submit" name="submit" value="SEND SKJEMA" class="button" />
på skjemaet, så får jeg mailen, og alt er vel
bortsett fra at jeg får opp en blank side med "TAKK!" på som bekreftelse. Hvis jeg derimot bruker
HTML-kode
<input type="button" id="submit" name="submit" value="SEND SKJEMA" class="button" />
i skjemaet, så funker jquery-slidein-bekreftelses-greia helt nydelig, men da får jeg ingen mail.
Jeg ser, hvis jeg bruker type="submit", at slidein-greia funker, men istedenfor å få se hele, så popper denne blanke siden opp istedenfor siden jeg er på - altså ikke en ny, blank side, men siden reloades og blir blank. Get it? Jeg er dårlig på å forklare, men håper dere skjønner.
Så - hva må jeg gjøre for å kunne motta mail (med akkurat det designet jeg har satt opp) men samtidig ha slidein-effekten? (og evt. som tillegg - at skjemaet blir blankt igjen når man får bekreftelsen på at det er sendt)?
Beklager igjen for rotete og lang post, men klokka er tre, jeg er frustrert, og skal opp på jobb kl. 7. God natt!
