Ga naar hoofdinhoud

Deelopdracht 4 - Contact page formulier

Lees eerst de Projectinformatie. Daar vind je de wireframes, de deadlines en de regels voor het hele project.

In deze deelopdracht bouw je de contactpagina uit: een contactformulier en een plek voor de kaart.

Mobiele wireframe van de contactpagina
Mobiele wireframe van de contactpagina
Desktop-wireframe van de contactpagina
Desktop-wireframe van de contactpagina

1. Lay-out​

  • Werk mobile first: eerst de mobiele versie, daarna de desktopversie.
  • Op mobiel staan de kaart en het formulier onder elkaar.
  • Op desktop staan ze naast elkaar in een grid: de kaart links, het formulier rechts.

2. Formulier​

Het formulier bevat minstens:

  • de naam van de verzender;
  • het e-mailadres van de verzender;
  • een dropdown om te kiezen wie je wilt contacteren: de websitebouwer of de verantwoordelijke van de webshop;
  • een textarea met voldoende ruimte voor de vraag;
  • een verzendknop.

Geef elk veld een label en koppel het correct aan het veld.


3. Kaart​

De echte kaart voeg je toe in deelopdracht 6. Gebruik voorlopig een afbeelding of een gekleurde div.

Zet onder de kaart een korte tekst met het adres en de openingsuren van je (fictieve) winkel.