FabForm

Written by: Geoffrey Callaghan

Create A Contact Form With Gitlab Pages

Create A Contact Form With Gitlab Pages

Creating a “Contact Us” Form with GitLab Pages and integrating it with Fabform.io involves a few steps. Here’s a step-by-step guide:

Prerequisites:

  1. GitLab Account: Make sure you have a GitLab account and a repository where you want to host your website.

  2. Fabform.io Account: Sign up for a Fabform.io account if you don’t have one.

Step 1: Create Your Repository

  • Create a new GitLab repository where you’ll host your website.

Step 2: Set Up GitLab Pages

  • Navigate to your GitLab repository.
  • Go to Settings > Pages.
  • Choose a branch (for example, main or master) as your source branch.
  • Save the settings.

Step 3: Create Your Contact Us Page

  • In your GitLab repository, create an index.html file for your Contact Us page.
  • Edit the HTML to include the form and any other content you want.

Example index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
</head>
<body>

  <h1>Contact Us</h1>

  <!-- Your contact form code goes here -->
  <form action="YOUR_FABFORM_ENDPOINT" method="POST">
    <!-- Form fields go here -->
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- Add more fields as needed -->

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

</body>
</html>

Step 4: Set Up Fabform.io

  • Log in to your Fabform.io account.
  • Create a new form.
  • Customize your form fields as needed.
  • Get the form endpoint provided by Fabform.io. This is the URL where form submissions will be sent.

Step 5: Integrate Fabform.io Endpoint

  • Replace YOUR_FABFORM_ENDPOINT in your index.html file with the actual endpoint you obtained from Fabform.io.
<form action="YOUR_FABFORM_ENDPOINT" method="POST">
  <!-- Form fields go here -->
  <!-- ... -->
</form>

Step 6: Commit and Push Changes

  • Commit your changes to your local repository.
  • Push the changes to your GitLab repository.

Step 7: Check Your GitLab Pages

  • After pushing your changes, go back to Settings > Pages in your GitLab repository.
  • You should see a URL where your site is hosted. Visit this URL to view your Contact Us page.

That’s it! Now, when users submit the form on your Contact Us page, the form data will be sent to Fabform.io for processing. You can log in to Fabform.io to view and manage the form submissions.