Vraag over button in contactformulier

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bart Matsko

Bart Matsko

23/02/2014 12:57:08
Quote Anchor link
Uitleg:
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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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 &eacute;&eacute;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>'
;
  }
}

?>
 
PHP hulp

PHP hulp

29/03/2024 11:35:43
 
Dennis Stolmeijer

Dennis Stolmeijer

23/02/2014 13:47:30
Quote Anchor link
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!
Gewijzigd op 23/02/2014 13:49:16 door Dennis Stolmeijer
 
Erwin H

Erwin H

23/02/2014 14:24:23
Quote Anchor link
Optie 1 is in alle opzichten dan een betere oplossing.
 
Bart Matsko

Bart Matsko

23/02/2014 14:30:11
Quote Anchor link
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!


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!
 
Dennis Stolmeijer

Dennis Stolmeijer

23/02/2014 16:58:05
Quote Anchor link
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.
 
Bart Matsko

Bart Matsko

23/02/2014 17:17:57
Quote Anchor link
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.
 
Dennis Stolmeijer

Dennis Stolmeijer

23/02/2014 18:34:28
Quote Anchor link
Bart Matsko op 23/02/2014 17:17:57:
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


vergeet niet eerst de jquery bibliotheek in te laden
Gewijzigd op 23/02/2014 18:35:26 door Dennis Stolmeijer
 
Bart Matsko

Bart Matsko

23/02/2014 23:01:00
Quote Anchor link
Dennis Stolmeijer op 23/02/2014 18:34:28:

vb in jquery met een leuke animatie:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


vergeet niet eerst de jquery bibliotheek in te laden


Hoe kom ik aan de goede jquery en waar moet ik deze code invoeren?
 
- Ariën  -
Beheerder

- Ariën -

23/02/2014 23:04:20
Quote Anchor link
http://learn.jquery.com/ ;-)
Gewijzigd op 23/02/2014 23:05:25 door - Ariën -
 
Bart Matsko

Bart Matsko

23/02/2014 23:05:30
Quote Anchor link
- Aar - op 23/02/2014 23:04:20:


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?
 
- Ariën  -
Beheerder

- Ariën -

23/02/2014 23:10:29
Quote Anchor link
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.
Gewijzigd op 23/02/2014 23:12:50 door - Ariën -
 
Bart Matsko

Bart Matsko

23/02/2014 23:27:47
Quote Anchor link
- 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.


Ik moet dus wel downloaden. Nu de volgende vraag, heb ik production of development of de map file nodig?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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
 
- Ariën  -
Beheerder

- Ariën -

23/02/2014 23:31:18
Quote Anchor link
Als je zelf niks aan de bibliotheek-bestand van jQuery gaat prutsen (wat gewoonlijk is) zou ik gewoon voor de compressed gaan.
 
Bart Matsko

Bart Matsko

24/02/2014 00:25:20
Quote Anchor link
- 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?
 
- Ariën  -
Beheerder

- Ariën -

24/02/2014 01:04:56
Quote Anchor link
Het is wel een download bestand, al dan niet geforceerd via een download-dialoogvenster.

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.
 
Erwin H

Erwin H

24/02/2014 08:47:54
Quote Anchor link
Bart Matsko op 23/02/2014 17:17:57:
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!
 
Bart Matsko

Bart Matsko

24/02/2014 09:56:18
Quote Anchor link
Erwin H op 24/02/2014 08:47:54:
Bart Matsko op 23/02/2014 17:17:57:
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

Erwin H

24/02/2014 10:48:18
Quote Anchor link
Dennis? Ik wordt vaak Edwin genoemd, maar Dennis is me nog nooit eerder overkomen :-)
 
Bart Matsko

Bart Matsko

24/02/2014 10:49:14
Quote Anchor link
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! :)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.