CREATE A contact form with Heroku

Creating a contact form with Heroku using FabForm involves several steps, including setting up your HTML form, deploying it to a Heroku web app, and configuring FabForm to handle the form submissions. Here’s a comprehensive guide to help you through the process:

Step 1: Create an HTML Form

Create a simple HTML file for your contact form. This file will be deployed on Heroku.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
</head>
<body>
    <form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br>

        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea><br>

        <button type="submit">Submit</button>
    </form>
</body>
</html>

Step 2: Configure FabForm

Sign up for FabForm: Go to FabForm and create an account if you don’t have one.
Create a new form: After logging in, create a new form in your FabForm dashboard. This will generate a unique form ID.
Copy the form ID: Copy the unique form ID provided by FabForm.

Step 3: Integrate FabForm with Your HTML

Replace the YOUR_FORM_ID in the action attribute of the form tag with the form ID you copied from FabForm. For example, if your form ID is abc123, your form tag should look like this:

<form action="https://fabform.io/f/abc123" method="POST">

Step 4: Set Up Your Project for Heroku

Create a new directory for your project and navigate into it.

mkdir contact-form
cd contact-form

Initialize a Git repository in your project directory.

git init

Create necessary files for deployment.

index.html: Add your HTML form code here.
Procfile: Heroku needs a Procfile to know how to run your application. Create a file named Procfile with the following content:
```
web: python -m http.server 8000
```

Create a requirements.txt file if you’re using Python. This file is needed to tell Heroku which dependencies to install. For serving a simple HTML file, you don’t need any dependencies, but you can create the file for completeness:

touch requirements.txt

Step 5: Deploy to Heroku

Login to Heroku:

heroku login

Create a new Heroku app:

heroku create

Add your files to Git:

git add .
git commit -m "Initial commit"

Deploy your code to Heroku:

git push heroku master

Step 6: Test Your Form

After deployment, navigate to the URL of your Heroku app to find your contact form. Test the form to ensure submissions are being sent to FabForm correctly.

Optional: Customizing Form and Handling Submissions

Styling the form: Use CSS to style your form according to your website’s design.
Thank you page: You can redirect users to a thank you page after submission by adding a redirect input field in your form:

<input type="hidden" name="redirect" value="https://yourherokuapp.herokuapp.com/thank-you">

Handling submissions: Check your FabForm dashboard to see the submissions. You can set up email notifications or webhook integrations as needed.

Example of the Final Form

Here’s how your final HTML form might look:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
</head>
<body>
    <form action="https://fabform.io/f/abc123" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br>

        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea><br>

        <input type="hidden" name="redirect" value="https://yourherokuapp.herokuapp.com/thank-you">

        <button type="submit">Submit</button>
    </form>
</body>
</html>

By following these steps, you should be able to create a contact form with Heroku using FabForm successfully.