📧 Newsletter Systeem - Externe Website Demo

⚠️ Let op: Deze pagina simuleert een externe website die het ZOZO.be newsletter systeem gebruikt. Voor productie moet je CORS configureren in /newsletters/api/subscribe.php

Methode 1: iFrame Embed (Simpel)

Dit is de makkelijkste manier om het formulier op een externe website te plaatsen.

<iframe src="https://e-send.be/newsletters/form/embed.php?owner=1700000000" width="100%" height="200" frameborder="0"></iframe>

Voordelen: Eenvoudig, werkt direct

Nadelen: Beperkte styling, responsive issues mogelijk

Methode 2: JavaScript API Call (Geavanceerd)

Volledige controle over styling en gedrag met je eigen HTML/CSS.

<form id="customNewsletterForm"> <input type="email" name="email" placeholder="Uw e-mailadres" required> <input type="hidden" name="owner_unix" value="1700000000"> <button type="submit">Inschrijven</button> </form> <script> document.getElementById('customNewsletterForm').addEventListener('submit', async function(e) { e.preventDefault(); const formData = new FormData(this); formData.append('timestamp', Math.floor(Date.now() / 1000)); formData.append('website', ''); // Honeypot try { const response = await fetch('https://e-send.be/newsletters/api/subscribe.php', { method: 'POST', body: formData }); const data = await response.json(); // Handle response... } catch (error) { console.error('Newsletter error:', error); } }); </script>

Voordelen: Volledige controle, native styling

Nadelen: Vereist CORS configuratie, meer code

🔧 CORS Configuratie Vereist

Voor Methode 2 moet je CORS headers toevoegen aan /newsletters/api/subscribe.php:

<?php // Voeg dit toe bovenaan subscribe.php header('Access-Control-Allow-Origin: https://jouw-externe-website.com'); // Of gebruik '*' voor alle domeinen (niet aanbevolen voor productie) header('Access-Control-Allow-Methods: POST, OPTIONS'); header('Access-Control-Allow-Headers: Content-Type'); if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { http_response_code(200); exit; } ?>