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:

<?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>';
  }
}
?>
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!
Optie 1 is in alle opzichten dan een betere oplossing.
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.

[size=xsmall]Toevoeging op 23/02/2014 14:34:10:[/size]

Ik heb voor optie 1 gekozen en het werkt prima. Bedankt!
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.
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

[quote="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.

[/quote]

vb in jquery met een leuke animatie:

<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
Dennis Stolmeijer op 23/02/2014 18:34:28


vb in jquery met een leuke animatie:

<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?
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.

Reageren