BlocWeave
What you'll build
In this final part you'll make the contact form actually send emails to your inbox (for free, with no server), embed your real Google Maps location, and publish your website live on the internet.
By the end of this part:
- The contact form sends email notifications to you when someone fills it in
- Your Google Maps location is embedded on the Contact page
- Your website is live at a
*.pages.devURL (free, instant) - Optional: your website is live at your own custom domain (e.g.
amascatering.com)
Wire up the contact form with Formspree
Formspree is a free service that handles form submissions for static websites. When someone fills in your contact form, Formspree emails you the details.
- Go to formspree.io and sign up for a free account
- Click New Form, name it "Business Website Contact Form", and copy the form endpoint URL — it looks like
https://formspree.io/f/abcdefgh
Update the contact form in contact.html:
- Add action="https://formspree.io/f/YOUR_FORM_ID" and method="POST" to the <form> element (replace YOUR_FORM_ID with the actual ID from Formspree)
- Add a hidden field <input type="hidden" name="_subject" value="New enquiry from Ama's Catering website"> to customise the email subject line
- Add a hidden field <input type="hidden" name="_next" value="thank-you.html"> so the form redirects to a thank-you page after submission
- Make sure all form fields have a name attribute that matches what you want to see in the email (name, email, phone, event-type, event-date, guests, message)
Create the thank-you page:
Create thank-you.html for the Ama's Catering website. Link styles.css. Include the navigation bar and WhatsApp float button. Show a simple centred message: a large green checkmark icon (SVG), the heading "Message Sent!", and the text "Thank you for reaching out. We'll get back to you within 24 hours. In the meantime, you can also WhatsApp us directly." Include a gold "Back to Home" button linking to index.html and a green "WhatsApp Us" button linking to https://wa.me/233240000001.
Embed Google Maps
- Go to maps.google.com and search for your business address
- Click Share → Embed a map → Copy HTML
- You'll get an
<iframe>tag
In contact.html, replace the map placeholder with this Google Maps iframe: [paste the iframe tag here]. Make the map responsive — wrap it in a div with style="position:relative;padding-top:60%;overflow:hidden;" and set the iframe to position:absolute;top:0;left:0;width:100%;height:100%;border:0.
Push to GitHub
If you haven't already, push your project to GitHub:
- Go to github.com and sign up for a free account if you don't have one
- Go to github.com/new and create a repository named
amas-catering-website(or your business name) - Download GitHub Desktop — it's much easier than the command line
- Open GitHub Desktop, sign in, and use File → Add Local Repository to add your project folder
- Write a commit message like "Initial website" and click Commit to main
- Click Publish repository to push it to GitHub
Deploy on Cloudflare Pages
- Go to pages.cloudflare.com and sign up for a free Cloudflare account
- Click Create application → Pages → Connect to Git
- Select your GitHub repository
- For Build settings: leave everything blank — your site is plain HTML, no build step needed
- Click Save and Deploy
Cloudflare will deploy your site in about 30 seconds. You'll get a URL like https://amas-catering-website.pages.dev.
Open it in your browser and check everything works: all navigation links, the contact form, the WhatsApp button, and the Google Maps embed.
Connect your own domain (optional)
If you have a domain name (e.g. amascatering.com) registered with a provider like Namecheap, GoDaddy, or Ghana's own .com.gh registrar:
- In Cloudflare Pages, go to your project → Custom domains → Set up a custom domain
- Enter your domain name and click Continue
- Cloudflare will show you DNS records to add at your domain registrar
- Log in to your domain registrar, go to DNS settings, and add the records Cloudflare shows
- Click Activate domain in Cloudflare — it may take a few minutes to an hour for DNS to propagate
Once connected, your website will be available at your own domain with a free SSL certificate automatically.
Domain names in Ghana: You can register a .com.gh domain through the Network Computer Systems (NCS) — Ghana's official domain registrar. A .com.gh domain costs around GHS 150–200 per year and signals local credibility to Ghanaian customers. An international .com from Namecheap costs about $10/year and is better if you serve customers outside Ghana.
Final checklist
Before sharing your website link:
- Open the site on your phone — does it look good?
- Test the contact form — submit a test message and check your email
- Click the WhatsApp button — does it open a WhatsApp chat?
- Check all navigation links work
- Read all the text — is your business name, phone number, and address correct everywhere?
What you've built
Over this three-part series you've built a complete professional business website:
- A homepage with hero, services, testimonials, and a call-to-action
- An About page with your story and team
- A Services page with pricing and an FAQ
- A Contact page with a working form, WhatsApp button, and Google Maps
- A live deployment on Cloudflare Pages — free, fast, and globally distributed
Every future update is as simple as editing a file in VS Code and pushing to GitHub — Cloudflare redeploys automatically within seconds.