Building a Local Business Website with Custom Contact Forms in Hugo

Creating a website for your local business is a vital step in attracting new customers and establishing an online presence. Hugo, a fast and flexible static site generator, offers excellent tools for building a professional website. One key feature that can enhance your site is a custom contact form, allowing visitors to reach out directly.

Getting Started with Hugo

Hugo is known for its speed and simplicity. To begin, download and install Hugo from the official website. Once installed, create a new site using the command:

hugo new site my-business-site

After setting up your site, choose a theme that fits your business style or develop a custom theme to match your branding.

Adding a Custom Contact Form

Hugo generates static pages, so to include a contact form, you’ll need to integrate a third-party service like Formspree or Netlify Forms. Here’s how to set up a simple contact form using Formspree:

Creating the Form

In your Hugo site’s content, create a new page or add the form to an existing page. Use the following HTML snippet:

<form action="https://formspree.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="_replyto" required>
  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Configuring Your Form

Replace your-form-id with the ID provided by Formspree after you register your email address. This setup ensures that form submissions are sent directly to your email.

Customizing Your Website

To make your site more appealing, customize your theme with your branding. Add your logo, change colors, and include images of your products or services. Use Hugo’s built-in shortcodes and partials to organize your content efficiently.

Launching Your Site

Once your content and design are ready, build your site using the command:

hugo

This generates static files in the public folder. Upload these files to your web hosting provider to make your website live.

With a professional website and a custom contact form, your local business will be well-positioned to attract and engage customers online.

Table of Contents