Formulier verzenden met php
Allereerst dank voor diegene die mij op weg wil helpen. Ik ben bezig met een website en een formulier. Dit formulier roept (correct me if i'm wrong) een JS aan waarin de post staat naar een .php file. Nu had ik al een send.php file en deze aangepast maar krijg 'm niet goed. Of mail geeft geen afzender, of het bericht is niet compleet etc.
HTML
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div <!-- Appointment Form -->
<div class="modal fade" id="appointmentForm">
<div class="modal-dialog container">
<div class="modal-content">
<div class="modal-header"><a href="#" class="appointment" data-toggle="modal" data-target="#appointmentForm"><i class="icon-shape icon"></i><span>Afspraak</span></a>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="icon-close-cross"></i></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<h2>Plan <span class="color">onderhoud of reparatie</span></h2>
<p>Om een afpraak te plannen bij * of vul onderstaand formulier. Wij nemen dan contact met uw op om uw afspraak te bevestigen. </p>
<div class="divider"></div>
<form id="appointment-form" class="contact-form form-horizontal" name="contactform" method="post">
<div id="successAppointment" class="successform">
<p>Uw bericht is succesvol verzonden</p>
</div>
<div id="errorAppointment" class="errorform">
<p>Something went wrong, try refreshing and submitting the form again.</p>
</div>
<h5>Contact information</h5>
<div class="form-inline">
<div>
<input type="text" name="name" class="form-control input-custom" value="" placeholder="First name">
</div>
<div>
<input type="text" name="lastname" class="form-control input-custom" value="" placeholder="Last name">
</div>
</div>
<div class="form-inline">
<div>
<input type="text" name="phone" class="form-control input-custom" value="" placeholder="Phone number">
</div>
<div>
<input type="text" name="email" class="form-control input-custom" value="" placeholder="Your E-mail">
</div>
</div>
<div class="divider"></div>
<h5>Appointment details</h5>
<div class="form-inline">
<div class="datetimepicker-wrap">
<input type="text" name="date" class="form-control input-custom datetimepicker" placeholder="">
</div>
<div class="timepicker-wrap">
<input type="text" name="time" class="form-control input-custom timepicker" placeholder="">
</div>
</div>
<div class="form-inline">
<div>
<input name="autoinfo" type="text" class="form-control input-custom" value="" placeholder="Vehicle Year, Make and Model">
</div>
<div class="form-inline">
<div class="select-wrapper">
<select name="select1" class="input-custom">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
</div>
<div>
<input name="kilometers" type="text" class="form-control input-custom" value="" placeholder="Current Kilometers">
</div>
</div>
</div>
<div class="form-inline">
<textarea name="message" class="form-control textarea-custom" placeholder="Service Required"></textarea>
</div>
<div class="divider"></div>
<div class="row">
<div class="col-sm-4 col-md-3 bootstrap-datetimepicker-widget">
<button type="submit" id="submit" class="btn btn-lg"><span>SUBMIT</span></button>
</div>
<div class="divider visible-xs"></div>
<div class="col-sm-8 col-md-9">
<p><i>Please note that the date and time you requested may not be available. We will contact you to confirm your actual appointment details.</i></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="appointmentForm">
<div class="modal-dialog container">
<div class="modal-content">
<div class="modal-header"><a href="#" class="appointment" data-toggle="modal" data-target="#appointmentForm"><i class="icon-shape icon"></i><span>Afspraak</span></a>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="icon-close-cross"></i></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<h2>Plan <span class="color">onderhoud of reparatie</span></h2>
<p>Om een afpraak te plannen bij * of vul onderstaand formulier. Wij nemen dan contact met uw op om uw afspraak te bevestigen. </p>
<div class="divider"></div>
<form id="appointment-form" class="contact-form form-horizontal" name="contactform" method="post">
<div id="successAppointment" class="successform">
<p>Uw bericht is succesvol verzonden</p>
</div>
<div id="errorAppointment" class="errorform">
<p>Something went wrong, try refreshing and submitting the form again.</p>
</div>
<h5>Contact information</h5>
<div class="form-inline">
<div>
<input type="text" name="name" class="form-control input-custom" value="" placeholder="First name">
</div>
<div>
<input type="text" name="lastname" class="form-control input-custom" value="" placeholder="Last name">
</div>
</div>
<div class="form-inline">
<div>
<input type="text" name="phone" class="form-control input-custom" value="" placeholder="Phone number">
</div>
<div>
<input type="text" name="email" class="form-control input-custom" value="" placeholder="Your E-mail">
</div>
</div>
<div class="divider"></div>
<h5>Appointment details</h5>
<div class="form-inline">
<div class="datetimepicker-wrap">
<input type="text" name="date" class="form-control input-custom datetimepicker" placeholder="">
</div>
<div class="timepicker-wrap">
<input type="text" name="time" class="form-control input-custom timepicker" placeholder="">
</div>
</div>
<div class="form-inline">
<div>
<input name="autoinfo" type="text" class="form-control input-custom" value="" placeholder="Vehicle Year, Make and Model">
</div>
<div class="form-inline">
<div class="select-wrapper">
<select name="select1" class="input-custom">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
</div>
<div>
<input name="kilometers" type="text" class="form-control input-custom" value="" placeholder="Current Kilometers">
</div>
</div>
</div>
<div class="form-inline">
<textarea name="message" class="form-control textarea-custom" placeholder="Service Required"></textarea>
</div>
<div class="divider"></div>
<div class="row">
<div class="col-sm-4 col-md-3 bootstrap-datetimepicker-widget">
<button type="submit" id="submit" class="btn btn-lg"><span>SUBMIT</span></button>
</div>
<div class="divider visible-xs"></div>
<div class="col-sm-8 col-md-9">
<p><i>Please note that the date and time you requested may not be available. We will contact you to confirm your actual appointment details.</i></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
JS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
// appointment form
if (forms.appointmentForm.length) {
var $appointmentForm = forms.appointmentForm;
$appointmentForm.validate({
rules: {
name: {
required: true,
minlength: 2
},
phone: {
required: true,
minlength: 10
},
message: {
required: true,
minlength: 20
},
email: {
required: true,
email: true
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Your name must consist of at least 2 characters"
},
phone: {
required: "Please enter your number",
minlength: "Your name must have 10 characters"
},
message: {
required: "Please enter message",
minlength: "Your message must consist of at least 20 characters"
},
email: {
required: "Please enter your email"
}
},
submitHandler: function (form) {
$(form).ajaxSubmit({
type: "POST",
data: $(form).serialize(),
url: "process-appointment1.php",
success: function () {
$('#successAppointment').fadeIn();
$('#appointment-form').each(function () {
this.reset();
});
},
error: function () {
$('#appointment-form').fadeTo("slow", 0, function () {
$('#errorAppointment').fadeIn();
});
}
});
}
});
}
if (forms.appointmentForm.length) {
var $appointmentForm = forms.appointmentForm;
$appointmentForm.validate({
rules: {
name: {
required: true,
minlength: 2
},
phone: {
required: true,
minlength: 10
},
message: {
required: true,
minlength: 20
},
email: {
required: true,
email: true
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Your name must consist of at least 2 characters"
},
phone: {
required: "Please enter your number",
minlength: "Your name must have 10 characters"
},
message: {
required: "Please enter message",
minlength: "Your message must consist of at least 20 characters"
},
email: {
required: "Please enter your email"
}
},
submitHandler: function (form) {
$(form).ajaxSubmit({
type: "POST",
data: $(form).serialize(),
url: "process-appointment1.php",
success: function () {
$('#successAppointment').fadeIn();
$('#appointment-form').each(function () {
this.reset();
});
},
error: function () {
$('#appointment-form').fadeTo("slow", 0, function () {
$('#errorAppointment').fadeIn();
});
}
});
}
});
}
PHP
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
if($_POST){
$to = '[email protected]';/*Put Your Email Adress Here*/
$subject = $_POST['subject'];
$from_name = $_POST['name'];
$from_email = $_POST['email'];
$phone = $_POST['phone'];
$date = $_POST['date'];
$autoinfo = $_POST['autoinfo'];
$select1 = $_POST['select1'];
$kilometers = $_POST['kilometers'];
$message = $_POST['message'];
$header = "From: $from_name <$from_email>";
mail($to, $subject, $message, $header);
}
?>
if($_POST){
$to = '[email protected]';/*Put Your Email Adress Here*/
$subject = $_POST['subject'];
$from_name = $_POST['name'];
$from_email = $_POST['email'];
$phone = $_POST['phone'];
$date = $_POST['date'];
$autoinfo = $_POST['autoinfo'];
$select1 = $_POST['select1'];
$kilometers = $_POST['kilometers'];
$message = $_POST['message'];
$header = "From: $from_name <$from_email>";
mail($to, $subject, $message, $header);
}
?>
Gewijzigd op 28/02/2021 09:37:19 door Michael Claassen
Edit:
schrijfrechten onjuist, aangepast maar nog geen juiste werking
Toevoeging op 28/02/2021 09:46:14:
Deze code met de juiste schrijfrechten en de onderstaande code wordt het formulier verstuurd. Alleen de inhoud van het bericht is alleen 'Message'. Alle andere ingevulde velden worden niet mee verzonden.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
if($_POST){
$to = '[email protected]';/*Put Your Email Adress Here*/
$subject = $_POST['subject'];
$from_name = $_POST['name'];
$from_email = $_POST['email'];
$phone = $_POST['phone'];
$date = $_POST['date'];
$autoinfo = $_POST['autoinfo'];
$select1 = $_POST['select1'];
$kilometers = $_POST['kilometers'];
$message = $_POST['message'];
$header = "From: $from_name <$from_email>";
mail($to, $subject, $message, $header);
}
?>
if($_POST){
$to = '[email protected]';/*Put Your Email Adress Here*/
$subject = $_POST['subject'];
$from_name = $_POST['name'];
$from_email = $_POST['email'];
$phone = $_POST['phone'];
$date = $_POST['date'];
$autoinfo = $_POST['autoinfo'];
$select1 = $_POST['select1'];
$kilometers = $_POST['kilometers'];
$message = $_POST['message'];
$header = "From: $from_name <$from_email>";
mail($to, $subject, $message, $header);
}
?>
Gewijzigd op 28/02/2021 09:24:26 door Michael Claassen
Bekijk daarna in het network-tabblad van je browser wat je script teruggeeft. Dit omdat je het mail-script a-synchroon via AJAX uitvoert.
Zie ook:
https://developers.google.com/web/tools/chrome-devtools/network
Elke browser heeft overigens een soortgelijke functie.
Gewijzigd op 28/02/2021 10:24:41 door - Ariën -
Dat hoort bij elke PHP-regel. ;-)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
if($_POST){
print_r($_POST); $to = '[email protected]';/*Put Your Email Adress Here*/
$subject = $_POST['subject'];
$from_name = $_POST['name'];
$from_email = $_POST['email'];
$phone = $_POST['phone'];
$date = $_POST['date'];
$autoinfo = $_POST['autoinfo'];
$select1 = $_POST['select1'];
$kilometers = $_POST['kilometers'];
$message = $_POST['message'];
$header = "From: $from_name <$from_email>";
mail($to, $subject, $message, $header);
}
?>
if($_POST){
print_r($_POST); $to = '[email protected]';/*Put Your Email Adress Here*/
$subject = $_POST['subject'];
$from_name = $_POST['name'];
$from_email = $_POST['email'];
$phone = $_POST['phone'];
$date = $_POST['date'];
$autoinfo = $_POST['autoinfo'];
$select1 = $_POST['select1'];
$kilometers = $_POST['kilometers'];
$message = $_POST['message'];
$header = "From: $from_name <$from_email>";
mail($to, $subject, $message, $header);
}
?>
Gewijzigd op 28/02/2021 10:41:03 door Michael Claassen
En dan even in je Network-tabblad je script process-appointment1.php zoeken, dubbelklikken en kijken naar de request-data.
De inhoud van het formulier wordt namelijk via een POST-request gestuurd, en het is daarom handig om te weten welke data dat allemaal is.
Gewijzigd op 28/02/2021 10:45:34 door - Ariën -
Quote:
phone: {
required: "Please enter your number",
minlength: "Your name must have 10 characters"
},
required: "Please enter your number",
minlength: "Your name must have 10 characters"
},
phone ==> your name??
Quote:
rules: {
name: {
required: true,
minlength: 2
},
name: {
required: true,
minlength: 2
},
familie A (bestaat echt :)) slechts 1 letter.
Jan
Jan R op 28/02/2021 10:52:49:
off topic
phone ==> your name??
familie A (bestaat echt :)) slechts 1 letter.
Jan
Quote:
phone: {
required: "Please enter your number",
minlength: "Your name must have 10 characters"
},
required: "Please enter your number",
minlength: "Your name must have 10 characters"
},
phone ==> your name??
Quote:
rules: {
name: {
required: true,
minlength: 2
},
name: {
required: true,
minlength: 2
},
familie A (bestaat echt :)) slechts 1 letter.
Jan
First things first ;-)
Toevoeging op 28/02/2021 11:08:51:
- Ariën - op 28/02/2021 10:43:03:
Gewoon 1 maal, en klaar :-) (een ENTER is niet overbodig)
En dan even in je Network-tabblad je script process-appointment1.php zoeken, dubbelklikken en kijken naar de request-data.
De inhoud van het formulier wordt namelijk via een POST-request gestuurd, en het is daarom handig om te weten welke data dat allemaal is.
En dan even in je Network-tabblad je script process-appointment1.php zoeken, dubbelklikken en kijken naar de request-data.
De inhoud van het formulier wordt namelijk via een POST-request gestuurd, en het is daarom handig om te weten welke data dat allemaal is.
Het formulier wordt verstuurd alleen de $message, geen andere ingevulde informatie.
Dat andere heb ik gevonden maar wat ik moet zien......
:authority: www.andijkautotechniek.nl
:method: GET
:path: /contact/form/process-appointment1.php
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
accept-encoding: gzip, deflate, br
accept-language: nl-NL,nl;q=0.9,en-US;q=0.8,en;q=0.7,fr;q=0.6
cache-control: max-age=0
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: none
sec-fetch-user: ?1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36
Je moet dit uiteraard wel via de normale weg doen die een gebruiker bewandelt. Want nu roep je dit volgens mij direct op je script aan, omdat ik GET als methode zie.
Gewijzigd op 28/02/2021 11:12:25 door - Ariën -
Jan R op 28/02/2021 10:52:49:
familie A (bestaat echt :)) slechts 1 letter.
Jan
Jan
Offtopic:
Oh, da's wel balen. Dan ben je altijd als eerste aan de beurt.
Zo leerlingen, wie wil deze lastige opdracht mondeling even uitleggen. Niemand? Nee? Zeker weten? Oké, dan maar op alfabetische volgorde: "Jan A ... leg jij het maar eens even uit".
- Ariën - op 28/02/2021 11:10:00:
En dan gaat het om de POST-data die er wordt meegestuurd. Moet je even zoeken.
Je moet dit uiteraard wel via de normale weg doen die een gebruiker bewandelt. Want nu roep je dit volgens mij direct op je script aan, omdat ik GET als methode zie.
Je moet dit uiteraard wel via de normale weg doen die een gebruiker bewandelt. Want nu roep je dit volgens mij direct op je script aan, omdat ik GET als methode zie.
Ja Ariën, dit zeg jij tegen een leek. Hier houdt het voor mij op voor wat betreft PHP.
Wil jij mij op weg helpen?
Als het goed is zie je process-appointment1.php staan.
Klik daarop en je ziet alle data die er van/naar dit script verzonden wordt. Bij 'Preview' o.i.d. moet je de data van je formulier zien staan.
Het is inderdaad wat lastig te onderzoeken, maar dat heb je met asynchrone requests. Gelukkig mogen we blij zijn dat browsers een hoop leuke tooltjes aan boord hebben om zulke zaken te onderzoeken :-P
Gewijzigd op 28/02/2021 19:09:41 door - Ariën -
https://www.andijkautotechniek.nl/contact/form/process-appointment1.php
Voer je het wel uit via het formulier?
Gewijzigd op 28/02/2021 19:18:57 door - Ariën -
Toevoeging op 28/02/2021 19:21:36:
Dit nu gevonden, of het juist is....
/* API Response */ _xdc_._j0q3oq && _xdc_._j0q3oq([{id: "tuwtvtuwtuvvuv", base: [345734144, 832899072], zrange: [14, 14], layer: "m@543269534",…},…])
0: {id: "tuwtvtuwtuvvuv", base: [345734144, 832899072], zrange: [14, 14], layer: "m@543269534",…}
1: {id: "tuwtvtuwtuvvwt", base: [345886720, 832879616], zrange: [14, 14], layer: "m@543269534",…}
Ik heb het idee dat dit van een heel anders script is?
Gewijzigd op 28/02/2021 19:22:33 door - Ariën -
Die werkt hier niet, omdat dat formulier niet bestaat (Not found)
Of zeg ik nu iets doms?
Kon jij natuurlijk niet weten...... Sorry
Gewijzigd op 28/02/2021 19:34:19 door Michael Claassen