Dag 13: Contact formulier

We gaan vandaag verder waar we gisteren zijn gebleven. Een beetje website kan natuurlijk niet zonder een contact pagina en bijbehorend contact formulier waarmee bezoekers direct content met ons kunnen opnemen. Na het voorwerk van gisteren kunnen we direct aan de slag om deze toe te voegen.

Daarbij zul je vandaag ook leren hoe je een module binnenin een artikel kunt plaatsen.

De Rapid Contact module instellen

Nu we de Rapid Contact extensie gisteren hebben geïnstalleerd, en ons ervan verzekerd hebben dat deze ook is geactiveerd, kunnen we deze als het goed is instellen op de Module beheer pagina.

 dag12 13 module-beheer

Ga naar Extensies > Modulebeheer. Tijdends de installatie van de extensie is er al een module van het Rapid Contact type aangemaakt. Deze is natuurlijk nog niet gepubliceerd. 

Klik op de Rapid Contact module om deze te bewerken.

dag12 14 module-bewerk

De Titel kun je allereerst veranderen in iets toepasselijks, zoals 'Contact formulier'. Zet vervolgens de Status op Gepubliceerd.

Merk op dat ik bewust geen positie opgeef. Ik wil de module namelijk alleen op een pagina tonen, en niet in een bestaande module positite.

dag12 15 opties

Ga nu naar het Opties tabblad.

Hier kunnen we allerlei zaken instellen die te maken hebben met de inhoud van het contact formulier zoals de label teksten, eventuele waarschuwingsberichten en de e-mails die verzonden worden wanneer het formulier door een bezoeker is ingevuld.

Ook is er de optie om de breedte van velden te bepalen, alsmede de positie van de labels. 

De URL parameters daar vlak onder laten we voor wat ze zijn, maar hier zou je eventueel nog naar kunnen kijken mocht het formulier niet werken.

Helemaal onderaan kun je een simpele vraag invoeren om mee te controleren of het formulier door een mens ingevuld wordt.

dag12 15 menutoewijzing

Wanneer je klaar bent met de vertaiing  ga je naar het Menutoewijzing tabblad en selecteer je de Contact pagina.

Klik nu op Opslaan & sluiten.

De contact pagina aanmaken

We moeten nog een Contact pagina en een menu-item aanmaken. Je weet natuurlijk al hoe dit moet dus beschouw dit als een kleine opfriscursus van Dag 6: Artikelen beheren en Dag 7: Menu's beheren.

dag12 15 nieuwe-pag

Ga eerst naar Inhoud > Artikelen > Nieuw artikel toevoegen.

dag12 24 loadpos

Als titel vul je iets in als "Contact" en de categorie is in dit geval "Paginas".

In het body veld vul je een geschikte tekst in, zoals je adresgegevens.

Daaronder plaats je de code {loadposition contact} (In plaats van "contact" kun je hier ook iets anders invullen, bijvoorbeeld "Binnen Artikel").

Door deze code in te voeren zorg je ervoor dat de modulepositie 'contact', en daarmee alle modules die toegewezen zijn aan deze positite, in het artikel wordt geplaatst.

Maar de modulepositie 'contact' of "Binnen Artikel" bestaat toch niet?  Klopt, maar dat is zo opgelost.

Klik op Opslaan & sluiten.

Een module positie aanmaken

Ga terug naar de Modulebeheer pagina en bewerk opnieuw de Rapid Contact module.

dag12 25 contact-nieuw-pos

Dit keer vul je bij module positie handmatig de naam van de eerder verzonnen module positie in, in mijn geval "contact". Er verschijnt nu een nieuwe link Voeg een aangepaste positie toe "contact". Klik hierop.

Dat is alles. Sla de wijziging op en het contact formulier zal nu op de contact pagina weergegeven worden.

Optioneel: Modules Anywhere

Vind je deze methode wat omslachtig dan zou je ook de Modules anywhere extensie kunnen installeren.

Deze module plaatst een "Module invoegen" knop onder een artikel waarmee je direct de gewenste module kunt invoegen in een artikel zonder eerst een module posititie te hoeven aanmaken.

dag12 22 modules-anywhere-download

Ga hiervoor naar de Modules Anywhere download pagina en klik op de Download Free knop. 

Installeer het *.zip bestand via de Extensiebeheer pagina zoals je gisteren hebt geleerd in Dag 12: Extensies installeren.

dag12 22 modules-anywhere-install

Wacht tot de upload is voltooid en de installatie is afgerond. Bewerk daarna opnieuw het Contact artikel.

dag12 22 modules-voeg-in-knop

De extra Module invoegen knop zou nu zichtbaar moeten zijn. Verwijder de {loadposition contact} code uit de tekst en klik daarna op de knop.

dag12 23 modules-voeg-in

Selecteer in de pop-up de Contact formulier module. Rechtsboven kun je eventueel eerst nog aangeven of er een titel zichtbaar moet zijn.

dag12 23 modules-ingevoegd

Een iets andere code wordt nu automatisch toegevoegd.

Het effect is voor de rest hetzelfde, maar dit is zeker wat gebruiksvriendelijker.

Het menu-item aanmaken

Voordat we het resultaat van vandaag kunnen bekijken moeten we eerst nog een menu-item voor de contact pagina toevoegen aan het hoofdmenu.

dag12 20 nieuwe-menu-item

Zoals je weet doe je dit via Menu's > Main Menu > Nieuw menu-item aanmaken.

dag12 21 nieuwe-menu-item-setup

Kies als Menu-itemtype voor Individueel artikel en kies je achter het Selecteer artikel veld voor de zojuist aangemaakte Contact pagina.

Sla het menu-item op en bezoek op de website de contact pagina.

dag12 26 contact-pagina

Een fluitje van een cent, toch?

Nu nog wel even het formulier testen, natuurlijk.

Ontvang je geen e-mail?

dag12 24 test

Controleer dan allereerst of je een e-mail adres hebt ingevuld onder het tabblad Server op de Systeem > Algemen instellingen pagina.

Slot

Dat heb je toch mooi in een paar stappen voor elkaar gekregen. En het mooie is dat je ondertussen prima in staat bent om eventueel een ander contact formulier te installeren, mocht deze niet bevallen.

Ik kan mij bijvoorbeeld voorstellen dat je een contact formulier zoekt met de mogelijkheid om extra velden toe te voegen. Zoals je gisteren hebt gezien is er gelukkig voldoende keuze.

Laatst gewijzigd op: