onepager (2) – braam&co

🔄 Systeem Flow

1. Gebruiker bezoekt → mgminstallatietechniek.nl

↓

2. DNS resolves naar → Netlify CDN

↓

3. Netlify serveert → index.html (statisch bestand)

↓

4. Browser rendert → HTML + inline CSS + inline JavaScript

↓

5. Gebruiker vult formulier → HTML form met POST method

↓

6. Form submit naar → Zapier Webhook URL

↓

7. Zapier verwerkt → Data extractie uit form fields

↓

8. Zapier verstuurt → Email naar info@mgminstallatietechniek.nl

🧩 Component Breakdown

Component 1: Domeinnaam • Registratie bij: TransIP / Versio / Hostnet
• Type: .nl domein
• Functie: User-friendly URL die naar Netlify wijst
• DNS Config: A-record naar Netlify IP of Netlify nameservers

Component 2: Netlify (Hosting) • Type: Static site hosting + CDN
• Input: index.html (+ optioneel: /images/ folder)
• Output: HTTPS website op CDN (edge servers wereldwijd)
• SSL: Automatisch Let’s Encrypt certificaat
• Deploy method: Drag & drop of Git integration

Component 3: HTML5 Bestand • Bestandsnaam: index.html (VERPLICHT)
• Structuur: Single-file website
• CSS: Inline in <style> tags binnen <head>
• JavaScript: Inline in <script> tags voor </body>
• Voordeel: Geen externe dependencies, alles in 1 bestand

Component 4: Interactieve Elementen (JavaScript) • Smooth scroll navigatie
• Form validatie (client-side)
• Animaties bij scroll (Intersection Observer API)
• Mobile menu toggle
• Geen frameworks (vanilla JavaScript)

Component 5: Contactformulier • HTML <form> element
• Method: POST
• Action: Zapier webhook URL
• Fields: name, email, phone, message, service (dropdown)
• Encoding: application/x-www-form-urlencoded (default)

Component 6: Zapier (Form Handler) • Trigger: Webhooks by Zapier (Catch Hook)
• Input: Form POST data via webhook URL
• Processing: Data mapping naar email fields
• Action: Email by Zapier (Send Outbound Email)
• Output: Email naar opgegeven adres
• Rate limit: 100 tasks/maand (gratis tier)

🌐 Domein → Netlify Koppeling

Hoe DNS werkt:

Gebruiker typt: mgminstallatietechniek.nl
DNS lookup: Zoekt A-record of CNAME
Gevonden IP: Netlify’s CDN edge server
Verbinding: Browser → Netlify CDN
Response: index.html + assets

Setup methoden:

A Methode 1: A-record (simpel)
In DNS van je registrar:
A record @ → 75.2.60.5
CNAME www → [jouw-site].netlify.app

B Methode 2: Netlify nameservers (aanbevolen)
Netlify geeft je 4 nameservers zoals:
dns1.p03.nsone.net
dns2.p03.nsone.net
Vervang nameservers bij je registrar → Netlify beheert alle DNS

⚠️ Propagatie tijd: DNS wijzigingen kunnen 1-48 uur duren. Meestal binnen 1 uur actief.

📄 HTML5 Structuur

<!DOCTYPE html> <html lang=”nl”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>MGM Installatietechniek</title> <!– Alle CSS inline –> <style> body { font-family: Arial, sans-serif; } /* … alle styling hier … */ </style> </head> <body> <!– HTML content –> <header>…</header> <main> <section id=”diensten”>…</section> <section id=”contact”> <!– Contactformulier –> <form action=”https://hooks.zapier.com/…” method=”POST”> <input type=”text” name=”name” required> <input type=”email” name=”email” required> <input type=”tel” name=”phone”> <select name=”service”>…</select> <textarea name=”message” required></textarea> <button type=”submit”>Verstuur</button> </form> </section> </main> <footer>…</footer> <!– Alle JavaScript inline –> <script> // Smooth scroll document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => { anchor.addEventListener(‘click’, function (e) { e.preventDefault(); document.querySelector(this.getAttribute(‘href’)) .scrollIntoView({ behavior: ‘smooth’ }); }); }); // Scroll animaties const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add(‘visible’); } }); }); document.querySelectorAll(‘.fade-in’).forEach(el => observer.observe(el)); </script> </body> </html>

Waarom alles inline?
• Slechts 1 bestand = makkelijker deployen
• Geen extra HTTP requests = sneller laden
• Geen dependency management
• Makkelijk te copy-pasten en aanpassen

📧 Contactformulier → Email Flow

Technische werking:

1 User vult formulier en klikt “Verstuur”
Browser bereidt POST request voor met form data

2 Browser stuurt HTTP POST naar Zapier webhook
POST https://hooks.zapier.com/hooks/catch/123456/abcdef/
Body: name=Jan&email=jan@email.com&phone=0612345678&message=…

3 Zapier ontvangt POST data
Webhook trigger vangt data op en parsed fields
Data beschikbaar als variabelen: {{name}}, {{email}}, etc.

4 Zapier Action: Email samenstellen
To: info@mgminstallatietechniek.nl
Subject: Nieuw contactformulier
Body: Template met {{name}}, {{email}}, {{phone}}, {{message}}

5 Zapier verstuurt email via SMTP
Email komt aan in inbox binnen 1-2 minuten

6 Browser toont success/error
Standaard: redirect naar Zapier success page
Optioneel: JavaScript interceptie voor custom message

HTML Form Code:

<form action=”https://hooks.zapier.com/hooks/catch/123456/abcdef/” method=”POST” id=”contactForm”> <input type=”text” name=”name” placeholder=”Naam” required> <input type=”email” name=”email” placeholder=”Email” required> <input type=”tel” name=”phone” placeholder=”Telefoon”> <select name=”service”> <option value=””>Selecteer dienst</option> <option value=”cv-ketel”>CV Ketel</option> <option value=”warmtepomp”>Warmtepomp</option> <option value=”storing”>Storing</option> </select> <textarea name=”message” placeholder=”Uw bericht” required></textarea> <button type=”submit”>Verstuur</button> </form>

⚠️ Belangrijk:
• name attributes zijn cruciaal – dit zijn de variabelen in Zapier
• Webhook URL geheim houden (niet in publieke repo’s)
• Optioneel: honeypot field toevoegen tegen bots

⚡ Zapier Configuration

Stap 1: Trigger Setup

• App: Webhooks by Zapier
• Event: Catch Hook
• Webhook URL wordt automatisch gegenereerd
• Format: https://hooks.zapier.com/hooks/catch/[user-id]/[hook-id]/

Stap 2: Test Webhook

• Test door form te submitten
• Zapier vangt data op en toont fields:
  – name: “Test Gebruiker”
  – email: “test@email.com”
  – phone: “0612345678”
  – etc.

Stap 3: Action Setup

• App: Email by Zapier (of Gmail/Outlook)
• Event: Send Outbound Email
• To: info@mgminstallatietechniek.nl
• Subject: Nieuw contactformulier van {{name}}
• Body template:

Nieuw bericht via website contactformulier: Naam: {{name}} Email: {{email}} Telefoon: {{phone}} Dienst: {{service}} Bericht: {{message}} — Verzonden via mgminstallatietechniek.nl

Stap 4: Publiceren

• Test de Zap met testdata
• Check of email aankomt
• Zet Zap op ON
• Monitor usage in dashboard (max 100/maand gratis)

🚀 Deployment Flow

Lokaal → Live in 5 minuten:

1 HTML bestand klaarmaken
• Bestandsnaam: index.html
• Zapier webhook URL invullen in form action
• Logo embedden (base64) of in /images/ folder
• Lokaal testen in browser

2 Netlify deployment
• Login op app.netlify.com
• “Add new site” → “Deploy manually”
• Sleep index.html in upload box
• Automatisch: build, deploy, SSL certificaat

3 Testen op .netlify.app URL
• Site direct live op [random-name].netlify.app
• Test alle links, responsive design, formulier
• Optioneel: site naam aanpassen in settings

4 Custom domein koppelen
• Netlify: Site settings → Domain management
• Add custom domain → mgminstallatietechniek.nl
• Volg DNS instructies (A-record of nameservers)
• Wacht op DNS propagatie (1-48 uur)

5 SSL automatisch actief
• Netlify regelt Let’s Encrypt certificaat
• HTTPS automatisch geactiveerd
• HTTP → HTTPS redirect automatisch

📁 Bestandsstructuur

Minimale setup (1 bestand):

/ └── index.html ← Alles in dit ene bestand

Met logo (2 items):

/ ├── index.html ← Hoofdbestand └── images/ ← Logo folder └── logo.png ← Logo bestand

Logo opties:
Optie A (aanbevolen): Base64 embed in HTML
• Converteer logo naar base64 via base64-image.de
• Plak in HTML: <img src=”data:image/png;base64,iVBORw0KG…”>
• Voordeel: 1 bestand, geen extra HTTP request

Optie B: Aparte afbeelding
• Upload images/ folder samen met index.html
• In HTML: <img src=”images/logo.png” alt=”Logo”>
• Nadeel: 2 items uploaden naar Netlify

🔄 Website Updaten

1 Bewerk index.html lokaal
Open bestand in code editor, maak wijzigingen

2 Test lokaal
Open in browser, check of alles werkt

3 Upload naar Netlify
• Ga naar je site in Netlify dashboard
• “Deploys” tab → scroll naar beneden
• Sleep nieuwe index.html in upload box
• Of: drag & drop over bestaande deployment

4 Automatische deployment
Netlify deploy automatisch (5-30 seconden)
Website is bijgewerkt op je domein

💡 Pro tip: Bewaar een backup van je HTML bestand lokaal. Netlify heeft ook versiegeschiedenis in het dashboard.

💰 Kostenstructuur

Netlify (Hosting + CDN + SSL)
Gratis tier:
• 100 GB bandwidth/maand
• 300 build minutes/maand
• Onbeperkte sites
• Automatische SSL
Kosten: €0,-

Zapier (Form handler)
Gratis tier:
• 100 tasks/maand
• 1 Zap actief tegelijk (voldoende)
• Single-step Zaps
Kosten: €0,-
Bij groei: Starter plan €19.99/maand voor 750 tasks

Domeinnaam
• .nl domein: €10-15/jaar
• Bij TransIP, Versio, of Hostnet
Kosten: ~€12/jaar

Totaal: €0/maand + €12/jaar voor domein
= €1 per maand all-in

👥 Template Replicatie

Voor een vriend opzetten:

1 Verzamel info
• Bedrijfsnaam, logo, kleuren
• Telefoonnummer, email, KvK
• Lijst van diensten
• Gewenste domeinnaam

2 Clone & customize HTML
• Kopieer index.html
• Find & replace bedrijfsnaam
• Update contactgegevens
• Pas kleuren aan (CSS variabelen)
• Embed nieuw logo

3 Zapier webhook maken
• Nieuwe Zap voor nieuwe klant
• Email naar hun adres
• Kopieer nieuwe webhook URL naar form action

4 Deploy op Netlify
• Nieuwe site aanmaken
• Upload aangepaste index.html
• Koppel hun domein

5 Testen & live
• Test formulier (email check)
• Test alle links en buttons
• Responsive check (mobiel/tablet/desktop)
• Live! ✅

⏱️ Tijdsinvestering per site:
• Eerste keer: 2-3 uur (leren + setup)
• Vervolgprojecten: 30-60 minuten

⚙️ One-Page Website: Technische Architectuur