Suppose we have a website with a contact/lead form:

<form>
    <input type="text" placeholder="Your Name">
    <input type="email" placeholder="Your Email">
    <input type="tel" placeholder="Phone Number">
    <button>Submit</button>
</form>

When a user submits the form, we want their details to reach our email.

We want this information to arrive in our email as a lead.

A static website normally contains:

HTML
CSS
JavaScript

There is no server running our own backend.

JavaScript running in the browser should not contain email/server passwords or SMTP credentials.

So this is not a proper solution:

sendEmail("[email protected]");

The browser needs an external service or backend to process the form.

How does it work?

For a static website, we can use a form service such as Formspree or Web3Forms.

The flow is:

User
  ↓
Website Form
  ↓
Form Service
  ↓
Email
  ↓
Website Owner

For example:

User submits form
        ↓
     Formspree
        ↓
  Your email inbox
        ↓
    New Lead

No backend is required on our website.

Example Using Formspree

First, create an account on Formspree and create a form.

The service will provide a URL similar to:

https://formspree.io/f/xxxxxxxx

We then use that URL in our HTML form.

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
</head>

<body>

    <h1>Contact Us</h1>

    <form 
        action="https://formspree.io/f/YOUR_FORM_ID" 
        method="POST"
    >

        <label>Name</label>
        <input 
            type="text" 
            name="name" 
            placeholder="Enter your name"
            required
        >

        <br><br>

        <label>Email</label>
        <input 
            type="email" 
            name="email" 
            placeholder="Enter your email"
            required
        >

        <br><br>

        <label>Phone</label>
        <input 
            type="tel" 
            name="phone" 
            placeholder="Enter your phone number"
            required
        >

        <br><br>

        <label>Message</label>
        <textarea 
            name="message" 
            placeholder="Enter your message"
        ></textarea>

        <br><br>

        <button type="submit">
            Submit
        </button>

    </form>

</body>
</html>

Why do we use name?

<input type="text" name="name">

The name tells the form service what this piece of information represents.

Example:

<input type="text" name="name">
<input type="email" name="email">
<input type="tel" name="phone">

The submitted data will be understood as:

name → Rahul
email → [email protected]
phone → 9876543210

Without proper name attributes, the form service may not receive the fields correctly.

Understanding action

This:

<form action="https://formspree.io/f/YOUR_FORM_ID">

tells the browser:

"When this form is submitted, send the form data to this URL."

Where does JavaScript come in?

If we're building a simple static website, JavaScript isn't required just to submit the form.

HTML can handle the submission:

<form action="..." method="POST">

But JavaScript becomes useful when we want things like:

• Custom validation
• Loading animation
• Success message
• Error message
• Prevent page reload
• AJAX/fetch submission
• Resetting the form
• Sending data without leaving the page