Web Design Tutorials

How to Create a Working Contact Form With HTML and Receive Messages in Gmail

Have you created a contact form using HTML and CSS but struggled to receive messages in your Gmail account? This tutorial will guide you through the simplest way to achieve that without using any server-side scripts.

Step 1: Set Up Your Contact Form

Before we begin, ensure you have your contact form ready. Check out our previous video that details how to build a contact form, If you haven’t created one yet. 

Step 2: Test Your Form

Initially, when you submit the form, it won’t send any messages or provide feedback. To make it functional, we’ll use a service that simplifies the backend process.

Step 3: Use Web3 Forms

Visit Web3 Forms: Open a new browser tab and navigate to web3forms.com.

Get Your API Key: Sign up for a free account, and enter your email address to receive an API key.

Copy the Action Code: After obtaining the API key, you’ll find an action code and input type code on the site. Copy the action code first.

Step 4: Update Your HTML Code

  1. Edit the Action Attribute: Replace the empty action attribute in your HTML form with the action code you copied from Web3 Forms.
  2. Add the Input Type Code: Copy the input type code and paste it just above your existing username input field in the HTML.
  3. Insert the Access Key: Finally, paste the access key (received in your email) into your form.

Step 5: Test the Form

Now it’s time to test! Fill in your name, email address, and a message, then hit “Send Message.” If everything is set up correctly, you’ll see a confirmation message, and you should receive an email in your Gmail inbox with the details of the submission.

Conclusion

That’s it! You can now successfully receive messages from your contact form directly to your Gmail account, making it easy to engage with visitors. If you found this tutorial helpful, please give it a thumbs up, and stay tuned for more!