DEV Community: Ben

How I set up a simple contact form automation with n8n

Ben — Wed, 29 Jul 2026 11:34:36 +0000

I didn’t want my website code to handle all the email data going through the contact form. Instead, I wanted an automated workflow to handle all my sites emails. I thought it would be simple – until I spent two hours wondering why I was getting 403 errors.

Why do it in the first place?

I think automation platforms like n8n, Power Automate, Zapier are one of the best ways to understand modern systems. By seeing the connections, the authentications, the transfer of data, you learn about modern tech in a way that programming or networking just don’t provide.

It’s also great for those who don’t want to deep dive into coding; that’s not to say it’s easy, as you’ll soon see, but you don’t end up burying integrations under oceans of code.

Workflows also act like a hub for a particular function within your stack; it’s a visual dashboard, which in code, might be spread across a whole project.

When it comes to email, using workflow automation opens up countless outcomes which would be more intimidating with code:

Send enquiries straight to your CRM
Sync customer requests with calendars or task managers
Add AI classification or summarisation
Notify your team through Slack, Teams or Discord
Swap email providers without changing your application code (this one is huge)

In short, it’s simpler, more accessible, and more scalable.

This article assumes you already have a contact form wired up with an API. This can be done through code or through no-code platforms.

Anyway, onto the automation.

How did I do it?

1. The contact form

This automation starts with the contact form. A user enters their query in the query box, and their email in the email box. These boxes will be relevant later.

In the image you can see ‘Hi’ is in the query box and an email is in the email box.

Clicking Send activates an API in the codebase.

The API specifies the headers and body of an HTTP request, which will be relevant later.

The API then sends the request on a specific path provided by the n8n webhook node. Speaking of which…

2. The webhook

In n8n, I picked a webhook node. This is the ideal tool because my application (website) is the one initiating the communication. The workflow just sits there waiting for it. Scheduled triggers would be wasteful, so it’s down to a webhook.

This is the webhook node. You can see at the top is the URL used to access the workflow. The HTTP method is set to POST because something is being changed.

Authentication is set to header auth because otherwise the webhook path is just an exposed online endpoint – I doubt anyone would exploit it but in the modern day, you want to make sure you’ve plugged as many of those gaps as possible.

Remember those HTTP headers I mentioned in the first step? The name of the credentials AND the webhook secret (the password) have to be set up exactly as they are in the API.

They also need to be saved as environment variables in your hosting service (I’m using Vercel). This is essential.

3. Create and send an email

Now what we need is for an email to come into my inbox, containing the information the user inputted to the contact form.

There’s a few ways to do this.

The most obvious is to set up credentials (yes more credentials) to allow n8n to actually log into a given email and send from there. I’m in favour of avoiding this wherever possible; it’s another entry, another opening that can be exploited.

So I used Resend, an email service made for developers in situations like these.

You don’t even need to set anything up in Resend for this, it’s really simple.

As you can see in the image, you set the operation to send, and set ‘from’ to onboarding@resend.dev, which is a default email just for this, so you don’t even need to set up credentials. All you have to do is install the Resend nodes in n8n.

Now, the query and email boxes I mentioned in the first step come back into play here.

All the data on the left side of the screen is part of the data that’s so far been passed through the workflow; you won’t see this until you actually execute a test workflow, and it’s essential you do this for pretty much every automation, so you can see the data you’re working with.

Among those data, are query, and email. You can drag and drop them into the text body. I have it set so the email will show the query text, and then ‘from’ followed by the email the user entered. Using the example entry I did in the first picture, my email would now show as it does in the image.

This is called dynamic mapping, and it’s one of my favourite things about automation. It makes things so simple.

Being able to see the data fields is so helpful for putting the data into the different formats needed for different platforms.

4. Return an email

This step isn’t essential but I think it’s nice for users to receive a polite response acknowledging their reaching out to you.

You’d think it would be similar to the last step, but it’s a bit more complex.

Because now the email appears to be coming from my domain. Appears is the important word; I use contact@benfosterdev.com, but that’s not a real email. The Resend service just pretends to send from that address.

It’s not actually as complex as it sounds; in Resend you go to domains, add the domain from which you wish your email to appear to return from (I use my domain benfosterdev.com). You then verify with your domain provider; if you use Cloudflare it’s very easy.

For this step you do need a credential with Resend, and you set that up using an API key from the Resend site.

In the image, you can see how I specify the name I want the email to come from, and how I’ve dynamically mapped the email field from the webhook node in the ‘To’ section; in my example, it will go to Judge@holden.net.

The subject will say BFdev, and the body will read as it does there in the image.

And that’s it!

Problems

Simple…

Or it should be…

As mentioned earlier, the HTTP request specifies both the headers and the body of the request.

And this is where n8n can trip you up – credentials are a beast of their own. What exactly are credentials in n8n?

They are sets of login details you create, either so your n8n can access a platform (like logging into an excel spreadsheet to make changes), or so that something else can access your workflow.

In this case, it’s the latter; an API is trying to access the workflow.

And when you write that API, the header has a name. And this must match the name value in the credential you build on n8n. That’s not the name of the credential; it’s the name VALUE of the credential.

I didn’t do this.

As a result, I spent hours spamming the API and staring angrily at error messages.

Don’t be like me, get your credential values right.

And that’s it. You now have a simple, functional contact form automation. There are some methods for tightening it up and making it more professional, but that’s for another article.

Salient points of this automation

Dynamic mapping makes everything easier.
You need to verify your domain to allow the Resend service to send on your behalf; this involves DNS SPF records and is a great opportunity to learn a bit more about how the internet works.
Make sure to test the automation while building to pass the data required for mapping fields.
And make sure your credentials are properly named!

About the author

I'm Ben Foster, a software developer building AI-powered automation systems for SMEs.

I write about Next.js, n8n, automation and software engineering at https://benfosterdev.com.

How I'm Building my First Full Stack Project

Ben — Thu, 19 Mar 2026 10:36:27 +0000

Is AI just hype, or can it actually be safely and effectively integrated into modern business systems?

I'm currently undertaking my first full stack project.

It's called BFshop and on the surface you'd be forgiven for thinking it's just another E-commerce project but there's two things that will set BFshop apart:

There will be a customer storefront (currently live and under construction in the projects section of my website) where orders can be placed. There will also be a merchant interface tracking these same orders which will pass between received, sent and delivered status
It will be a fully business system including work flows made with n8n

But it's still missing something...

What could it be missing?

What is the one essential ingredient in 2026?

We all know what it is.

AI.

How am I going to implement AI without it being AI for the sake of AI?

Think of BFshop as a two lane structure.

Lane 1: traditional interactivity connects frontend to backend; you click submit order, shipment ready, etc
Lane 2: the same connections are made, but by an AI at your request

The AI assistants for the customer and merchant side will differ to reflect the needs of the user on each side;

the customer end AI will be for querying order details, product suggestions; typical things a shopper wants to know when browsing
the merchant end AI will be for querying stock and triggering workflows where suitable

Why does this matter?

AI is not going anywhere any time soon. We all hear about how it will make developers redundant. My answer is to embrace and utilize AI.

I don't want to be drowned beneath the tide, I want to surf on its peak.

The two lane system allows for

Regular user control
AI control as directed by the user
Both paths to travel through the same gateway, but with the right rules and restrictions applied to each.

But that's not all.

We're still in AI's honeymoon phase. Its workplace implementation is still yet to be fully cemented as more than novelty. Its true place in the business world has yet to be found.

Do I know what that will be?

No.

But what I do know is that control and oversight of AI systems will need to have their place.

That's why I'm going to build AI Overwatch into BFshop.

AI Overwatch

AI Overwatch will be a control center for everything AI in the merchant app.

Concerned your AI assistant changed something it shouldn't have? Check the activity logs.

Want to make sure the AI doesn't have the ability to delete data? Check the Capability registry.

And so on.

BFshop will fully enhance the incredible power of the modern day, without sacrificing safety, responsibility, or human control.

Project Structure & Specifications

The customer end of BFshop (BFcustomer) is part of my main website folder structure, as it started as a simple project. As the project grew, I decided to build the rest (BFmerchant) in a separate folder for better organization. BFshop will live on a subdomain, so it remains accessible from the main site.

Dependencies

Tailwind CSS for styling (my preferred tool)
Prisma for database connection
Neon as the database (after issues with Supabase)

Setting up Neon was challenging, but I learned the basics of attaching a database to a project by doing and asking for help when needed. Even if I don’t know every command, I now understand the process better.

Styling Consistency

If I could rebuild my site, I’d set clear styling rules from the start. For this project, I’ve created lists for spacing and typography per screen size. I’ll keep fonts and colors simple and professional.

For example:

Heading to body spacing

h1 to next text: mb-4 md:mb-6
h2 to next text: mb-3 md:mb-4
h3 to next text: mb-2 md:mb-3

Grid/card gaps

Mobile: gap-4
Tablet: md:gap-6
Desktop: lg:gap-8

This enforcement will keep things orderly and clean, giivng it that professional look my website currently lacks.

API

Both BFCustomer and BFmerchant will communicate with the database via the API in BFmerchant. This may not be perfect, but it’s a workable structure for now.

The APIs will enforce rules that govern communication between front and backend, and will be particularly relevant when it comes to oversight of AI activity

AI Disclaimer

I use AI as a mentor and assistant, especially for learning new concepts, repeated structures, and complex tasks. My goal is to learn and understand, not just copy-paste. I’ll also use AI to audit the project as I go.

Next Steps

Practice writing APIs
Deploy BFmerchant on a subdomain of benfosterdev.com
Wire up APIs to BFCustomer

Planning the project like this is a big step for me. For my main website, I always rushed into building because I was excited to get going. The extent of my preparation was mapping out the intended structure of each page and how the divs would look, with minimal planning on what styling options would be used to produce a cleaner and scalable design. I also gave no thought to the overall structure of the site and how each element would work together. This is partly because it was planned as a purely frontend project, so data was always an afterthought. Now, going into BFshop, the structure is clear in my head, meaning I can accurately map out each section's basic layout enough to give me 'wall sockets' where the API 'cables' will plug into.

Take a look at my website at benfosterdev.com to see as the project progresses!

How to Use AI to Enhance Your Skills

Ben — Fri, 27 Feb 2026 19:19:30 +0000

I went from zero IT knowledge to IT manager in 12 months. What made that possible?

Artificial intelligence.

Some think it’s going to take over the world. Others think it’s for lazy people who can’t be bothered to do their own work.

They’re both wrong — AI is a free, personalised tutor. An expert on any subject, available 24/7.

Why Traditional Self Learning Fails

Self-learning has never been easier. YouTube tutorials, online courses, endless articles — it's all there.

But there's a problem.

Traditional learning is passive. You watch a video, read an article, move on. When you don't understand something, you're stuck. The video can't answer your specific question. The book doesn't know where you're confused.

Even online forums and comments sections don’t solve this fully — context-specific guidance, formed in a way that works for your learning style, is ideal.

That's where tutors come in. They provide feedback. They answer your questions, clarify confusion, adapt to how you learn.

But tutors are expensive. AI isn’t.

Tutors go to bed at night. AI doesn’t.

You get tutors for a slot of their time — that’s the only time you can bounce ideas off them. Had a realisation in the middle of the night when you can’t sleep? AI is happy to talk.

As if that’s not enough, AI has access to an enormous amount of human knowledge.

Want to understand ancient civilisations? Marine biology? Aerodynamics?

Ask.

How I Actually Use AI to Learn

Countless times I’ve watched a YouTube video and understood maybe 30% of the concepts.

With AI, I’ll repeat the words, explain the context, and have it break things down step by step. I probably won’t get it first time — but between back-and-forth messages, it eventually clicks.

Here’s a real conversation I had while learning DNS.

Me:

It’s all well and good knowing that “DNS is the phonebook of the internet” but how does it actually work? How does the process of domain name resolution occur during internet searches and communications?

AI:

When you type 'google.com' into your browser:

Your computer checks its local cache — have I looked this up recently?

If not, it asks your DNS resolver (usually your ISP).

The resolver asks the root server: who handles .com?

The root server points to the .com TLD server.

The resolver asks the TLD server: who is authoritative for google.com?

The TLD server points to Google’s nameserver.

The resolver asks Google’s nameserver for the IP.

The IP is returned.

Your browser connects.

All in milliseconds.

The “phonebook” metaphor is the what.

This is the how — a chain of servers passing your request up the hierarchy until someone knows the answer.

I could watch a YouTube video on this. Or read a web guide. The information would be the same.

But what if I don’t know what the resolver is?

What if I don’t understand authoritative nameservers?

What if I want this explained in the wider context of networking?

You can’t ask a YouTube video to clarify.

You can’t quiz a website.

But you can ask AI.

Generating Practice

Another way I use AI is generating exercises slightly above my level.

Me:

Give me a practice question on subnetting.

AI:

You have the network 192.168.10.0/24 and need 4 subnets.

What subnet mask do you need?

What are the 4 subnet addresses?

What is the usable range of the first subnet?

How many usable hosts per subnet?

When I didn’t understand the concept, I asked it to break it down.

It explained:

/24 means 8 host bits
8 bits = 256 addresses
Borrow 2 bits → /26
2^2 = 4 subnets
Each subnet has 64 addresses

It reframed it using analogies. It explained it in binary. It simplified it.

We went back and forth for 10 minutes until I could solve subnet problems independently.

That’s iterative learning.

Working Above Your Experience Level

AI doesn’t just help you learn theory.

It helps you learn by doing.

My first IT role involved managing a company’s entire IT infrastructure:

Intune
Entra ID
DNS
Domain hosting
Device management

A lot for a beginner.

For example:

Our website showed “Not Secure”. I knew it needed HTTPS, but didn’t understand SSL certificates.

So I asked:

What is a certificate?
Why does it encrypt traffic?
What is a certificate authority?

Once I understood the why, I asked how to implement it.

AI walked me through DNS migration, certificate generation, and installation.

When I hit errors, I pasted them in and asked what went wrong.

Three hours later, the site was secure.

And I understood the SSL/TLS process — not just which buttons to click.

That’s the difference.

The Framework

If you want to use AI like this:

Start with the basics — watch a tutorial, read an overview.
Ask AI to clarify confusion.
Request practice exercises.
Learn by troubleshooting.
Iterate until it clicks.

If it’s practical, let AI guide you through the process.

If it’s theoretical, get it to generate exercises.

If you don’t understand something, ask it to reframe it.

Nothing is too complex if you’re willing to keep asking.

And AI is infinitely patient.

Conclusion

We are in the AI gold rush.

Access to high-level education is free, instant, and in your pocket.

I used it to break into a new industry.

Now I’m using it to become a web developer.

Start today.

Pick something you want to learn.

Open your AI tool of choice.

Start asking questions.

Ben Foster — IT Manager transitioning into web development and AI-powered systems.