DEV Community: Po O

How to create a hugo theme with contact form

Po O — Tue, 07 Jan 2025 14:07:57 +0000

Here’s a step-by-step guide to creating a Hugo theme and integrating a fabform.io contact form:

1. Create a Hugo Site and Theme

Step 1: Install Hugo

Ensure Hugo is installed on your system. Follow Hugo's installation guide.

Step 2: Create a New Hugo Site

hugo new site my-hugo-site
cd my-hugo-site

Step 3: Create a New Theme

hugo new theme my-theme

This creates a basic theme in the themes/my-theme directory.

Step 4: Apply the Theme

Edit the config.toml file to use your new theme:

theme = "my-theme"

2. Design the Theme Layout

Step 1: Set up a basic structure

Inside the themes/my-theme/layouts directory, create the following files:

layouts/_default/baseof.html: Base template.
layouts/_default/single.html: Template for single pages.

Example for baseof.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ .Title }}</title>
</head>
<body>
    {{ block "main" . }}{{ end }}
</body>
</html>

Example for single.html:

{{ define "main" }}
<main>
    <h1>{{ .Title }}</h1>
    {{ .Content }}
</main>
{{ end }}

3. Add the Fabform.io Contact Form

Step 1: Create a Contact Page

Generate a new contact page:

hugo new contact.md

Edit the content/contact.md file:

---
title: "Contact"
---
<form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Send</button>
</form>

Step 2: Style the Form

Add custom CSS in the themes/my-theme/static/css/style.css file and link it in baseof.html:

<link rel="stylesheet" href="/css/style.css">

Example CSS:

form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
}
label, input, textarea, button {
    margin-bottom: 10px;
}
button {
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}

4. Test and Deploy

Step 1: Run Locally

hugo server

Visit http://localhost:1313/contact/ to test the contact form.

Step 2: Deploy

Build the site:

hugo

Deploy the public directory to your preferred hosting platform.

That's it! Your Hugo theme is ready with a functional Fabform.io contact form.

Static website forms

Po O — Tue, 07 Jan 2025 13:51:04 +0000

Understanding Static Websites and How to Use Static Website Forms with a Form Backend Service

Introduction to Static Websites

A static website consists of pre-rendered pages built with HTML, CSS, and sometimes JavaScript. Unlike dynamic websites, which rely on server-side scripts to generate content, static websites deliver fixed content to every visitor. They are fast, secure, and ideal for projects like blogs, portfolios, and landing pages.

Advantages of Static Websites

Blazing Fast Load Times: Since the content is pre-rendered, there’s no delay caused by server-side processing.
Enhanced Security: With no server-side code, static websites eliminate common vulnerabilities like SQL injection or unauthorized access to sensitive data.
Affordable Hosting: Static sites can be hosted for free or at very low costs on platforms like Netlify, GitHub Pages, or Vercel.
Ease of Development: No need for databases or backend infrastructure, making development and maintenance simple.
Scalable: Static sites can handle a surge in traffic without performance degradation.

Challenges of Static Websites

While static websites excel in simplicity and performance, they fall short when it comes to interactive features like handling forms. Without a backend server, forms can’t process or store submissions. To address this, developers use a form backend service like form backend service to enable features like email notifications, data storage, and webhook integrations for static website forms.

What Is a Form Backend Service?

A form backend service is a third-party tool that processes form submissions from static websites. It bridges the gap between the static site and dynamic functionality by managing submissions, sending email notifications, and even storing data for later retrieval.

Key Features of a Form Backend Service

Effortless Integration: Works seamlessly with any HTML-based static website forms.
Real-Time Email Notifications: Sends form submissions directly to your inbox.
Data Storage: Stores form submissions in a secure dashboard for review or export.
Webhook Integration: Automates workflows by sending data to other tools like Slack or Google Sheets.
Spam Protection: Includes built-in tools such as reCAPTCHA and honeypot fields to filter out bots.

How to Use a Form Backend Service for Static Website Forms

Here’s how to get started with static website forms using a form backend service:

1. Create Your HTML Form

Design a basic form to collect user input:

<form action="https://fabform.io/your-endpoint" method="POST">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  

  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  

  <label for="message">Message:</label>  
  <textarea id="message" name="message" required></textarea>  

  <button type="submit">Submit</button>  
</form>

2. Register with a Form Backend Service

Sign up for a form backend service like static website forms to get your unique form endpoint. Replace https://fabform.io/your-endpoint in your form’s action attribute with the provided URL.

3. Configure Form Settings

In the service dashboard, you can configure:

Email Notifications: Choose where form submissions should be sent.
Spam Protection: Enable reCAPTCHA or honeypot fields.
Webhook Integrations: Forward form data to apps like Google Sheets or Slack.

4. Deploy Your Static Website

Once the form is configured, deploy your static website to a hosting platform like:

Netlify
Vercel
GitHub Pages
Cloudflare Pages

Submit a test entry to verify that your static website forms are working correctly.

Advanced Features of a Form Backend Service

Workflow Automation with Webhooks

Webhooks allow you to integrate static website forms with other services. For example:

Automatically adding new form submissions to a Google Sheet.
Sending notifications to your team’s Slack channel.
Updating your CRM system with new leads.

Data Export

You can easily export form submissions as CSV or JSON files for record-keeping or further analysis.

Enhanced Spam Protection

Form backend services provide multiple layers of spam protection, including:

reCAPTCHA: Prevents bots from submitting forms.
Honeypot Fields: Invisible fields that trap spam bots.

Real-World Use Case: A Contact Form on a Portfolio

Suppose you’re a photographer with a portfolio hosted on GitHub Pages. You want clients to contact you via a simple form. By using static website forms, you can set up a fully functional contact form that forwards messages directly to your email. The service handles spam protection, data storage, and integration with your favorite tools, enabling a smooth workflow.

Benefits of Using a Form Backend Service

Simplifies Development: No need to build or maintain a backend for your forms.
Versatility: Works with any HTML-based form, regardless of framework.
Automation-Friendly: Supports integrations with popular tools for enhanced workflows.
Cost-Effective: Many form backend services offer free tiers for small projects.
Reliable and Secure: Keeps your data safe and provides robust spam protection.

Conclusion

Static websites offer speed, simplicity, and security, but they lack built-in support for handling forms. By integrating static website forms with a form backend service, you can easily enable dynamic functionality like email notifications, data storage, and automated workflows. Whether you’re building a portfolio, a blog, or a landing page, this solution simplifies form handling while maintaining the benefits of a static site.

Get started today and transform your static website into a powerful, interactive tool using static website forms powered by a reliable form backend service!