Een aanmeldformulier op de website zetten

Hoe kan ik een aanmeld- of bestelformulier op de website zetten? #

Een aanmeldformulier of shop-bestelformulier bestaat uit een fragment met HTML-code dat je moet integreren in de HTML-code van een pagina op je website. Deze tekst behandelt lijstmanager-formulieren maar is ook van toepassing op shoppingcart bestelformulieren.

Gebruik je WordPress? #

Gebruik je WordPress voor je site en wil je een formulier toevoegen? Je kunt dan of het formulier handmatig toevoegen of onze WordPress plugin gebruiken. Let op: deze laatste mogelijkheid heb je alleen als je de Wordpress.org implementatie gebruikt! (Vraag dit na bij je website beheerder als je dat niet weet). Als je je site host bij Wordpress.com kun je de plugin niet gebruiken. Je moet dan de HTML code gebruiken en die op een landingspagina zetten waarnaar je op je website naar verwijst. Lees hierover verder onder het kopje ‘Wordpress.com sites’. Meer informatie over de Wordpress plugin vindt je hieronder.

Gebruik je Divi? #

Je kunt dan een module toevoegen in je pagina waarin het formulier wordt getoond. Open de pagina en voeg op de plek waar het formulier moet komen te staan een module toe. In het popupscherm waar je een module kunt kiezen, klik je op de module “</> Code”. Kopieer de HTML code van het formulier in Autorespond (die vind je in de formuliereditor onder tabblad “Website” onder de sectie “Opgemaakte code”) en plaats deze in het ‘Content’ veld. Klik vervolgens onderin op “Opslaan en verlaten” en bewaar vervolgens de pagina. Het formulier is nu toegevoegd aan de pagina! Zie ook https://www.elegantthemes.com/documentation/divi/code/

Gebruik je OptinMonster? #

OptinMonster is een WordPress plugin om formulieren te maken. OptinMonster kan ook Autorespond-formulieren tonen. Je hebt bij de lijstmanager de ‘kale html’ nodig (kijk bij tabblad Formulier, en klik op de optie Website, kies voor de “Kale code” optie) en zet die in OptinMonster op de plek bij ‘configure’. Uiteraard moet OptinMonster wel geinstalleerd zijn in je WordPress omgeving. Let op: verwijder in de kale HTML het gedeeelte: target=”_self’ voordat je het gebruikt in OptinMonster!

Heb je Wordpress.org en wil je de plugin gebruiken? Lees dan door. Wil je het formulierhandmatig installeren? Lees dan door bij de sectie ‘Formulier handmatig installeren in WordPress’.

WordPress plugin gebruiken #

Ga naar menu Lijstmanagers en open de betreffende lijstmanager. Ga naar tab Formulier, en klik op het sub-tabblad Website, en kies voor ‘WordPress’. Dit is een generieke WordPress plugin waarmee je een of meerdere formulieren in een widget of pagina op je site kan plaatsen. Sla het wordpress-plugin.zip bestand op op je PC. Log dan in op je Wordpress administratie.

1. Ga naar linker menu ‘Plugins | Add new’
2. Kies voor de optie ‘Upload’
3. Upload het .zip bestand en klik op ‘Install Now’
4. Ga dan naar linker menu ‘Instellingen’. Daar zie je een menu-optie ‘Autorespond’. Klik daar op en volg de aanwijzingen.
5. Als de plugin geactiveerd is, kun je op elke gewenste plek in je site een formulier opnemen.

In Wordpress kun je via het menu Instellingen | Autorespond, de formulieren terugvinden, de lijst van formulier verversen en een formulier toevoegen voor op de site. Nadat je onderin op ‘Toevoegen’ hebt geklikt, komt het form,ulier in de lijst erboven te staan. Er staat ook een code bij omgeven door accolades, bijvoorbeeld “{123456}”. Deze code, inclusief de accolades, plaats je op een Wordpress pagina waar het formulier moet komen te staan. Dat is alles!

Formulier handmatig installeren in WordPress #

Ga naar menu Lijstmanagers en open de betreffende lijstmanager. Ga naar tab Formulier, en klik op de optie Website. Kies voor de optie “Opgemaakte code”. Hier selecteer je de code (CTRL-A op de PC of Cmd-A op de Apple) en kopieert die naar het klembord (CTRL-C op de PC of Cmd-C op de Apple). Log dan in op je Wordpress administatie. (De aanwijzingen hieronder zijn gebaseerd op een Engelstalige versie 3.2.0.)

1. Ga naar linker menu ‘Appearance | Widgets’
2. In de middelste kolom zie je de ‘Text’ widget (‘Arbitrary text or HTML’)
3. Versleep die widget naar de rechter kolom onder de kop ‘Sidebar 1’
4. Je kunt nu de widget ‘openklappen’ en HTML content toevoegen. Plaats hier de formuliercode (CTRL-V op de PC of Cmd-V op de Apple)
5. Klik op ‘Save’ en controleer of het formulier verschijnt op je website

Let op: Gebruik je de Wordpress Visual Composer met een tekstblok? Dat werkt niet goed samen met een Autorespond formulier, zorg in dat geval dat je een blok aanmaakt van type “Raw HTML” en zet dar de formuliercode in.

Gebruik je Joomla? #

Er zijn twee manieren om een Autorespond formulier op te nemen in Joomla:
A. Als onderdeel van de content, dus op pagina
B. Als een apart blokje

In allebei de gevallen moet je een en ander kopieren vanuit de autorespond omgeving. Zorg dus dat die openstaat op de juiste lijstmanager.

A. Als onderdeel van de content, dus op pagina

Hiervoor gebruik je de plugin. Je hebt per groep en dus ook per formulier een plugin nodig.

• Download eerst de plugin via de optie “Website”, sectie “Joomla”. Download de Joomal 2.5+ plugin;
• Installeer de zip file via Extentiebeheer;
• De plugin verschijnt nu in de lijst van plugins onder de naam van de lijstmanager. In dit voorbeeld dus “Aanmelding nieuwsbrief”;
• Kopieer nu de kale html code uit het schermpje onder de knop “toon de kale html code”;
• Open de plugin en plak de kale html code daarin;
• Neem de code over die in de plugin staat {formulier1234}, die heb je straks nodig;
• Activeer de plugin;
• Plaats in het artikel waar je het inschrijfformulier wilt hebben de {formulier1234} code.

Let op! Als je wijzigingen aanbrengt in het formulier moet je hem dus opnieuw kopiëren.

B. Als apart blokje

Als je het formulier in een aparte module wilt plaatsen:

• maak dan een nieuwe module aan via Extenties – Modulebeheer – Nieuw en kies voor “Aangepaste HTML”;
• Kopieer nu de kale html code uit het schermpje onder de knop “toon de kale html code”;
• Plak de kale html code in de module;
• Kies een positie en activeer de module;

Gebruik je Joomla 2 of hoger? #

Gebruik dan de 2.5+ plugins. Met de ‘2.5+ page-plugin’ kun je makkelijk vanuit je content items refereren aan het formulier. Je hoeft dan alleen een macro-code op te nemen in een Joomla artikel. De plugin zorgt er dan voor dat op die plek het formulier verschijnt.

Wil je het formulier als widget gebruiken binnen Joomla, gebruik dan de ‘2.5+ widget’. Stappen:

1. Download de betreffende plugin vanaf het lijstmanagerscherm (tab Formulier, optie ‘Website’, sectie ‘Joomla’)
2. Upload de plugin in Joomla via de Extension manager
3. Bij de page-plugin: Open de plugin via de plugin manager en kopieer eenmalig de HTML code vanuit Autorespond in het Formulier-veld.
4. Bij de widget-plugin: Open de module via de module manager en kopieer eenmalig de HTML code vanuit Autorespond in het Formulier-veld. Geef ook de positie aan waar de widget moet komen te staan en zet de status op Published.
5. Bij de page-plugin: kopieer of onthoud de macro-code die wordt getoond bij installatie (je kan dit altijd later terugvinden) en zet de plugin op actief (via de lijst van plugins)
6. Bij de page-plugin: Zet de macro-code omgeven door accolades in de tekst waar het formulier moet komen

Bestaand formulier aanpassen in Joomla (versie 2 en hoger) #

Eerst ga je de formuliercode kopieren uit Autorespond. Open de betreffende lijstmanager en ga naar tabblad Formulier. Daar klik je bovenin bij ‘Website’ de optie ‘Kale code’ aan. De getoonde code selecteer je, en kopieer je naar het klembord (type CTRL-A en dan CTRL-C).

Log nu in in Joomla. Ga naar menu Extensies, Modulebeheer. Zoek in de lijst naar de juiste module en open die. Ga nu naar de tweede sectie (in de NL versie is de titel ‘Aangepaste inhoud’). Bij de tekst-editor staan allemaal knopjes. Klik op het vijfde knopje van links (met titel ‘Source Code Editor’) in de derde rij van boven. Zoek naar het stuk dat begint met “<form action” en eindigt met “</form>”. Haal dit weg en klik CTRL-V zodat de tekst van het klembord hier wordt geplaatst.
Klik rechts bovenaan op “Opslaan en sluiten” en het gewijzigde formulier is bewaard!

Geen WordPress of Joomla? #

Ga naar menu Lijstmanagers en open de betreffende lijstmanager. Ga naar tab Formulier, en klik op de knop Website. Kies voor de optie “Opgemaakte code”. Daar selecteer je de code en kopieert die naar het klembord (CTRL-C op de PC of Cmd-C op de Apple).
Log nu in op het administratie-programma van je website, of open je FTP programma als je jouw sitepagina’s via FTP upload naar de server. Plaats de formuliercode op de plek in je webpagina waar het formulier moet komen te staan. Heb je geen verstand van HTML? Dan kan je website-beheerder je hierbij helpen of dit voor je doen.

Wordpress.com sites #

Het probleem bij WordPress.com is dat het niet is toegestaan om formulieren te plaatsen waarbij de verwerking ergens anders plaatsvindt (in ons geval dus op de Autorespond server). De oplossing is dat je een link op je site zet die verwijst naar een pagina waar het formulier op staat. Deze ‘landingspagina’ maak je aan op Autorespond. Maar eerst hebben we de formuliercode nodig.

Ga naar menu Lijstmanagers en open de betreffende lijstmanager. Ga naar tab Formulier, en klik op de knop Website. Kies voor de optie “Autorespond pagina”. Nu wordt een nieuwe landingspagina aangemaakt in je administratie (of een) bestaande landingspagina wordt bijgewerkt).

Ga naar menu Content | Landingspagina’s en zoek de betreffende rij op. Hier kun je rechts in het blauw de URL zien die naar de landingspagina wijst. Deze URL kun je nu gebruiken om de link te maken in je Wordpress.com pagina waarmee mensen zich kunnen aanmelden.

Gebruik je Leadpages? #

Let bij het instellen van de velden er op dat er in het Autorespond formulier een extra veld staat dat niet zichtbaar voor de gebruiker is en dat wordt gebruikt om spammers te detecteren. De naam van dit veld is ’emailaddress’ en dat veld moet je NIET gebruiken! Normaliter zie je in het formulier m,als je het op je website plaatst, dat veld niet en heb je er geen last van. Maar het veld verschijnt wel als je in Leadpages de velden definieert. Let er dus op dat jhet alleen het veld gebruikt met de naam “relation.email”. Dat is het enige juiste veld!