在 Markdown 中使用免费的 Form 代理

一、引言

在互联网应用中，表单是收集用户输入信息的常见方式。然而，直接处理表单数据可能会带来安全风险，如跨站脚本攻击（XSS）或跨站请求伪造（CSRF）。为了解决这些问题，开发者经常使用表单代理（Form Proxy）来中转和处理表单数据。免费的 Form 代理服务，如 getform.io，提供了一个简单而安全的方式来接收和处理表单数据，而无需在服务器端编写复杂的代码。

二、实现

1：选择 Form 代理服务

首先，我们选择 getform 作为我们的 Form 代理服务。getform.io 提供了简单易用的表单创建和管理功能，同时支持免费使用。在 getform.io 的官方网站上注册账号并登录后，选择创建新的表单。getform.io 会自动生成一段表单代码，这段代码包含了表单的 HTML 结构以及必要的 JavaScript 代码，用于将数据提交到 getform.io 服务器进行处理。
如果你是本地开发环境使用，那么就需要将 localhost 添加到白名单中。点击右侧设置，把自己的域名添加进白名单

2、编辑 markdown 页面

将 getform 中生成的 form 代码粘贴到 markdown 中

+++
title = "联系我"
date = 2024-02-09T16:55:23+08:00
draft = false
showDate = true
comments = true
showMeta = true
showActions = true
+++

<form action="https://getform.io/f/a0800f1f-99f5-4631-bfa5-2b2353997ff4" method="POST">
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="text" name="message">
    <!-- add hidden Honeypot input to prevent spams -->
    <input type="hidden" name="_gotcha" style="display:none !important">
    <!-- checkbox handle -->
    <input type="checkbox" name="subscribe" value="yes" checked>
    <input type="hidden" name="subscribe" value="no">
    <!-- radio button handle -->
    <input type="radio" name="gender" value="male" checked>
    <input type="radio" name="gender" value="female">
    <input type="radio" name="gender" value="other">
    <!-- select field handle -->
    <select name="work-experience">
        <option value="one-year">0-1 years</option>
        <option value="one-five-years">1-5 years</option>
    </select>
    <button type="submit">Send</button>
</form>

效果如下
按自己需要，对 form 代码做修改

+++
title = "联系我"
date = 2024-02-09T16:55:23+08:00
draft = false
showDate = true
comments = true
showMeta = true
showActions = true
+++

<div class="content">
    <form name=contact action="https://getform.io/f/a0800f1f-99f5-4631-bfa5-2b2353997ff4" method=post>
    <div class="mb-4">
         <input type=text placeholder="Your Name" name=name class="w-full p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500 dark:bg-warmgray-700 dark:border-warmgray-700 dark:focus:bg-warmgray-800" required>
    </div>
    <div class="mb-4">
        <input type=text placeholder="Email Address" name=email class="w-full p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500 dark:bg-warmgray-700 dark:border-warmgray-700 dark:focus:bg-warmgray-800" required>
    </div>
    <div class="mb-4">
        <input type=text placeholder="Subject" name=title class="w-full p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500 dark:bg-warmgray-700 dark:border-warmgray-700 dark:focus:bg-warmgray-800" required>
    </div>
    <div class="mb-4">
        <textarea rows=5 cols=30 placeholder="Message" name=message class="w-full p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500 dark:bg-warmgray-700 dark:border-warmgray-700 dark:focus:bg-warmgray-800" required></textarea>
    </div>
    <input type=submit value="Submit" class="w-full button duration-100 py-2 bg-gray-800 text-white cursor-pointer transition-colors hover:bg-gray-600">
    </form>
</div>