create a contact form on DigitalOcean App Platform

Creating a contact form on DigitalOcean App Platform with FabForm involves setting up your HTML form, configuring FabForm to handle form submissions, and deploying your site using DigitalOcean App Platform. Here’s a comprehensive guide to help you through the process:

Step 1: Create an HTML Form

Create a new directory for your project:
```
mkdir contact-form
cd contact-form
```
Create an HTML file for your contact form:
```
touch index.html
```

Edit index.html to include your contact form:

<!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>
    <style>
        /* Add your custom styles here */
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        form {
            max-width: 500px;
            margin: auto;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, textarea, button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</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>

        <input type="hidden" name="redirect" value="https://your-digitalocean-app-url/thank-you">

        <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 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: Deploy Your Application on DigitalOcean App Platform

Sign in to DigitalOcean: If you don’t have an account, sign up for DigitalOcean.
Go to App Platform: Navigate to the App Platform section in your DigitalOcean dashboard.
Create a new app:
- Click on “Create App”.
- Select the repository where your project is hosted (GitHub, GitLab, or Bitbucket).
- Connect to your repository and configure the settings:
  - Build and run settings: If you have a build command (like npm run build) and a start command (npm start), configure them. For static sites, you may not need a build command.
  - Environment variables: Set any necessary environment variables (e.g., API keys).
  - Public directory: Set this to the directory containing your static files (/ if index.html is at the root).
Deploy your app: Click on “Deploy to DigitalOcean”. The deployment process will begin, and DigitalOcean will build and deploy your application.
Access your app: Once deployed, DigitalOcean will provide you with a URL to access your application.

Step 5: Test Your Form

Navigate to your DigitalOcean App URL: After deployment, go to the URL provided by DigitalOcean 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://your-digitalocean-app-url/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>
    <style>
        /* Add your custom styles here */
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        form {
            max-width: 500px;
            margin: auto;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, textarea, button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</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://your-digitalocean-app-url/thank-you">

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

By following these steps, you should be able to create a contact form on DigitalOcean App Platform with FabForm successfully. This guide ensures your form is set up correctly, deployed, and tested to work with FabForm for handling submissions.