FabForm

Written by: Geoffrey Callaghan

create a contact form with AWS Amplify

Create A Contact Form With Aws Amplify

Creating a contact form with AWS Amplify using FabForm involves setting up your HTML form, deploying it using AWS Amplify, and configuring FabForm to handle the form submissions. Here’s a detailed 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 using AWS Amplify.

<!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

  1. Sign up for FabForm: Go to FabForm and create an account if you don’t have one.
  2. Create a new form: After logging in, create a new form in your FabForm dashboard. This will generate a unique form ID.
  3. 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 AWS Amplify

  1. Create a new directory for your project and navigate into it.
mkdir contact-form
cd contact-form
  1. Create your HTML file. For example, create an index.html file with your form code.
touch index.html
  1. Add your form code to index.html.

Step 5: Deploy Your Site Using AWS Amplify

  1. Sign up for AWS: If you don’t already have an AWS account, sign up at AWS.
  2. Install the Amplify CLI: Open your terminal and install the Amplify CLI globally.
npm install -g @aws-amplify/cli
  1. Configure the Amplify CLI: Run the following command and follow the prompts to configure the Amplify CLI with your AWS credentials.
amplify configure
  1. Initialize a new Amplify project:
amplify init
  1. Add hosting to your project:
amplify add hosting

Select the hosting options and continue with the prompts.

  1. Deploy your project:
amplify publish

Step 6: Test Your Form

After deployment, navigate to the URL provided by AWS Amplify 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://youramplifyapp.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://youramplifyapp.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 AWS Amplify using FabForm successfully.