4. Contact page

Tot nu toe hebben we de contactpagina leeg gelaten omdat we nog niet voldoende leerstof gezien hadden om deze te kunnen bouwen. Intussen hebben jullie alle tools in handen om de contactpagina responsive uit te werken.

Algemeen

Ga responsive en mobile-first te werk: werk eerst het mobiele ontwerp uit en daarna pas de desktop versie. Gebruik een grid om de twee secties naast elkaar te plaatsen vanaf dat daar genoeg plaats voor is. Baseer je op de designs (aangepast aan jouw eigen huisstijl) in de Figma Community Page van onze les (check het hoofdstuk Wireframes bij de algemene uitleg over het project)

Formulier

We gaan een contactformulier toevoegen aan de contact pagina zodat klanten eenvoudig contact kunnen opnemen.

Bouw een formulier dat minstens de volgende elementen bevat:

• Naam van de verzender

• E-mailadres van de verzender

• Een dropdown met daarin de selectie van wié ze precies willen contacteren: de websitebouwer of de verantwoordelijke van de webshop.

• Een textarea met voldoende plek voor de vraag.

• Een submit knop.

Zorg dat elke input voorzien wordt van een label, en zorg dat de labels op een goede manier gekoppeld zijn

Kaart

Om het gebruikers gemakkelijk te maken om de fysieke locatie van onze shop te vinden gaan we ook een kaartje insluiten. We gebruiken daarvoor Leaflet. Het kaartje moet aan de volgende zaken voldoen:

• Minstens 2 locatie pointers op 2 fictieve locaties naar keuze

• Een locatie pointer in de vorm van je webshop logo