Using Netlify Forms and Netlify Functions to Build an Email Sign-Up Widget

Building and maintaining a personal website offers numerous advantages, including ownership of your platform and the opportunity to explore web technologies. Recently, I delved into serverless functions, starting with my own site. This article shares my experience and learnings, enabling you to build your own!

A Quick Introduction to Serverless Functions

A serverless function (also known as a lambda function or cloud function) is a self-contained code snippet you can write, host, and execute independently of your website, application, or other code. While they run on servers, you don't manage the server infrastructure. This simplifies the development of powerful, scalable applications.

For a more in-depth understanding, CSS-Tricks' guide, "The Power of Serverless Front-End Developers," is an excellent resource.

Project Goal: A Simple Email Signup Form

My project focused on creating an email signup form with specific constraints:

• JavaScript-free functionality: The form should function with only CSS and HTML, allowing for progressive enhancements.
• No external dependencies: The goal was to write all the code myself.
• Serverless function integration: Email data processing would occur server-side, not client-side.

The Technology Stack: 11ty, Netlify, and Buttondown

My website uses 11ty, a static site generator, allowing HTML template creation. Netlify handles deployment and is crucial for serverless functionality, providing:

• Automated GitHub deployment: Simplifying the development workflow.
• Netlify Forms: Managing form submissions without custom code.
• Netlify Functions: Enabling server-side actions based on form data.

Buttondown serves as the email list management service. Importantly, for personal sites, all three services offer free tiers.

The Form's HTML

The HTML for my email subscription form is concise, leveraging Netlify Forms attributes:

Your email address Subscribe

data-netlify="true" instructs Netlify to handle the form. The bot-field input acts as a honeypot to detect bots, automatically hidden from users. Netlify's Akismet integration further protects against spam. The email input uses browser validation for enhanced user experience.

Progressive Enhancement with JavaScript

While Netlify Forms offers automatic redirects, I preferred keeping users on the page. A JavaScript function enhances the form's functionality:

const processForm = form => {
  // ... (Fetch API code to submit form without redirect) ...
};

This function, triggered by a submit event listener, progressively enhances the form, ensuring functionality even with JavaScript disabled.

The Serverless Function

The Netlify function, located in functions/submission-created.js, processes form submissions:

// ... (Node.js code using node-fetch and environment variables to send data to Buttondown) ...

The function retrieves the email address, uses node-fetch to send it to Buttondown via its API, and logs the result for debugging. Environment variables securely store the Buttondown API key.

Deployment and Local Testing

After writing the function, configuring netlify.toml, and setting environment variables, deployment is straightforward via Netlify's GitHub integration. Local testing is possible using Netlify Dev (npm i netlify -g, then netlify dev), though form submission testing requires preview builds.

Future Improvements

Future enhancements could include providing real-time feedback to users, such as indicating if an email address is already subscribed.

Conclusion

With approximately 50 lines of code, I created a fully functional email signup form. The combination of HTML, CSS, JavaScript, and Netlify's serverless features resulted in a spam-resistant, user-friendly form that works regardless of JavaScript availability.

The above is the detailed content of Using Netlify Forms and Netlify Functions to Build an Email Sign-Up Widget. For more information, please follow other related articles on the PHP Chinese website!