在 Github 页面上创建带有联系表单的静态网页

什么是 GitHub 页面？

GitHub Pages 允许您直接从 GitHub 仓库托管网站。它可以托管直接从 GitHub 仓库获取 HTML、CSS 和 JavaScript 文件的静态网站。它无法执行 PHP 等服务器端代码，因此我们无法添加重定向到 PHP 文件的联系表单。这时 Formspree 就派上用场了。

步骤

步骤 1：创建一个名为 的新存储库<username>.github.io。<username>是您的 GitHub 用户名。

注意：我的仓库名称显示错误，因为我已经有一个名为 的仓库CharalambosIoannou.github.io。此外，该仓库必须设置为公开。

步骤 2：创建静态页面。确保主 html 文件名为index.html。

就我而言，我已经创建了我的投资组合网站，如下图所示。

步骤 3：导航至formspree

1) 在Formspree中，点击右上角的注册按钮，输入您的电子邮件地址和密码。2
) 验证您的电子邮件地址。3
) 点击+按钮并输入表单名称。电子邮件地址输入框将自动填充您注册 Formspree 时使用的电子邮件地址。

4) 然后您可以将 formspree 提供的代码复制粘贴到您的网站中。

我稍微修改了这段代码，以便访客也能添加消息。代码如下：

<div id="contact">
        <h2>Get in Touch</h2>
        <div id="contact-form">
                <form action="https://formspree.io/mpzyqdng" method="POST">
                <input type="hidden" name="_subject" value="Contact request from personal website" />
                <input type="email" name="_replyto" placeholder="Your email" required>
                <textarea name="message" placeholder="Type your message" required></textarea>
                <button type="submit">Send</button>
            </form>
        </div>
    </div>

此代码产生以下结果：

https://<username>.github.io/步骤 4：将您的代码推送到 GitHub 并通过输入URL导航到您的网站。

如果一段时间后您仍看不到您的网站，请转到您的存储库，单击设置，向下滚动直到看到名为“GitHub Pages”的部分，然后单击源子部分中的无下拉菜单并将其设置为主分支。

如果您在“GitHub Pages”部分看到此消息，则表明您的网站是否已发布：

第 5 步：测试您的表单。

如果您想测试表单，请访问您的网站并填写表单。
点击发送按钮后，我们会被重定向，并需要验证我们不是机器人🤖。勾选此框后，您很快就会收到一封电子邮件，其中包含发件人提供的所有详细信息。

就是这样！！！

我希望您发现这很简单并且有用。

P/S：这是我的第一篇文章。希望你喜欢😄。

探索愉快！！

资源：GitHub