Method 1: Using Website Builder Tools

If you're using a website builder like Wix, Squarespace, or similar, adding a contact form is straightforward:

Wix Instructions

1. In the Wix Editor, click the "+" (Add) button
2. Select "Contact & Forms"
3. Choose your preferred contact form layout
4. Click "Add to Page"
5. Select the form and click "Settings" to customize fields and email settings
6. Set the email address where you want to receive submissions
7. Customize confirmation messages and design as needed
8. Publish your website

Squarespace Instructions

1. In the Squarespace editor, add a new section/block
2. Select "Form" from the options
3. Choose from available templates or start with a blank form
4. Click the "Edit" button to customize fields
5. Click the gear icon to configure form settings
6. Set your receiving email address and other options
7. Save and publish your changes

Method 2: Using WordPress Plugins

WordPress makes it easy to add contact forms using plugins:

Contact Form 7 (Most Popular)

1. Log in to your WordPress dashboard
2. Go to Plugins > Add New
3. Search for "Contact Form 7"
4. Click "Install Now" then "Activate"
5. Go to Contact > Contact Forms
6. You'll see a default form already created. Click "Edit" to customize it
7. Modify the form fields as needed
8. In the "Mail" tab, set your email address
9. Save your changes
10. Copy the shortcode provided (looks like [contact-form-7 id="1234" title="Contact form 1"])
11. Create or edit the page where you want the form
12. Paste the shortcode where you want the form to appear
13. Publish or update the page

WPForms (More User-Friendly)

1. Log in to your WordPress dashboard
2. Go to Plugins > Add New
3. Search for "WPForms Lite"
4. Click "Install Now" then "Activate"
5. Go to WPForms > Add New
6. Choose the Simple Contact Form template
7. Customize fields using the drag-and-drop builder
8. Go to Settings > General to configure form name and description
9. Go to Settings > Notifications to set your email address
10. Click "Save" when finished
11. Create or edit the page where you want your form
12. Click the "Add Form" button in the editor
13. Select your form and add it to the page
14. Publish or update the page

Method 3: Using Form Service Providers

For custom HTML websites, third-party form services make it easy to add forms without server-side programming:

Formspree (Free for Basic Use)

1. Go to Formspree.io
2. Create a free account
3. Create a new form
4. Enter your email address and form name
5. Copy the HTML code provided
6. Paste the code into your website's HTML where you want the form to appear
7. Upload the updated file to your server

<!-- Example Formspree Code -->
<form action="https://formspree.io/f/your-form-id" method="POST">
  <label>
    Your Name:
    <input type="text" name="name" required>
  </label>
  <label>
    Your Email:
    <input type="email" name="email" required>
  </label>
  <label>
    Message:
    <textarea name="message" required></textarea>
  </label>
  <button type="submit">Send</button>
</form>

Google Forms (Free)

1. Go to Google Forms
2. Create a new form
3. Add questions and customize as needed
4. Click the "Send" button
5. Select the "Embed" tab (looks like <>)
6. Copy the iframe code provided
7. Paste the code into your website's HTML where you want the form to appear
8. Upload the updated file to your server

Method 4: Custom HTML + Form Processor

For more control, you can create your own HTML form and connect it to a form processing service:

Creating the HTML Form

Start with this basic HTML contact form template:

<form action="https://formsubmit.co/your-email@example.com" method="POST">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" required>
    </div>
    
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" required>
    </div>
    
    <div class="form-group">
        <label for="subject">Subject</label>
        <input type="text" name="subject" id="subject" required>
    </div>
    
    <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" id="message" rows="5" required></textarea>
    </div>
    
    <button type="submit">Send Message</button>
</form>

Form Processor: FormSubmit

FormSubmit is a free service that processes HTML forms and sends the submissions to your email:

1. Replace "your-email@example.com" in the form action with your actual email
2. Upload the form to your website
3. The first time someone submits the form, you'll receive an activation email
4. Confirm the activation, and future submissions will be sent directly to your email

Customizing Your Form

To make your form look better and work well, consider these additions:

Add Basic CSS Styling

Add this to your website's CSS file or in a <style> tag in the <head> section:

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #45a049;
}

Add Form Validation

HTML5 includes built-in validation with attributes like "required", "type="email"", etc. For more advanced validation, you can use JavaScript.