4. Contact page - contact formulier

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 contactpagina 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

Tijdens deelopdracht 6 gaan we een kaart toevoegen aan de contactpagina met de locatie van het bedrijf. Voor nu kan je een afbeelding of gekleurde div gebruiken als tijdelijke oplossing.