Vraag over button in contactformulier
Ik heb een contactformulier gemaakt op mijn pagina. Deze staat alleen niet boven aan de pagina maar onderaan. De website bestaat uit 1 lange pagina, waarin je via het menu scrolt naar beneden. Het contactformulier staat dus helemaal onderaan.
- De CMS heb ik gedownload op internet omdat ik dit nog aan het leren ben.
- Ik heb de php code van het contactformulier op phphulp gevonden.
Het probleem:
Als je op verzenden klikt werkt alles prima. Ook de fout afhandeling. Alleen staat de tekst dat hij verzonden is onderaan de pagina net als de fout afhandeling. Maar als je op de button verzenden klikt sprint hij 'natuurlijk' naar boven. Ik zou graag willen dat als je op de verzend button klikt dat hij weer terug naar het contactformulier gaat zodat je kan zien of het bericht verzonden is of dat er een fout in zat zoals vergeten je naam in te vullen.
Kan dit?
Codes:
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<?php
/*******************************
* CONTACT FORMULIER *
* contactformulier.php *
* *
* Author: Miranda Verburg *
* Datum: 10 september 2010 *
* *
* Pas het e-mail adres aan *
* bij $mail_ontv en upload *
* het naar je webserver.. *
********************************/
// E-mailadres van de ontvanger
$mail_ontv = '[email protected]'; // <<<----- voer jouw e-mailadres hier in!
// Speciale checks voor naam en e-mailadres
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
// naam controle
if (empty($_POST['name']))
$name_fout = 1;
// e-mail controle
if (function_exists('filter_var') && !filter_var($_POST['email'], 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['name']) || !empty($name_fout) || empty($_POST['email']) || !empty($email_fout) || empty($_POST['message']) || empty($_POST['subject']))) || $_SERVER['REQUEST_METHOD'] == 'GET')
{
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (!empty($name_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 éé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>
<div>
<div class="row half">
<div class="6u">
<input type="text" name="name" id="name" placeholder="Naam" />
</div>
<div class="6u">
<input type="text" name="email" id="email" placeholder="Email" />
</div>
</div>
<div class="row half">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Onderwerp" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" id="message" placeholder="Bericht"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<input type="submit" class="button" name="submit" value=" Versturen " />
<input type="submit" value="Velden leeg maken" class="button button-alt form-button-reset">
</div>
</div>
</div>
</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['name']) . "\n";
$inhoud_mail .= "E-mail adres: " . htmlspecialchars($_POST['email']) . "\n";
$inhoud_mail .= "Bericht:\n";
$inhoud_mail .= htmlspecialchars($_POST['message']) . "\n\n";
$inhoud_mail .= "Verstuurd op " . $datum . " via het IP adres " . $_SERVER['REMOTE_ADDR'] . "\n\n";
$inhoud_mail .= "===================================================\n\n";
// --------------------
// spambot protectie
// ------
// van de tutorial: http://www.phphulp.nl/php/tutorial/beveiliging/spam-vrije-contact-formulieren/340/
// ------
$headers = 'From: ' . htmlspecialchars($_POST['name']) . ' <' . $_POST['email'] . '>';
$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['subject'] = str_replace('\n', '', $_POST['subject']); // Verwijder \n
$_POST['subject'] = str_replace('\r', '', $_POST['subject']); // Verwijder \r
$_POST['subject'] = str_replace("\"", "\\\"", str_replace("\\", "\\\\", $_POST['subject'])); // Slashes van quotes
if (mail($mail_ontv, $_POST['subject'], $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. We zullen zo spoedig mogelijk contact met u opnemen.</p>';
}
else
{
echo '<h1>Het contactformulier is niet verzonden</h1>
<p><b>Onze excuses.</b> Het contactformulier kon niet verzonden worden.</p>';
}
}
?>
/*******************************
* CONTACT FORMULIER *
* contactformulier.php *
* *
* Author: Miranda Verburg *
* Datum: 10 september 2010 *
* *
* Pas het e-mail adres aan *
* bij $mail_ontv en upload *
* het naar je webserver.. *
********************************/
// E-mailadres van de ontvanger
$mail_ontv = '[email protected]'; // <<<----- voer jouw e-mailadres hier in!
// Speciale checks voor naam en e-mailadres
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
// naam controle
if (empty($_POST['name']))
$name_fout = 1;
// e-mail controle
if (function_exists('filter_var') && !filter_var($_POST['email'], 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['name']) || !empty($name_fout) || empty($_POST['email']) || !empty($email_fout) || empty($_POST['message']) || empty($_POST['subject']))) || $_SERVER['REQUEST_METHOD'] == 'GET')
{
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (!empty($name_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 éé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>
<div>
<div class="row half">
<div class="6u">
<input type="text" name="name" id="name" placeholder="Naam" />
</div>
<div class="6u">
<input type="text" name="email" id="email" placeholder="Email" />
</div>
</div>
<div class="row half">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Onderwerp" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" id="message" placeholder="Bericht"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<input type="submit" class="button" name="submit" value=" Versturen " />
<input type="submit" value="Velden leeg maken" class="button button-alt form-button-reset">
</div>
</div>
</div>
</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['name']) . "\n";
$inhoud_mail .= "E-mail adres: " . htmlspecialchars($_POST['email']) . "\n";
$inhoud_mail .= "Bericht:\n";
$inhoud_mail .= htmlspecialchars($_POST['message']) . "\n\n";
$inhoud_mail .= "Verstuurd op " . $datum . " via het IP adres " . $_SERVER['REMOTE_ADDR'] . "\n\n";
$inhoud_mail .= "===================================================\n\n";
// --------------------
// spambot protectie
// ------
// van de tutorial: http://www.phphulp.nl/php/tutorial/beveiliging/spam-vrije-contact-formulieren/340/
// ------
$headers = 'From: ' . htmlspecialchars($_POST['name']) . ' <' . $_POST['email'] . '>';
$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['subject'] = str_replace('\n', '', $_POST['subject']); // Verwijder \n
$_POST['subject'] = str_replace('\r', '', $_POST['subject']); // Verwijder \r
$_POST['subject'] = str_replace("\"", "\\\"", str_replace("\\", "\\\\", $_POST['subject'])); // Slashes van quotes
if (mail($mail_ontv, $_POST['subject'], $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. We zullen zo spoedig mogelijk contact met u opnemen.</p>';
}
else
{
echo '<h1>Het contactformulier is niet verzonden</h1>
<p><b>Onze excuses.</b> Het contactformulier kon niet verzonden worden.</p>';
}
}
?>
1. D.m.v een hashtag in je url die scrollt het "id" van je form
vb:
1. action="' . $_SERVER['REQUEST_URI'] . '/#form"
2. <form id="form">...</form>
2. D.m.v javascript/jquery link je een gebruiker na elke $_POST['request'] naar de juist positie
$( "form" ).scrollTop( 400 ); //400 is je positie
mijn voorkeur gaat naar oplossing 2 omdat je dan niet "hacky" hoeft te doen met de url. Daarentegen is oplossing 1 makkelijker.
Succes!
Gewijzigd op 23/02/2014 13:49:16 door Dennis Stolmeijer
Denis Stolmeijer op 23/02/2014 13:47:30:
Er zijn zo gauw 2 oplossingen waar ik aan denk:
1. D.m.v een hashtag in je url die scrollt het "id" van je form
vb:
1. action="' . $_SERVER['REQUEST_URI'] . '/#form"
2. <form id="form">...</form>
2. D.m.v javascript/jquery link je een gebruiker na elke $_POST['request'] naar de juist positie
$( "form" ).scrollTop( 400 ); //400 is je positie
mijn voorkeur gaat naar oplossing 2 omdat je dan niet "hacky" hoeft te doen met de url. Daarentegen is oplossing 1 makkelijker.
Succes!
1. D.m.v een hashtag in je url die scrollt het "id" van je form
vb:
1. action="' . $_SERVER['REQUEST_URI'] . '/#form"
2. <form id="form">...</form>
2. D.m.v javascript/jquery link je een gebruiker na elke $_POST['request'] naar de juist positie
$( "form" ).scrollTop( 400 ); //400 is je positie
mijn voorkeur gaat naar oplossing 2 omdat je dan niet "hacky" hoeft te doen met de url. Daarentegen is oplossing 1 makkelijker.
Succes!
Bedankt voor het reageren, oplossing 1 klinkt eigenlijk wel heel logisch. Mijn vraag is waarom jou voorkeur uit gaat naar oplossing 2 en wat 'hacky' is? Dan kan ik mijn keuze maken; optie 1 of optie 2.
Toevoeging op 23/02/2014 14:34:10:
Ik heb voor optie 1 gekozen en het werkt prima. Bedankt!
Denis Stolmeijer op 23/02/2014 16:58:05:
Hack is misschien een verkeerde woordkeuze maar ik zou mijn url na een form submit niet willen aanpassen om de gebruiker naar een bepaalde plek in de pagina te sturen, vind ik persoonlijk niet mooi.
Daar heb je gelijk in, zat ik ook even na te kijken. Er staat namelijk nu in de url: 'index#contact' dat vind ik persoonlijk ook niet mooi.
Hoe pas ik methode 2 toe in praktijk, ben nog niet goed met javascript.
Bart Matsko op 23/02/2014 17:17:57:
Daar heb je gelijk in, zat ik ook even na te kijken. Er staat namelijk nu in de url: 'index#contact' dat vind ik persoonlijk ook niet mooi.
Hoe pas ik methode 2 toe in praktijk, ben nog niet goed met javascript.
Denis Stolmeijer op 23/02/2014 16:58:05:
Hack is misschien een verkeerde woordkeuze maar ik zou mijn url na een form submit niet willen aanpassen om de gebruiker naar een bepaalde plek in de pagina te sturen, vind ik persoonlijk niet mooi.
Daar heb je gelijk in, zat ik ook even na te kijken. Er staat namelijk nu in de url: 'index#contact' dat vind ik persoonlijk ook niet mooi.
Hoe pas ik methode 2 toe in praktijk, ben nog niet goed met javascript.
vb in jquery met een leuke animatie:
Code (php)
1
2
3
4
5
2
3
4
5
<script>
$(function() {
$('html, body').animate({scrollTop:1000},'50'); //1000 is je positie in pixel vanaf de bovenkant en 50 is de snelheid hoe snel hij naar beneden moet scrollen
});
<script>
$(function() {
$('html, body').animate({scrollTop:1000},'50'); //1000 is je positie in pixel vanaf de bovenkant en 50 is de snelheid hoe snel hij naar beneden moet scrollen
});
<script>
vergeet niet eerst de jquery bibliotheek in te laden
Gewijzigd op 23/02/2014 18:35:26 door Dennis Stolmeijer
Dennis Stolmeijer op 23/02/2014 18:34:28:
vb in jquery met een leuke animatie:
vergeet niet eerst de jquery bibliotheek in te laden
vb in jquery met een leuke animatie:
Code (php)
1
2
3
4
5
2
3
4
5
<script>
$(function() {
$('html, body').animate({scrollTop:1000},'50'); //1000 is je positie in pixel vanaf de bovenkant en 50 is de snelheid hoe snel hij naar beneden moet scrollen
});
<script>
$(function() {
$('html, body').animate({scrollTop:1000},'50'); //1000 is je positie in pixel vanaf de bovenkant en 50 is de snelheid hoe snel hij naar beneden moet scrollen
});
<script>
vergeet niet eerst de jquery bibliotheek in te laden
Hoe kom ik aan de goede jquery en waar moet ik deze code invoeren?
- Aar - op 23/02/2014 23:04:20:
www.jquery.com ;-)
Ja daar was ik net ook, maar is het dan de bedoeling dat ik klik op de button 'Download jQuery' knop? Hoe kom ik dan aan het goede jQuery bestand?
Of je kan de jQuery's CDN gebruiken, zodat je hem niet zelf meer hoeft te downloaden.
Het nadeel is dat die weer trager kan laden omdat je afhankelijk bent van een andere partij.
Gewijzigd op 23/02/2014 23:12:50 door - Ariën -
- Aar - op 23/02/2014 23:10:29:
Door logisch te kijken welke jQuery je precies wilt. Ikzelf gebruik de 1.x-versietak.
Of je kan de jQuery's CDN gebruiken, zodat je hem niet zelf meer hoeft te downloaden.
Het nadeel is dat die weer trager kan laden omdat je afhankelijk bent van een andere partij.
Of je kan de jQuery's CDN gebruiken, zodat je hem niet zelf meer hoeft te downloaden.
Het nadeel is dat die weer trager kan laden omdat je afhankelijk bent van een andere partij.
Ik moet dus wel downloaden. Nu de volgende vraag, heb ik production of development of de map file nodig?
Code (php)
1
2
3
4
5
2
3
4
5
Download the compressed, production jQuery 1.11.0
Download the uncompressed, development jQuery 1.11.0
Download the map file for jQuery 1.11.0
Download the uncompressed, development jQuery 1.11.0
Download the map file for jQuery 1.11.0
- Aar - op 23/02/2014 23:31:18:
Als je zelf niks aan de bibliotheek-bestand van jQuery gaat prutsen (wat gewoonlijk is) zou ik gewoon voor de compressed gaan.
Het is dus helemaal geen 'dowload' bestand? Ik kan die voor elke jQuery gebruiken lijkt mij?
Je moet het uiteindelijk toch op de server zetten. Ik raad aan om in iede rgeval de nieuwste versie uit een versie-tak te kiezen. Ik zelf zou versie 1.x adviseren aangezien ik die nog gebruik.
Bart Matsko op 23/02/2014 17:17:57:
Daar heb je gelijk in, zat ik ook even na te kijken. Er staat namelijk nu in de url: 'index#contact' dat vind ik persoonlijk ook niet mooi.
Hoe pas ik methode 2 toe in praktijk, ben nog niet goed met javascript.
Denis Stolmeijer op 23/02/2014 16:58:05:
Hack is misschien een verkeerde woordkeuze maar ik zou mijn url na een form submit niet willen aanpassen om de gebruiker naar een bepaalde plek in de pagina te sturen, vind ik persoonlijk niet mooi.
Daar heb je gelijk in, zat ik ook even na te kijken. Er staat namelijk nu in de url: 'index#contact' dat vind ik persoonlijk ook niet mooi.
Hoe pas ik methode 2 toe in praktijk, ben nog niet goed met javascript.
Slechte optie:
1) Je gaat nu een hoop extra zooi invoegen om iets te doen wat erg simpel is (overkill dus)
2) Naast die extra javascript zal je ook nog een extra (hidden) input moeten toevoegen omdat javascript anders weer niet weet dat er een verplaatsing noodzakelijk is
3) Methode werkt al niet meer als mensen javascript uit hebben staan
4) De verplaatsing in je document zal pas gebeuren als alles is ingeladen in de browser, pas dan kan de javascript code worden uitegevoerd. grote kans dat het een lange vertraging is, wat je niet hebt als je het via optie 1 doet
5) Gebruiken maken van de hash geeft ook de mogelijkheid om vanuit een andere pagina te linken, of zelfs om de gebruiker zelf een link op te slaan, de javascript methode staat dat niet toe
Maar goed, ga vooral lekker een dag lopen klooien om een minder nette oplossing te verzinnen voor iets wat je in 5 seconden beter had kunnen doen.
Keep It Simple!
Erwin H op 24/02/2014 08:47:54:
Slechte optie:
1) Je gaat nu een hoop extra zooi invoegen om iets te doen wat erg simpel is (overkill dus)
2) Naast die extra javascript zal je ook nog een extra (hidden) input moeten toevoegen omdat javascript anders weer niet weet dat er een verplaatsing noodzakelijk is
3) Methode werkt al niet meer als mensen javascript uit hebben staan
4) De verplaatsing in je document zal pas gebeuren als alles is ingeladen in de browser, pas dan kan de javascript code worden uitegevoerd. grote kans dat het een lange vertraging is, wat je niet hebt als je het via optie 1 doet
5) Gebruiken maken van de hash geeft ook de mogelijkheid om vanuit een andere pagina te linken, of zelfs om de gebruiker zelf een link op te slaan, de javascript methode staat dat niet toe
Maar goed, ga vooral lekker een dag lopen klooien om een minder nette oplossing te verzinnen voor iets wat je in 5 seconden beter had kunnen doen.
Keep It Simple!
Bart Matsko op 23/02/2014 17:17:57:
Daar heb je gelijk in, zat ik ook even na te kijken. Er staat namelijk nu in de url: 'index#contact' dat vind ik persoonlijk ook niet mooi.
Hoe pas ik methode 2 toe in praktijk, ben nog niet goed met javascript.
Denis Stolmeijer op 23/02/2014 16:58:05:
Hack is misschien een verkeerde woordkeuze maar ik zou mijn url na een form submit niet willen aanpassen om de gebruiker naar een bepaalde plek in de pagina te sturen, vind ik persoonlijk niet mooi.
Daar heb je gelijk in, zat ik ook even na te kijken. Er staat namelijk nu in de url: 'index#contact' dat vind ik persoonlijk ook niet mooi.
Hoe pas ik methode 2 toe in praktijk, ben nog niet goed met javascript.
Slechte optie:
1) Je gaat nu een hoop extra zooi invoegen om iets te doen wat erg simpel is (overkill dus)
2) Naast die extra javascript zal je ook nog een extra (hidden) input moeten toevoegen omdat javascript anders weer niet weet dat er een verplaatsing noodzakelijk is
3) Methode werkt al niet meer als mensen javascript uit hebben staan
4) De verplaatsing in je document zal pas gebeuren als alles is ingeladen in de browser, pas dan kan de javascript code worden uitegevoerd. grote kans dat het een lange vertraging is, wat je niet hebt als je het via optie 1 doet
5) Gebruiken maken van de hash geeft ook de mogelijkheid om vanuit een andere pagina te linken, of zelfs om de gebruiker zelf een link op te slaan, de javascript methode staat dat niet toe
Maar goed, ga vooral lekker een dag lopen klooien om een minder nette oplossing te verzinnen voor iets wat je in 5 seconden beter had kunnen doen.
Keep It Simple!
Bedankt voor je reactie Erwin. Je hebt een goed punt, ik laat het bij de simpele oplossing die ik al had toegepast.
Topic gesloten :)
Gewijzigd op 24/02/2014 10:49:37 door Bart Matsko
Erwin H op 24/02/2014 10:48:18:
Dennis? Ik wordt vaak Edwin genoemd, maar Dennis is me nog nooit eerder overkomen :-)
Ha! Verkeerd gekeken boven aan de quote. Mijn excuses! :)