Module 8 · Go live

Deploy on Vercel (and test the form for real)

Stage 7 of the kit begins. In this lesson your site stops being a folder on your laptop and becomes a website anyone can open. That step is called a deploy: publishing a site so anyone can open it. Then you’ll send a real message through the live contact form and watch it arrive, because a form that works on your laptop can still fail on the internet.

What hosting costs, honestly

Vercel is the company that will hold your site and send it to visitors. Vercel’s free plan is for non-commercial personal use, and a practice website is commercial, so choose Pro: $20 a month, which includes one seat (one person’s login) that can publish (as of September 2026). Check vercel.com/pricing for today’s price.

If $20 a month isn’t right for you, Netlify, another hosting company, has a free plan that allows commercial use. This course’s steps are written for Vercel.

Publish it

You’ll need your Web3Forms key from Module 5. It lives in .env.local on your laptop, a settings file that is never uploaded to GitHub. If you don’t have it to hand, ask Claude: “What’s my Web3Forms key in .env.local?” The key is public by design (it identifies your form; it isn’t a password), so it’s fine to look at.

1. Go to vercel.com/new.
2. Sign up or sign in using your GitHub account, the one from Module 7. That choice is what connects the two services, so don’t make a separate email-and-password account. Vercel may ask whether the site is personal or commercial, or which plan you want: choose Pro. Pro may then ask for a team name (your practice’s name is fine) and a payment card. If it doesn’t ask, or you already have a free account, you’re on the free plan: open your account settings and upgrade to Pro before you click Deploy. Check what your screen says.
3. When Vercel asks for access to your repositories, approve it.
4. Find your website’s repository in the list and click Import next to it. You should see a settings screen for the new project.
5. On the settings screen, change nothing except one section: open Environment Variables (Vercel moves its screens around, so check what your screen says). An environment variable is just a named setting the website reads when it starts. In the name box type NEXT_PUBLIC_WEB3FORMS_KEY. In the value box paste your Web3Forms key. Add it, and confirm both boxes were filled.
6. Only now, click Deploy.
7. Wait about a minute. The live link, ending in .vercel.app, appears on the congratulations screen and at the top of the project page. Open it: you should see the same site as in your preview.

Please use the Vercel plugin to deploy my site to Vercel. If it isn't installed, install it
from the official Anthropic marketplace first (/plugin install vercel@claude-plugins-official).
Before the first deploy, add NEXT_PUBLIC_WEB3FORMS_KEY from my .env.local as an environment
variable in Vercel so my contact form works on the live site. Then give me the live link and
remind me to send a test message through the live form. I'm not technical, so tell me exactly
what to click if I need to approve something in my browser.

Test the form for real

You tested the form on your laptop in Module 5. This is the test that counts: the live site, the real inbox. Use made-up details only.

1. On your .vercel.app site, open the contact page. Fill it in as “Test Person,” test@example.com, and a message like “Live form test.” Nothing real.
2. Click Send my message. The thank-you page should load at its own address, ending in /thank-you, and start with “Thank you — I’ve got your message.”
3. Open your Google Workspace inbox. Within a few minutes you should see an email with the subject New message from your website. Check the spam folder too.
4. Delete the test email once it has arrived. It was a test; it doesn’t need keeping.

Then click through every page on your phone and on your laptop, and check that the crisis block shows at the bottom of every page with nothing covering it.

What if the email never arrives?

Work down this list in order. It’s almost always the first one.

• The key isn’t in Vercel. Open your project’s Settings, find Environment Variables, and look for NEXT_PUBLIC_WEB3FORMS_KEY. If it isn’t there, add it, then Redeploy from the Deployments tab and test again.
• The key is there but wrong. Compare it character by character with the one in .env.local; a missing last character is common. Fix it, Redeploy, test again.
• The inbox filtered it. Search the whole mailbox, spam included, for “New message from your website.” If it’s in spam, mark it as not spam so the next one lands properly.
• Your Workspace address isn’t receiving any email at all (test it from another account). Then the problem is Google’s setup, not the form: go back to “Set up the Workspace inbox” in Module 5 and finish Google’s “activate Gmail” step.
• The key was set up for a different address. Web3Forms sends to the email address the key was created for. If that isn’t your Workspace inbox, create a new key for the right address, update it in Vercel and in .env.local, and Redeploy.
• The page showed an error instead of the thank-you page. Copy the error text and give it to Claude: “My live contact form shows this error. Please find the cause and fix it.”

Web3Forms’ free plan allows 250 messages a month (as of September 2026), which is far more than a practice’s contact form receives, so a limit is very unlikely to be the problem.

The update loop, from now on

Vercel watches your GitHub copy. When it changes, the live site changes. So updating your website is now one sentence to Claude and about a minute of waiting:

Please save a snapshot of our changes and push them to GitHub so my live site updates.

What to check: Claude confirms the push, and about a minute later the change shows on the live site. Reload the page: you should see the new wording or picture. If you don’t, wait another minute and reload again. If the change alters what the site says, such as a fee, an opening, a state or a credential, the kit has Claude run the compliance check on the changed pages first, note it in compliance-log.md, and make a new dated archive afterwards.

Watch this step

The same connect-and-deploy you are about to do. Three differences. It uses the free plan, but Vercel's free plan is for non-commercial personal use, and a practice website is commercial, so choose Pro. It skips the environment variable step, so do ours first. And it points to the dashboard's optional analytics: leave those off any page with your contact form. It’s from an independent creator — credited below, so go give them a follow.

4:35