onepager maken

📚 Website Documentatie

Hoe je een professionele one-page website bouwt & host (GRATIS!)

Gebaseerd op: MGM Installatietechniek

🎯 Wat hebben we gebouwd?

🌐 Live website: mgminstallatietechniek.netlify.app
🌍 Custom domein: mgminstallatietechniek.nl
💰 Kosten: €0,- (alleen domeinregistratie ca. €10/jaar)
📄 Type: One-page website (single HTML file)

✨ Features

  • Volledig responsive (mobiel vriendelijk)
  • Contactformulier met automatische email notificaties
  • Direct bellen buttons (klikbaar op mobiel)
  • Smooth scroll animaties
  • Professioneel design met parallax effecten
  • 24/7 bereikbaarheid prominent weergegeven
  • Service selectie dropdown in contactformulier

🛠️ Technische Stack

HTML5

Structuur van de website

CSS3

Styling & animaties (inline)

JavaScript

Interactiviteit (vanilla JS)

Netlify

Gratis hosting platform

Zapier

Contactformulier → Email

💡 Waarom deze stack?
  • Geen dependencies of frameworks nodig
  • Supersnelle laadtijden
  • Makkelijk te onderhouden
  • Werkt overal (alle browsers)
  • 100% gratis te hosten

🚀 Hosting: Netlify (Gratis!)

🌐 Naar Netlify

Waarom Netlify?

  • Gratis tier: Perfect voor kleine websites
  • Drag & drop: Upload je HTML en je bent live
  • Automatische SSL: Gratis HTTPS certificaat
  • Custom domein: Koppel je eigen domeinnaam
  • CDN: Razendsnelle laadtijden wereldwijd
  • Geen credit card nodig voor gratis tier

📋 Stap-voor-stap Deployment

1 Account aanmaken
Ga naar netlify.com/signup en maak een gratis account
2 Nieuwe site toevoegen
Klik op “Add new site” → “Deploy manually”
3 Bestanden uploaden
Sleep je index.html (en eventueel images/ folder) in het upload vak
4 Live!
Je website is nu live op een *.netlify.app URL
⚠️ Belangrijk: Je hoofdbestand MOET index.html heten! Anders krijg je een 404 error.

🔗 Custom Domein Koppelen

1 Domein registreren
Koop een domeinnaam bij bijv. TransIP, Versio of Hostnet
Kosten: ca. €10-15 per jaar voor een .nl domein
2 In Netlify
Ga naar je site → “Site settings” → “Domain management” → “Add custom domain”
3 DNS instellen
Netlify geeft je DNS instructies. Voeg deze toe bij je domeinregistrar:
A Record → 75.2.60.5
Of gebruik Netlify’s nameservers (makkelijkste)
4 Wachten
DNS propagatie kan 1-48 uur duren (meestal binnen 1 uur)

📧 Contactformulier met Zapier

⚡ Naar Zapier

Hoe werkt het?

Het contactformulier op de website verstuurt data naar Zapier, die dit automatisch omzet naar een email naar jouw inbox.

Waarom Zapier?
  • Gratis tier: 100 taken per maand (ruim voldoende)
  • Geen server-side code nodig
  • Emails zonder eigen mailserver
  • Makkelijk op te zetten in 5 minuten

📋 Setup Instructies

1 Zapier account
Maak een gratis account op zapier.com
2 Nieuwe Zap maken
Klik “Create Zap” → Kies een naam zoals “Website Contactformulier”
3 Trigger instellen
• Zoek naar “Webhooks by Zapier”
• Kies “Catch Hook”
• Kopieer de webhook URL (lijkt op: https://hooks.zapier.com/hooks/catch/123456/abcdef/)
4 Action instellen
• Klik “+ Add step”
• Zoek naar “Email by Zapier” (of Gmail)
• Kies “Send Outbound Email”
• Vul in:
  – To: info@mgminstallatietechniek.nl
  – Subject: Nieuw contactformulier van website
  – Body: Map de velden (naam, email, telefoon, bericht, service)
5 Test & Publiceren
Test je Zap met testdata en zet hem “ON”
6 Webhook in HTML plaatsen
In je HTML, vervang de form action met jouw webhook URL
✅ Klaar! Nu ontvangt je automatisch een email bij elke inzending.

📁 Bestandsstructuur

Minimale setup:
/ ├── index.html ← Hoofdbestand (VERPLICHT deze naam!) └── images/ ← Optioneel: voor je logo └── mgm-logo.png
⚠️ Belangrijk:
  • Het hoofdbestand MOET index.html heten
  • Alle CSS en JavaScript staat inline in het HTML bestand
  • Logo kan je als base64 in HTML embedden OF uploaden in images/ folder

🏢 MGM Installatietechniek – Specifieke Info

🌐 Website: mgminstallatietechniek.netlify.app

📧 Email: info@mgminstallatietechniek.nl

📞 Telefoon: 06 – 390 79 728

🏢 KvK: 69213003

Specialisaties

  • Full Electric Warmtepompen: LG & Newtide (monobloc systemen)
  • CV Ketels installatie & reparatie
  • Elektrische boilers
  • WTW installaties (warmte terugwinning)
  • Mechanische ventilatie
  • Waterdrukverhogers
  • Slimme thermostaten
  • 24/7 storingsdienst
💡 Onderscheidend: Geen onderhoud contracten! Focus op installatie, reparatie en eenmalige service.

👥 Dit voor een Vriend Opzetten

🎯 Wat heb je nodig?

  • Bedrijfsnaam
  • Logo (als bestand)
  • Telefoonnummer
  • Email adres
  • KvK nummer
  • Lijst van diensten/specialisaties
  • Gewenste domeinnaam
  • Foto’s (optioneel maar wel mooi)

📋 Checklist

1 HTML aanpassen
• Bedrijfsnaam overal vervangen
• Logo uploaden/embedden
• Contactgegevens aanpassen
• Diensten aanpassen
• Kleuren aanpassen (optioneel)
2 Zapier webhook maken
• Nieuwe Zap aanmaken
• Email naar het juiste adres sturen
• Webhook URL in HTML plaatsen
3 Netlify deployment
• Account aanmaken (of bestaande gebruiken)
• index.html uploaden
• Testen of alles werkt
4 Domein koppelen
• Domein registreren
• DNS instellen volgens Netlify instructies
• Wachten op propagatie
5 Testen
• Website bekijken op mobiel + desktop
• Contactformulier testen
• Alle links checken
• Bel buttons testen op mobiel
⏱️ Totale tijd: 1-2 uur (als je het voor de eerste keer doet)
💰 Totale kosten: €10-15 per jaar (alleen domein)

🔗 Handige Links

Hosting & Deployment

Netlify Netlify Signup Netlify Docs

Contactformulier

Zapier Zapier Signup Zapier Getting Started

Domeinregistratie (NL)

TransIP Versio Hostnet

Tools

TinyPNG (afbeeldingen comprimeren) Base64 Image Encoder HTML Validator

💡 Pro Tips

Performance

  • Comprimeer afbeeldingen met TinyPNG (kan 70% kleiner!)
  • Embed kleine afbeeldingen als base64 in HTML
  • Test op PageSpeed Insights

SEO Basics

  • Gebruik duidelijke title tag
  • Voeg meta description toe
  • Gebruik alt attributen bij afbeeldingen
  • Zorg voor snelle laadtijden

Onderhoud

  • Backup je HTML bestand lokaal
  • Test het contactformulier regelmatig
  • Check Zapier task usage (max 100/maand op gratis plan)
  • Vernieuw domein op tijd (meestal auto-renewal)
⚠️ Security:
  • Deel je Zapier webhook URL niet publiek
  • Gebruik form validatie tegen spam
  • Overweeg een “honeypot” veld tegen bots

🔧 Veelvoorkomende Problemen

❌ “404 Not Found” op Netlify

Oplossing: Je hoofdbestand heet niet index.html. Hernoem het en upload opnieuw.

❌ Logo wordt niet weergegeven

Oplossing: Check of het pad klopt (/images/logo.png) of embed als base64.

❌ Contactformulier werkt niet

Oplossing:

  • Check of Zapier Zap “ON” staat
  • Controleer webhook URL in form action
  • Check of veldnamen (name attributes) kloppen
  • Test in Zapier met test data

❌ Custom domein werkt niet

Oplossing:

  • DNS propagatie kan tot 48 uur duren (wees geduldig!)
  • Check DNS instellingen bij je registrar
  • Probeer Netlify nameservers (makkelijker)

❌ Website laadt langzaam

Oplossing:

  • Comprimeer je afbeeldingen
  • Verwijder ongebruikte CSS/JavaScript
  • Check met PageSpeed Insights

💰 Kosten Overzicht

Totale maandelijkse kosten: €0,-

Totale jaarlijkse kosten: €10-15,-

Service Kosten Opmerking
Netlify Hosting €0,- Gratis tier, ruim voldoende
Zapier €0,- Gratis tier, 100 taken/maand
SSL Certificaat €0,- Automatisch via Netlify
CDN (snelheid) €0,- Inbegrepen bij Netlify
Domeinnaam (.nl) €10-15/jaar Enige kosten, jaarlijks
💡 Schaaloptie: Als je website groeit (meer dan 100 Zapier taken/maand), kun je upgraden naar Zapier Starter voor €19.99/maand. Maar voor meeste kleine bedrijven is gratis tier voldoende!