Natuurlijk! Hier is een overzicht van hoe je een maatwerk WordPress-plugin kunt ontwerpen en ontwikkelen voor jouw contactformulier met de genoemde functionaliteiten. **1. Plugin structuur en basis:** Maak een map voor je plugin, bijvoorbeeld `mijn-contactformulier`. In deze map maak je een hoofdbestand, bijvoorbeeld `mijn-contactformulier.php`, en eventueel andere bestanden zoals CSS, JS, en functies. **2. Hoofdplugin bestand:** Begin met een standaard plugin header: ```php <?php /* Plugin Name: Maatwerk Contactformulier Description: Een contactformulier met validatie en e-mail notificaties. Version: 1.0 Author: Jouw Naam */ if ( ! defined( 'ABSPATH' ) ) exit; // Functie om het formulier toe te voegen aan een pagina via shortcode function mcf_toevoegen_shortcode() { ob_start(); ?> <form id="mcf-contact-form" method="post" action=""> <label for="mcf-naam">Naam:</label> <input type="text" id="mcf-naam" name="mcf_naam" required> <label for="mcf-email">E-mail:</label> <input type="email" id="mcf-email" name="mcf_email" required> <label for="mcf-telefoon">Telefoonnummer:</label> <input type="tel" id="mcf-telefoon" name="mcf_telefoon" required pattern="[0-9\-+() ]+"> <label for="mcf-bericht">Bericht:</label> <textarea id="mcf-bericht" name="mcf_bericht" required></textarea> <input type="submit" name="mcf_verstuur" value="Verstuur"> </form> <?php // Afhandeling formulier if ( isset( $_POST['mcf_verstuur'] ) ) { mcf_verwerk_formulier(); } return ob_get_clean(); } add_shortcode( 'mcf_formulier', 'mcf_toevoegen_shortcode' ); // Validatie en verwerking function mcf_verwerk_formulier() { // Sanitize en valideren $naam = sanitize_text_field( $_POST['mcf_naam'] ); $email = sanitize_email( $_POST['mcf_email'] ); $telefoon = sanitize_text_field( $_POST['mcf_telefoon'] ); $bericht = sanitize_textarea_field( $_POST['mcf_bericht'] ); $errors = array(); if ( ! is_email( $email ) ) { $errors[] = 'Ongeldig e-mailadres.'; } if ( empty( $naam ) || empty( $telefoon ) || empty( $bericht ) ) { $errors[] = 'Vul alle velden in.'; } if ( ! empty( $errors ) ) { foreach ( $errors as $error ) { echo '<p style="color:red;">' . esc_html( $error ) . '</p>'; } return; } // E-mail naar beheerder $to = get_option( 'admin_email' ); $subject = 'Nieuw contactformulier bericht'; $body = "Naam: $naam\nE-mail: $email\nTelefoon: $telefoon\nBericht:\n$bericht"; $headers = array( 'Content-Type: text/plain; charset=UTF-8' ); wp_mail( $to, $subject, $body, $headers ); echo '<p style="color:green;">Bedankt voor je bericht. We nemen zo snel mogelijk contact met je op.</p>'; } ?> ``` **3. Aanroepen via shortcode:** Plaats `[mcf_formulier]` op de pagina of in een bericht waar je het formulier wilt tonen. **4. Aanbevelingen voor beste aanpak:** - **Veiligheid:** Gebruik WordPress functies zoals `sanitize_text_field()`, `sanitize_email()` en `wp_mail()` voor veilig omgaan met data. - **Validatie:** Controleer of alle verplichte velden zijn ingevuld en of e-mail geldig is. - **Gebruik nonce:** Voor extra beveiliging kun je een nonce veld toevoegen om CSRF-aanvallen te voorkomen. - **Styling:** Voeg eventueel een aparte CSS-bestand toe voor een nette uitstraling. - **Feedback:** Toon duidelijke feedback bij fouten en bevestigingen. **5. Extra tips:** - Overweeg het gebruik van AJAX voor een vloeiendere gebruikerservaring. - Voeg CAPTCHA of reCAPTCHA toe om spam te voorkomen. - Log formulierinzendingen voor administratie en debugging. Wil je dat ik je help met het verder uitbreiden, bijvoorbeeld met AJAX-verwerking of het toevoegen van CAPTCHA?

Zeker, ik help je graag bij het ontwerpen en ontwikkelen van een maatwerk WordPress-plugin voor je contactformulier. Hier is een complete handleiding: ## Aanbevolen Aanpak 1. **Plugin-structuur aanmaken** 2. **Formulier genereren met shortcode** 3. **Validatie toevoegen (client- en server-side)** 4. **E-mailnotificatie implementeren** 5. **Beveiliging tegen spam toevoegen** ## Stap-voor-stap Implementatie ### 1. Plugin Basisstructuur Maak een nieuwe map in `/wp-content/plugins/` genaamd `custom-contact-form` en daarin een bestand `custom-contact-form.php`: ```php <?php /** * Plugin Name: Custom Contact Form * Description: Aangepast contactformulier met validatie en e-mailnotificatie * Version: 1.0 * Author: Jouw Naam */ // Beveiliging if (!defined('ABSPATH')) { exit; } class CustomContactForm { public function __construct() { add_action('init', array($this, 'init')); } public function init() { add_shortcode('custom_contact_form', array($this, 'render_form')); add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts')); add_action('wp_ajax_submit_contact_form', array($this, 'handle_submission')); add_action('wp_ajax_nopriv_submit_contact_form', array($this, 'handle_submission')); } // Rest van de code komt hier } new CustomContactForm(); ``` ### 2. Formulier Renderen ```php public function render_form() { ob_start(); ?> <div class="custom-contact-form"> <form id="custom-contact-form" method="post"> <?php wp_nonce_field('contact_form_nonce', 'contact_nonce'); ?> <div class="form-group"> <label for="naam">Naam *</label> <input type="text" id="naam" name="naam" required> </div> <div class="form-group"> <label for="email">E-mailadres *</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="telefoon">Telefoonnummer</label> <input type="tel" id="telefoon" name="telefoon"> </div> <div class="form-group"> <label for="bericht">Bericht *</label> <textarea id="bericht" name="bericht" rows="5" required></textarea> </div> <div class="form-group"> <button type="submit">Versturen</button> </div> <div id="form-message"></div> </form> </div> <?php return ob_get_clean(); } ``` ### 3. Scripts en Styling ```php public function enqueue_scripts() { wp_enqueue_style('custom-contact-form-style', plugins_url('style.css', __FILE__)); wp_enqueue_script('custom-contact-form-script', plugins_url('script.js', __FILE__), array('jquery'), null, true); wp_localize_script('custom-contact-form-script', 'ajax_object', array( 'ajax_url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('contact_form_ajax') )); } ``` ### 4. JavaScript Validatie (script.js) ```javascript jQuery(document).ready(function($) { $('#custom-contact-form').on('submit', function(e) { e.preventDefault(); var formData = $(this).serialize(); var $message = $('#form-message'); // Client-side validatie if (!validateForm()) { return false; } $.ajax({ type: 'POST', url: ajax_object.ajax_url, data: formData + '&action=submit_contact_form&nonce=' + ajax_object.nonce, beforeSend: function() { $message.html('<p>Bezig met verzenden...</p>').removeClass('error success'); }, success: function(response) { if (response.success) { $message.html('<p class="success">Bedankt! Je bericht is verstuurd.</p>'); $('#custom-contact-form')[0].reset(); } else { $message.html('<p class="error">' + response.data + '</p>'); } } }); }); function validateForm() { var email = $('#email').val(); var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert('Vul een geldig e-mailadres in'); return false; } return true; } }); ``` ### 5. Formulier Verwerking ```php public function handle_submission() { // Nonce verificatie if (!wp_verify_nonce($_POST['nonce'], 'contact_form_ajax')) { wp_die('Ongeldige request'); } // Sanitize input $naam = sanitize_text_field($_POST['naam']); $email = sanitize_email($_POST['email']); $telefoon = sanitize_text_field($_POST['telefoon']); $bericht = sanitize_textarea_field($_POST['bericht']); // Server-side validatie if (empty($naam) || empty($email) || empty($bericht)) { wp_send_json_error('Vul alle verplichte velden in'); } if (!is_email($email)) { wp_send_json_error('Vul een geldig e-mailadres in'); } // E-mail verzenden $to = get_option('admin_email'); $subject = 'Nieuw contactformulier bericht van ' . $naam; $headers = array('Content-Type: text/html; charset=UTF-8'); $message = " <h2>Nieuw contactformulier bericht</h2> <p><strong>Naam:</strong> {$naam}</p> <p><strong>E-mail:</strong> {$email}</p> <p><strong>Telefoon:</strong> {$telefoon}</p> <p><strong>Bericht:</strong><br>" . nl2br($bericht) . "</p> "; if (wp_mail($to, $subject, $message, $headers)) { wp_send_json_success('Bericht succesvol verstuurd'); } else { wp_send_json_error('Er ging iets mis bij het verzenden'); } } ``` ### 6. Basis CSS (style.css) ```css .custom-contact-form { max-width: 600px; margin: 0 auto; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } .form-group button { background: #0073aa; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; } .form-group button:hover { background: #005a87; } .success { color: green; font-weight: bold; } .error { color: red; font-weight: bold; } ``` ## Gebruik Plaats deze shortcode op elke pagina waar je het formulier wilt tonen: ``` [custom_contact_form] ``` ## Aanbevelingen 1. **Beveiliging**: Voeg CAPTCHA of honeypot toe tegen spam 2. **Database**: Overweeg om submissions op te slaan in de database 3. **Backup**: Maak regelmatig backups van je plugin 4. **Updates**: Houd WordPress en je plugin up-to-date 5. **Testing**: Test het formulier grondig voor livegang ## Extra Beveiliging (Optioneel) Voeg een honeypot veld toe: ```php // In render_form(): echo '<input type="text" name="honeypot" style="display:none;" tabindex="-1" autocomplete="off">'; // In handle_submission(): if (!empty($_POST['honeypot'])) { wp_send_json_error('Spam detected'); } ``` Deze plugin voorziet in alle gevraagde functionaliteiten met professionele beveiliging en validatie!