Contactformulier met navigatieknoppen

[Nside]

Graag wil ik een contactformulier maken die kan lopen over verschillende pagina's.
Hier bedoel ik mee dat ik een formulier wil met een "Volgende"- en "Vorige" knop erin verwerkt. Het is namelijk geen echt contactformulier maar een formulier met veel vragen. Zoveel, dat het alleen overzichtelijk blijft als er "Volgende"- en "Vorige" knoppen in voorkomen.

Ik probeerde een plugin (voor in Wordpress) ervoor te zoeken waarmee dat kan maar ik heb tot nu toe niks gevonden.
Weten jullie misschien wel een goeie plugin daarvoor, waarmee ik zulke navigatieknoppen kan maken?
Zo niet, is er een andere manier hoe ik zo een formulier met navigatie kan maken?

 

[Beetsma]

Hoi

Wil je die antwoorden d.mv selectievakjes?
Wil je de antwoorden ook naar je mail o.i.d opgestuurd krijgen? of moet het juist worden weergeven op de webpagina?

 

[Nside]

Ik wil de antwoorden inderdaad naar mijn mail opgestuurd krijgen.
Verder is het niet de bedoeling dat het zichtbaar is op de website.
En ik wil er dus graag een "volgende"- en "vorige" knop bij. Zodat het formulier niet eindeloos wordt.

 

[csshunter]

Hoi Nside,
Als je naar een echte "volgende pagina" op de site gaat, zouden de ingevulde gegevens van de eerdere pagina al opgezonden moeten worden, want op de nieuwe pagina zijn de eerdere gegevens niet beschikbaar (tenzij je met cookies o.i.d. gaat werken).
Dan zou je dus antwoorden per pagina binnenkrijgen, of méér: als iemand op Vorige klikt en z'n invullingen alsnog verandert.
Dat lijkt me niet zo handig.
En het is ook een stuk lastiger om alles op volledigheid en/of consistentie te checken, voordat verzonden kan worden.

Ik zit te prakkizeren dat je dan toch het complete formulier met alles er op en er aan op één webpagina moet hebben, zodat het uiteindelijk in één klap verzonden kan worden.

Dan zou je de inhoud kunnen opdelen in blokken (de "pagina's"):

<form ...>
    <div id="vragenblok1">
        <input ...>
        ...enz.
    </div>
    <div id="vragenblok2">
        <input ...>
        ...enz.
    </div>
    <div id="vragenblok3">
        <input ...>
        ...enz.
    </div>
</form>

In de css laat je bij het openen van de pagina alleen het eerste blok zien:

#vragenblok1 {
    display: block;
    }
#vragenblok2 {
    display: none;
    }
#vragenblok3 {
    display: none;
    }

Vervolgens zet je onderaan in het eerste blok een klikbare knop (of image) "Volgende" met een onclick-opdracht en een bladwijzer (om het nieuwe blok bovenaan het scherm te laten beginnen):

<a href="#vragenblok2" onclick="show(2)">Volgende</a>

Op dezelfde manier bovenaan resp. onderaan het tweede blok (enz.):

<a href="#vragenblok1" onclick="show(1)">Vorige</a>
<a href="#vragenblok3" onclick="show(3)">Volgende</a>

De javascript-functie show(n) laat je dan steeds de andere blokken verbergen:
[JS]<script type="text/javascript">
function show(n){
// eerst alle blokken uitzetten:
document.getElementById('vragenblok1').style.display="none";
document.getElementById('vragenblok2').style.display="none";
document.getElementById('vragenblok3').style.display="none";
// en dan aanzetten welke gevraagd wordt:
document.getElementById('vragenblok'+n+'').style.display="block";
}
</script>[/JS]
Is dat wat?

Met vriendelijke groet,
CSShunter
_______
PS: Op deze manier is het formulier nog steeds toegankelijk voor mensen met een pure tekstbrowser (die geen css en javascript heeft): dan wordt het gewoon de lange lijst.

 

[grumbkow]

Ik heb momenteel geen tijd om uitgebreid een verhaal achter te laten, maar je kunt makkelijker werken met PHP Sessions waar elke vraag in wordt opgeslagen totdat er op versturen wordt geklikt.

http://www.php.net/sessions