Ga naar hoofdinhoud

Widget: Form Only Modus

Je kunt de widget gebruiken in formulier-only modus. Dit betekent dat alleen het inschrijfformulier wordt getoond, zonder de rest van de widget interface. Dit is handig wanneer je direct naar het inschrijfformulier voor een specifieke cursus wilt linken via URL parameters.

Quick Start​

Volg deze stappen om de Cursad widget in form-only modus te gebruiken:

  1. Voeg het JavaScript-bestand toe aan je HTML-pagina.
  2. Zet de base href in de body.
  3. Plaats de widget met mode="form" parameter.
  4. Gebruik URL parameters om direct naar het juiste inschrijfformulier te navigeren.

Voor gedetailleerde instructies over de algemene installatiestappen, zie de Widget Overzichtspagina.

Installatie Stappen​

Stap 1: JavaScript Toevoegen​

Voeg deze regel direct voor de sluitende </body>-tag toe:

<script src="https://demowebsite.cursadtestweb.nl/myenv/my-env-widget.js"></script>

Stap 2: Base href Toevoegen​

Voeg deze regel toe binnen de <body>:

<base href="PAGINAURL">

Voorbeeld: mijn-omgeving wanneer de widget zich op deze URL bevindt.

Stap 3: Widget Plaatsen met Form Only Modus​

Voeg de widget toe met de mode="form" parameter:

<app-entry 
  mode="form"
  data-theme="light" 
  style="--color-primary: #3e80c0" 
  configuration="AANVRAGEN-BIJ-CURSAD" 
  api-url="https://apitest.cursadtestweb.nl/v4/api" 
  cursadweb-url="https://ontwikkel.cursadtestweb.nl">
</app-entry>

Stap 4: Rewrite-regel Instellen (alleen voor WordPress)​

Voeg deze code toe aan functions.php van je childtheme:

function customcursadrewrite() {
    $singlepageapppageid = PAGINAID;
    add_rewrite_rule('mijn-omgeving/?', 'index.php?page_id=' . $singlepageapppageid, 'top');
}
add_action('init', 'customcursadrewrite');
Permalinks vernieuwen

Ga in WordPress naar Instellingen > Permalinks en klik op "Wijzigingen opslaan" (je hoeft niets te wijzigen).

Configuratie Opties​

AttribuutBeschrijvingWaarden
modeVerplicht voor form-only modusform
data-themeKleurenschema van de widgetlight, dark
styleCSS custom properties (bv. --color-primary)Hexkleur
configurationUnieke configuratie-ID (vraag aan bij support)UUID string
cursadweb-urlCursadWeb URL voor doorverwijzenVolledige URL
api-urlBackend URLVolledige URL
disable-menuMenu uitschakelen (optioneel)true, standaard ingeschakeld
disable-mijn-omgevingExterne link naar mijn omgeving verbergen (optioneel)true, standaard ingeschakeld

URL Parameters​

Om direct naar het juiste inschrijfformulier voor een cursus te navigeren, moet je de volgende URL parameters toevoegen aan de pagina URL:

  • w=<COURSE_WEB_NUMMER> - Het cursus web nummer
  • p=<PLAN_NUMMER> - Het plan nummer
  • t=<TARIEF_NUMMER> - Het tarief nummer

Voorbeeld URL:

https://jouwwebsite.nl?w=12345&p=67890&t=11111

Wanneer een gebruiker naar deze URL navigeert met de widget in form-only modus, wordt direct het inschrijfformulier voor de opgegeven cursus getoond.

Volledige HTML Voorbeeld​

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inschrijven voor Cursus</title>
</head>
<body>
    <base href="/inschrijven/">
    
    <main>
        <app-entry 
          mode="form"
          data-theme="light" 
          style="--color-primary: #3e80c0" 
          configuration="428046d6-4952-4658-9584-3690440fbab5" 
          cursadweb-url="https://ontwikkel.cursadtestweb.nl" 
          api-url="https://apitest.cursadtestweb.nl/v4/api">
        </app-entry>
    </main>
    
    <script src="https://demowebsite.cursadtestweb.nl/myenv/my-env-widget.js"></script>
</body>
</html>

Use Cases​

Met form-only modus kun je directe links maken naar het inschrijfformulier voor specifieke cursussen. Dit is bijvoorbeeld handig voor:

  • Email campagnes met directe inschrijflinks
  • Social media posts met links naar specifieke cursussen
  • Externe websites die direct naar een inschrijfformulier willen linken
  • Embedding van alleen het inschrijfformulier op een bestaande pagina

Voorbeeld Implementatie​

<!-- Op je cursusoverzicht pagina -->
<a href="/inschrijven?w=12345&p=67890&t=11111">Schrijf je nu in!</a>

Wanneer gebruikers op deze link klikken, worden ze naar de pagina met de form-only widget geleid en zien ze direct het juiste inschrijfformulier.

Styling Aanpassen​

Je kunt het formulier stylen door CSS custom properties te gebruiken:

<app-entry 
  mode="form"
  style="--color-primary: #ff6b6b; --color-secondary: #4ecdc4; --border-radius: 8px;" 
  ...>
</app-entry>

Beschikbare CSS Custom Properties​

  • --color-primary: Primaire kleur
  • --color-secondary: Secundaire kleur
  • --border-radius: Afrondingsstraal van elementen
  • --font-family: Lettertype
  • --spacing: Ruimte tussen elementen

Problemen Oplossen​

Widget laadt niet​

  • ✅ Controleer of de JavaScript URL correct is
  • ✅ Kijk in de browser console (F12) naar foutmeldingen
  • ✅ Controleer of de configuration-ID geldig is
  • ✅ Zorg ervoor dat de base href correct is ingesteld
  • ✅ Controleer of mode="form" correct is toegevoegd

Formulier toont niet de juiste cursus​

  • ✅ Controleer of alle URL parameters (w, p, t) correct zijn toegevoegd
  • ✅ Verifieer of de parameterwaarden geldig zijn
  • ✅ Test de URL in de browser om te zien of de parameters correct worden doorgegeven

CORS Errors​

Als je CORS-fouten ziet in de console:

waarschuwing

Neem contact op met Cursad support. CORS-instellingen moeten aan de serverzijde worden geconfigureerd.

Styling Problemen​

  • Test verschillende CSS custom properties
  • Test op verschillende schermformaten (mobiel, tablet, desktop)
  • Inspecteer element eigenschappen in developer tools (F12)
  • Controleer of er conflicterende CSS van de hoofdwebsite is

WordPress Specifieke Problemen​

  • Controleer of permalinks zijn vernieuwd na het toevoegen van de rewrite-regel
  • Zorg ervoor dat de pagina-ID correct is ingevuld bij PAGINAID
  • Test of de rewrite-regel actief is door naar /mijn-omgeving/ te navigeren

Gerelateerde Documentatie​