Enkele maanden geleden bouwden we de nieuwe Drupal 9 product website voor onze Drupal distro OpenLucius. We hadden daar een contactformulier nodig, normaal gebruiken we daar de Webform module voor, maar die was nog niet Drupal 9 gereed genoeg. Dus besloten we ook dit formulier custom te produceren m.b.v. AJAX. Deze code hebben we nu gepubliceerd in een werkende Drupal module, hierbij een toelichting:
De module bevat:
- Het AJAX Formulier.
- Een Block, zodat je het formulier ergens op je website kan plaatsen.
- Een Twig html file, voor de block markup.
- Een implementatie van hook_mail(), om email te kunnen versturen.
Voorbeeld en resultaat
De code is gecloned van ons support formulier op de OpenLucius product website. OpenLucius is een social platform voor communicatie, samenwerken en cultuur bouwen; 100% open source.
Copy and run off
We hebben dit gepubliceerd, zodat je de module kunt klonen en er vervolgens mee kunt doen wat je wilt. Dus momenteel is het geen Drupal contrib module, die volledig configureerbaar en updateable etc is.
Bootstrap gebaseerd
De classes in het formulier zijn van html framework Bootstrap, als je die libraries gebruikt ziet het er dus automatisch mooi / beter en responsive uit.
Meest belangrijke code om het Drupal AJAX form werkend te krijgen
- Voeg de AJAX callback toe en gebruik '#type' = 'button', niet '#type' = 'submit'.
- Voeg de juiste libraries toe aan het Drupal form.
- Initieer AJAX response.
- Voeg AJAX commando's toe, een volledig lijst core AJAX callback commands.
- Return response.
Flood protectie, honeypot en code optimalisatie
Er is nog geen 'Flood protection' toegevoegd en als je het Drupal form wilt beveiligen met Honeypot, uncomment dan line 103 in AjaxContactForm.php
Natuurlijk kan de code worden geoptimaliseerd, er is een te grote procedurele if /else en een Drupal Service kan van pas komen, ook mail bodybuilding is niet helemaal. Maar ik denk dat je de picture wel get (:
Drupal 'quick-start'
PS, om deze module snel te testen in een verse Drupal omgeving zou je Drupal's quick-start kunnen gebruiken, erg handig.
Find the code on Github
Download en bekijk the code hier op Github.
Wil je dit graag zien als contrib Drupal module?
Please let me know, als er genoeg positieve feedback is dat zouden we het zomaar tot een module kunnen contribben op drupal.org!
