Een contactpagina maken.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

Hier bouw je een contactpagina: een kaart van je adres, drie manieren om je te bereiken elk met een pictogram, en een contactformulier. Gebruik hem voor de pagina waarnaar je menu linkt als “Contact”. Om alleen een formulier in een andere pagina te zetten, volg je in plaats daarvan Formulieren toevoegen aan pagina’s.

De video bouwt de contactpagina van een gemeentebestuur.

Voordat je begint

  • Je rol heeft de permissie Bewerken met DXPR Builder.
  • Je contactformulier bestaat als blok, bijvoorbeeld een open webformulier gemaakt met de Webform-module.
  • De pagina is open in de builder. Ga voor een nieuwe naar Inhoud > Inhoud toevoegen > Landingspagina (/node/add/landing_page) en klik op Opslaan.
  • Nieuwe elementen belanden bovenaan hun sectie of kolom. Voeg de elementen van een kolom in omgekeerde volgorde toe, of sleep ze daarna op hun plek.

Stap 1: de kaart toevoegen

  1. Klik op Add Elements op de lege pagina en kies Sectie op het tabblad Lay-out.
  2. Klik op + op de sectie en kies Kaart op het tabblad Inhoud.
  3. Typ je Adres, zet Kaarthoogte op 400 en klik op Opslaan.

De kaart voegt Google Maps in, gecentreerd op het adres.

Stap 2: de contactgegevens toevoegen

  1. Beweeg over de sectie en klik op Sectie hieronder toevoegen. Open More > Settings, kies Align text center onder HTML-klassen, daarna een lichtgrijze Achtergrond in het paneel Stijl. Klik op Opslaan.
  2. Klik op + op de sectie en kies Rij; deze komt met twee gelijke kolommen. Klik op het rasterpictogram (Kolomindeling), kies de preset 1/3 + 1/3 + 1/3 en klik op Opslaan.
  3. Klik op + in de eerste kolom en kies Tekst. Typ “Bezoek ons” als Kop 3, voeg het adres en de openingstijden toe, en klik op Opslaan.
  4. Klik op + in dezelfde kolom en kies Pictogram; dit belandt boven de tekst. Kies de set Font Awesome Free Solid, zoek naar location-dot en klik op het pictogram. Zet Size op Extra Large (2x) en klik op Opslaan.
  5. Herhaal in de tweede kolom met “Bel ons” en het pictogram phone, en in de derde met “Mail ons” en het pictogram envelope.

Kies dezelfde Size voor alle drie de pictogrammen zodat de rij uitlijnt.

Stap 3: het formulier toevoegen

  1. Voeg een derde sectie toe met Sectie hieronder toevoegen en geef hem de klasse Align text center.
  2. Klik op + op de sectie en open het tabblad Drupal-blokken.
  3. Kies het blok van je contactformulier en klik op Opslaan in de instellingendialoog; het formulier verschijnt in de sectie.
  4. Klik opnieuw op + op de sectie en kies Tekst; deze belandt boven het formulier. Typ “Stuur ons een bericht” als Kop 2, voeg één regel toe en klik op Opslaan.

Formulieren gemaakt bij Structuur > Contactformulieren (/admin/structure/contact) hebben geen blok in Drupal-core. De contributed module Contact Block voegt een Contactblok toe aan hetzelfde tabblad.

Stap 4: opslaan en vooraf bekijken

  1. Klik op Opslaan op de werkbalk van de builder.
  2. Open het weergavemenu (het oogpictogram) en kies Voorvertoning.

Verder gaan

Niet getoond in de video:

  • Tikken om te bellen: selecteer het telefoonnummer in de tekst, klik op de linkknop op de werkbalk en typ tel:+31104001234
  • Klikken om te mailen: selecteer het adres en link het aan mailto:info@example.com
  • Elk blok: het tabblad Drupal-blokken voegt de blokken van je site in, zoals zoekformulieren, nieuwsbriefaanmeldingen en aangepaste blokken

Wat je ziet

Een kaart van 400 pixels van je adres vult de bovenkant van de pagina. Eronder toont een grijze strook drie gecentreerde kolommen, elk met een pictogram, een kop en je gegevens. Het formulier sluit de pagina af onder de gecentreerde kop “Stuur ons een bericht”.

Als je de pagina niet ziet zoals getoond

  • De kaart toont de verkeerde plek. Google Maps zoekt op het adres zoals getypt. Voeg de postcode, stad en het land toe bij Adres en sla opnieuw op.
  • Je formulier staat niet op het tabblad Drupal-blokken. De builder toont alleen open webformulieren, en core-contactformulieren hebben de module Contact Block nodig. Zet de status van het webformulier op Open bij Structuur > Webformulieren (/admin/structure/webform).
  • De pictogrammen hebben verschillende groottes. Elk pictogram behoudt zijn eigen Size. Open de instellingen van elk pictogram en kies dezelfde.
  • Je wijzigingen zijn weg na een herladen. Je verliet de pagina voordat je op Opslaan op de werkbalk van de builder klikte. Als Opslaan een fout toont, zie Wijzigingen worden niet opgeslagen.

Wat nu?