Gebruikerspecifieke pagina

Het is mogelijk om gebruikerspecifieke pagina's te definiëren. Daarvoor zijn 2 functies beschikbaar in menu Rapportage:

  • Gebruikers-specifieke pagina maken
  • Gebruikers-specifieke pagina wijzigen

Pagina opzetten

Bij het opzetten van een nieuwe pagina is er keus uit 2 mogelijkheden: een standaard pagina of een contactformulier.

Indien gekozen is voor Standaard wordt begonnen met een lege pagina. Het invullen van de pagina vereist enige kennis van HTML.

Indien gekozen is voor Contactformulier kan er vervolgens een type formulier geselecteerd worden. In dit formulier moeten vervolgens nog diverse aanpassingen gemaakt worden. Zie de uitleg in paragraaf Contactpagina opzetten.

Nadat alle aanpassingen zijn gemaakt kan de pagina worden opgeslagen in de map [stamboommap]/Output/Miscellaneous.
Vervolgens moet de navigatiebalk worden aangepast om de pagina via de navigatiebalk te kunnen benaderen.

Contactpagina opzetten

Het voordeel van een contact pagina met een formulier is dat zo spam tegengehouden kan worden, vooral als daarbij gebruik wordt gemaakt van reCaptcha.

Om het ingevulde formulier op te sturen heb je een lastig stukje techniek nodig. De eenvoudigste manier om dat op te lossen is gebruik maken van een form-service, bijvoorbeeld Formspree of Getform.

Beide services hebben zowel een gratis als een betaalde versie. Het hieronder beschreven gedrag geldt voor de gratis versie.

Gedrag van Formspree:

  • Bij het ontvangen van een e-mail staat het onderwerp zoals dat in het formulier is gedefinieerd in het onderwerpveld
  • Je kunt de taal specificeren waarin feedback aan de gebruiker wordt gegeven
  • De presentatie van de mail ziet er niet zo fraai uit
  • Je kunt in je account aangeven of je gebruik wilt maken van reCaptcha
  • Als je kiest voor reCaptcha wordt dit op een aparte pagina afgehandeld, dus niet in het contactformulier zelf

Gedrag van Getform:

  • Bij het ontvangen van een e-mail staat het onderwerp zoals dat in het formulier is gedefinieerd alleen in de inhoud van de e-mail
  • Feedback aan de gebruiker is in het Engels
  • De presentatie van de mail ziet er fraai uit
  • Je kunt reCaptcha op het contactformulier tonen, maar moet daarvoor wel zelf eerst een reCaptcha code aanvragen

Contactformulier gebaseerd op Formspree

Ga naar Formspree om je te registreren. Je krijgt dan een eigen code toegewezen.

Vervang in regel 1 van onderstaande code YOUR-FORMSPREE-CODE door jouw eigen code.
Vervang in regel 2 van onderstaande code "nl" desgewenst door een andere taalaanduiding.
Vervang in regel 3 van onderstaande code "Contactformulier genealogie" desgewenst door een andere onderwerptekst.

Optioneel kun je ook andere teksten aanpassen naar eigen smaak.

<form method="post" action="https://formspree.io/f/YOUR-FORMSPREE-CODE">
<input type="hidden" name="_language" value="nl">
<input type="hidden" name="_subject" value="Contactformulier genealogie">

<div class="contact">
<table>
<tr>
   <td valign="top"><label for="name">Naam</label></td>
   <td valign="top"><input class="lowered" type="text" name="name" maxlength="50" size="60" required
      oninvalid="this.setCustomValidity('Dit is een verplicht veld')" oninput="this.setCustomValidity('')">
   </td>
</tr>

<tr>
   <td valign="top"><label for="email">E-mail</label></td>
   <td valign="top"><input class="lowered" type="email" name="email" maxlength="80" size="60" required
      oninvalid="this.setCustomValidity('Dit is een verplicht veld')" oninput="this.setCustomValidity('')">
   </td>
</tr>

<tr>
   <td valign="top"><label for="message">Bericht</label></td>
   <td valign="top"><textarea class="lowered" name="message" maxlength="1000" cols="60" rows="20" required
      oninvalid="this.setCustomValidity('Dit is een verplicht veld')" oninput="this.setCustomValidity('')"></textarea>
   </td>
</tr>

<tr>
   <td> </td>
   <td><button type="submit">Versturen</button></td>
</tr>
</table>
</div>
</form>
   

Contactformulier gebaseerd op Getform

Ga naar Getform om je te registreren. Je krijgt dan een eigen code toegewezen.

Vervang in regel 1 van onderstaande code YOUR-GETFORM-CODE door jouw eigen code.
Vervang in regel 2 van onderstaande code "Contactformulier genealogie" desgewenst door een andere onderwerptekst.

Optioneel kun je ook andere teksten aanpassen naar eigen smaak.

Wil je reCaptcha gebruiken dan moet je zelf een Google reCaptcha API key aanvragen.
Vervang YOUR-RECAPTCHA-CODEdoor de ontvangen code.

Wil je geen reCaptcha gebruiken, verwijder dan deze regels code:

<tr>
<td> </td>
<td><div class="g-recaptcha" data-sitekey="YOUR-RECAPTCHA-CODE"></div></td>
</tr>
   
<form method="post" action="https://getform.io/f/YOUR-GETFORM-CODE">
<input type="hidden" name="subject" value="Contactformulier genealogie">

<div class="contact">
<table>
<tr>
   <td valign="top"><label for="name">Naam</label></td>
   <td valign="top"><input class="lowered" type="text" name="name" maxlength="50" size="60" required
      oninvalid="this.setCustomValidity('Dit is een verplicht veld')" oninput="this.setCustomValidity('')">
   </td>
</tr>

<tr>
   <td valign="top"><label for="email">E-mail</label></td>
   <td valign="top"><input class="lowered" type="email" name="email" maxlength="80" size="60" required
      oninvalid="this.setCustomValidity('Dit is een verplicht veld')" oninput="this.setCustomValidity('')">
   </td>
</tr>

<tr>
   <td valign="top"><label for="message">Bericht</label></td>
   <td valign="top"><textarea class="lowered" name="message" maxlength="1000" cols="60" rows="20" required
      oninvalid="this.setCustomValidity('Dit is een verplicht veld')" oninput="this.setCustomValidity('')"></textarea>
   </td>
</tr>

<tr>
   <td> </td>
   <td><div class="g-recaptcha" data-sitekey="YOUR-RECAPTCHA-CODE"></div></td>
</tr>

<tr>
   <td> </td>
   <td><button type="submit">Versturen</button></td>
</tr>
</table>
</div>
</form>
   

Pagina wijzigen



Bij het laden van het paginabestand wordt de tekst tussen <h2> en </h2> getoond in het veld Titel.
De tekst tussen de regels <!---------- Start text ----------> en <!---------- End text ----------> wordt getoond in het veld Inhoud.

Nadat de gewenste wijzigingen zijn aangebracht, kan het resultaat met Voorvertoning worden bekeken.

Bij opslaan van het paginabestand wordt de sjabloon User.html geladen en de titel en inhoud op de juiste plaatsen ingevoegd.

Op de pagina Sjablonen wordt uitgelegd hoe je een aangepaste sjabloon kunt gebruiken in plaats van de standaardsjabloon.