As students or individuals on a tight budget, hosting and domain expenses can be a challenge when working on projects. Fortunately, GitHub Pages provides a solution by offering free hosting for static websites. While GitHub Pages don't support backend executions or databases, it is still possible to add dynamic elements to your portfolio website, such as a contact form. In this blog post, we'll explore how you can leverage a third-party service called Un-Static to add a contact form to your GitHub Pages site.
Understanding GitHub Pages and Static Websites:
GitHub Pages is a hosting service provided by GitHub that allows users to publish static websites directly from their repositories. Static websites consist of HTML, CSS, and JavaScript files that are served to visitors as-is, without any server-side processing. This means that features like form handling, which require backend executions, cannot be directly implemented on GitHub Pages.
Introducing Un-Static:
Un-Static is a third-party service that offers a simple and secure solution for handling form submissions on static websites, including those hosted on GitHub Pages. By offloading the form handling to Un-Static, you can enable visitors to send you emails through a contact form on your website.
Step 1: Creating an HTML Contact Form:
To get started, you need to create an HTML-based contact form that you can reference from your GitHub Pages website. This form will collect the necessary information from visitors, such as their name, email address, and message. Here's an example of a basic contact form:
<form action="https://un-static.com/your-form-id" method="POST"> <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> <label for="message">Message:</label> <textarea id="message" name="message" required></textarea> <button type="submit">Submit</button> </form>
Step 2: Setting up Un-Static:
To handle form submissions, you'll need to create an account on Un-Static's website (https://un-static.com/) and obtain a unique form ID. This ID will be used in the action attribute of your contact form's <form> tag. Un-Static will process the form data and send it to your specified email address.
Step 3: Integrating the Contact Form on GitHub Pages:
Once you have your form ID from Un-Static, you can add the contact form to your GitHub Pages website. You can create a new HTML file, such as contact.html, and include the contact form HTML code within it. Save the file and commit it to your GitHub repository.
Step 4: Deploying Your GitHub Pages Site:
After committing your changes, GitHub Pages will automatically deploy your updated website. You can access your website by visiting https://<username>.github.io/your-repository/contact.html, where <username> is your GitHub username and your-repository is the name of your repository.
By leveraging Un-Static, a third-party service that specializes in handling form submissions for static websites, you can add a contact form to your GitHub Pages site. This enables visitors to send you emails and interact with your portfolio website. Remember to create an HTML-based contact form, obtain a form ID from Un-Static, integrate the form into your GitHub Pages site, and deploy your changes. Enjoy the benefits of having a dynamic element on your otherwise static website, and make it easier for people to reach out to you.