PHP Kontaktformular zur gesendet "Seite" mit Animation

[.maxx]

Tach zusammen,
so der Titel klingt ein wenig seltsam aber ich erklärs mal.

Meine Seite andreasmaks.de (http://andreasmaks.de) hat eine JS Animation beim Ankerwechsel.

Das Kontaktformular leitet mich auf die gesendet Seite (http://andreasmaks.de/#danke) weiter nach dem versendet wurde. Nun wäre es schön wenn dies mit der besagten JS animation geschehen würde. Also

Nachricht senden durch meine contact-form.php -> zurück zur Formularseite -> sofort Animation zur gesendet Seite.

Wie löst man das am besten?


<?php

$empfaenger = "max@mustermann.de"; //hier kommt die email adresse hin, an die die mail geschickt wird
$absender = 'Kontaktformular - andreasmaks.de<max@mustermann.de>';
$betreff = 'Nachricht ueber Webseite';

//bestimmen der eingabefelder
$field1 = $_POST["contactname"];
$field2 = $_POST["contactemail"];
$field14 = $_POST["contactmessage"];

//aussehen der email die an dich gesendet wird
$send = '
Name: '.$_POST["contactname"].'

Email: '.$_POST["contactemail"].'

'.$_POST["contactmessage"].'
';

$headers .= 'From:' . $absender;

//die sendefunktion
if (mail($empfaenger, $betreff, $send, $headers))
{
header("Location: index.html#danke");
}
else
{
header("Location: index.html#danke");
}

?>

[Gohan]

Ajax!

Da du schon jQuery verwendest, sollte das kein Problem sein. Merkwürdiger weise liegen nicht alle Inputelemente innerhalb der Form. Funktioniert das überhaupt? Ich denke, dass es in der aktuellen Konstellation nicht klappen wird, aber wenn alle Input Elemente in der Form liegen, sollte es funktionieren.

JavaScript Teil:

<script type="text/javascript">
$(document).ready(function() {
$('#contact-bt').click(function(e) {
e.preventDefault();
$.post('contact-form.php', $('#contactform').serialize(), function(data) {
if(data == 'true') {
window.location.href = '#danke';
}
});
};
});
</script>


<?php

$empfaenger = "max@mustermann.de"; //hier kommt die email adresse hin, an die die mail geschickt wird
$absender = 'Kontaktformular - andreasmaks.de<max@mustermann.de>';
$betreff = 'Nachricht ueber Webseite';

//bestimmen der eingabefelder
$field1 = $_POST["contactname"];
$field2 = $_POST["contactemail"];
$field14 = $_POST["contactmessage"];

//aussehen der email die an dich gesendet wird
$send = '
Name: '.$_POST["contactname"].'

Email: '.$_POST["contactemail"].'

'.$_POST["contactmessage"].'
';

$headers .= 'From:' . $absender;

//die sendefunktion
if (mail($empfaenger, $betreff, $send, $headers))
{
echo 'true';
}
else
{
echo 'false';
}

?>



Nicht getestet und nur schnell aus dem Kopf geschrieben.

[.maxx]

Hey super danke Gohan,

also das Kontaktformular funktionierte in der Form.

Ich habe jetzt mal deinen Code verwendet, aber nachdem ich das Formular abschicke kommt nur eine Meldung des contact-form.php in einer leeren Seite.


true


EDIT:
Auch mit dem Form in einer DIV kommt das gleiche Ergebnis.

[Gohan]

Wo hast du denn den JavaScript Code eingebunden? Ich würde dir empfehlen, den Code

$('#contact-bt').click(function(e) {
e.preventDefault();
$.post('contact-form.php', $('#contactform').serialize(), function(data) {
if(data == 'true') {
window.location.href = '#danke';
}
});
});

Innerhalb des $(document).ready Blocks in der /js/initjs.js einzubinden.

[.maxx]

Ok jetzt in die initjs.js eingebunden.

Aber nun passiert folgendes.

1. nach dem Senden springt man zum Danke Dialog aber ohne diese Animation
2. Die Email die ich bekomme ist leer. Es steht nur


Name:

Email:

[Gohan]

Ok jetzt in die initjs.js eingebunden.

Aber nun passiert folgendes.

1. nach dem Senden springt man zum Danke Dialog aber ohne diese Animation
2. Die Email die ich bekomme ist leer. Es steht nur


Name:

Email:


Ok, dann habe ich noch nicht ganz kapiert, wie die Animationen in deiner Seite aktiviert werden. Schau ich noch mal. Das die Email leer ist, kann nun daran liegen, dass nicht alle Inputelemente innerhalb der Form liegen.

[.maxx]

Hmm also die Form an sich funktioniert in der bisherigen Form. Ein umbauen in eine DIV ist nicht so einfach möglich, deswegen würde ich die aktuelle Version gerne behalten.

[Gohan]

Sry, leider grad etwas busy,

deshalb noch mal ein Schuss ins Blaue, sorry wenn's nicht funktioniert :(

$('#contact-bt').click(function(e) {
e.preventDefault();
$.post('contact-form.php', {
contactmessage: $('#contactmessage').val(),
contactname: $('#contactname').val(),
contactemail: $('#contactemail').val()
},
function(data) {
if (data == 'true') {
location.hash = '#danke';
$(window).hashchange();
}
});
});

[.maxx]

Vielen Dank Gohan,

jetzt tut die Email wieder aber leider weiterhin ohne Animation.

[Gohan]

Hi, hier noch mal ein Versuch. Ist zwar etwas arg hacky, führt aber evtl. zum Ziel mitt dem geringsten Aufwand.

JavaScript Code:

$('#contact-bt').click(function(e) {
e.preventDefault();
$.post('contact-form.php', {
contactmessage: $('#contactmessage').val(),
contactname: $('#contactname').val(),
contactemail: $('#contactemail').val()
},
function(data) {
if (data == 'true') {
$('#hidden-thankyou').click();
}
});
});

Und irgendwo auf der Seite folgenden Link platzieren (muss aber noch innerhalb des wrappers sein, glaub ich):

<a id="hidden-thankyou" style="position: absolute; top: -5000px; left:-5000px;" href="#danke">should not see me</a>

[.maxx]

Hi Gohan,

jetzt klappts super, aber nun bleibt der Text im Formular nach dem Senden erhalten und die Valiedierung findet nicht mehr statt.

Wie kann ich das hier...:


$('#contact-bt').click(function(e) {
e.preventDefault();
$.post('contact-form.php', {
contactmessage: $('#contactmessage').val(),
contactname: $('#contactname').val(),
contactemail: $('#contactemail').val()
},
function(data) {
if (data == 'true') {
$('#hidden-thankyou').click();
}
});
});


...und das hier zusammenbringen:



$(".contactform").validate({
//set the rules for the fild names
rules: {
contactmessage: {
required: true,
minlength: 10
},
contactname: {
required: true,
minlength: 5
},
contactemail: {
required: true,
email: true
},
},
//set messages to appear inline
messages: {
contactmessage: "",
contactname: "",
contactemail: ""
}
});

[Misda]

Ein bisschen OT:

Du wirbst auf deiner Seite mit folgendem Text:


"Kenntnisse

Ich verfüge über perfekten Umgang mit einem Mac als auch PC, die Adobe Creative Suite kenne ich auswendig, Sprachen wie HTML, CSS und Javascript sind für mich kein Problem, und in PHP, XML, MySQL, Action Script und diversen CM Systemen habe ich ausgeprägte Kenntnisse." 1 (http://andreasmaks.de/#about)


Nach der Beschreibung, müsstest du das doch selber hinbekommen? :conf2:

[Gohan]

Müsste so klappen:

$(".contactform").validate({
//set the rules for the fild names
rules: {
contactmessage: {
required: true,
minlength: 10
},
contactname: {
required: true,
minlength: 5
},
contactemail: {
required: true,
email: true
},
},
//set messages to appear inline
messages: {
contactmessage: "",
contactname: "",
contactemail: ""
},
submitHandler: function() {
$.post('contact-form.php', {
contactmessage: $('#contactmessage').val(),
contactname: $('#contactname').val(),
contactemail: $('#contactemail').val()
},
function(data) {
if (data == 'true') {
$('#hidden-thankyou').click();
}
});
}
});

[.maxx]

Hi Gohan,

es tut bis auf den Reset des Formulars. Der Inhalt bleibt im Formular nach dem Senden erhalten.

[Gohan]

Du hast den Code ja schon fast vor augen. Du solltest dir dringend mal jQuery anschauen! ;)

Das nach $('#hidden-thankyou').click(); einfügen:


$('#contactmessage').val('Nachricht');
$('#contactname').val('Name');
$('#contactemail').val('Email');