cloudfare-forms/index.html at main · fabforms/cloudfare-forms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cloudflare pages forms</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">
  <div class="container mx-auto p-6 max-w-4xl">

<h1 class="text-4xl font-bold mb-4"><strong class="font-bold">How to Create a Form on Cloudflare Pages Using FabForm.io</strong></h1>
<h2 class="text-3xl font-semibold mb-3"><strong class="font-bold">Overview</strong></h2>
<p class="text-base mb-4">This tutorial will guide you through creating a simple HTML form hosted on <strong class="font-bold">Cloudflare Pages</strong> and using <strong class="font-bold">FabForm.io</strong> to handle form submissions.</p>
<h2 class="text-3xl font-semibold mb-3"><strong class="font-bold">Prerequisites</strong></h2>
<ul class="list-disc pl-6 mb-4">
<li class="mb-2">A <strong class="font-bold">Cloudflare account</strong></li>
<li class="mb-2">A <strong class="font-bold">GitHub repository</strong> (to link with Cloudflare Pages)</li>
<li class="mb-2">A <strong class="font-bold">FabForm.io account</strong></li>
</ul>
<hr>
<h2 class="text-3xl font-semibold mb-3"><strong class="font-bold">Step 1: Create a FabForm.io Form Endpoint</strong></h2>
<ol>
<li class="mb-2">Go to <strong class="font-bold"><a href="https://fabform.io/" class="text-blue-500 hover:underline">FabForm.io</a></strong> and sign in.</li>
<li class="mb-2">Click <strong class="font-bold">&quot;Create Form&quot;</strong> and give it a name (e.g., &quot;Contact Form&quot;).</li>
<li class="mb-2">Copy the <strong class="font-bold">form endpoint URL</strong> (e.g., <code class="bg-gray-800 text-white p-2 rounded-md">https://fabform.io/f/{your-form-id}</code>).</li>
</ol>
<hr>
<h2 class="text-3xl font-semibold mb-3"><strong class="font-bold">Step 2: Create an HTML Form</strong></h2>
<p class="text-base mb-4">Now, let's create a simple form that will submit data to FabForm.io.</p>
<h3 class="text-2xl font-semibold mb-2"><strong class="font-bold">1. Create a GitHub Repository</strong></h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-2">Go to <a href="https://github.com/" class="text-blue-500 hover:underline">GitHub</a> and create a new repository (e.g., <code class="bg-gray-800 text-white p-2 rounded-md">cloudflare-form</code>).</li>
<li class="mb-2">Clone it to your local machine using:<pre class="bg-gray-100 p-4 rounded-md overflow-x-auto"><code class="language-sh">git clone https://github.com/your-username/cloudflare-form.git
cd cloudflare-form
</code></pre>
</li>
</ul>
<h3 class="text-2xl font-semibold mb-2"><strong class="font-bold">2. Add the HTML Form</strong></h3>
<p class="text-base mb-4">Inside the repository, create an <code class="bg-gray-800 text-white p-2 rounded-md">index.html</code> file and add the following code:</p>
<pre class="bg-gray-100 p-4 rounded-md overflow-x-auto"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Contact Form&lt;/title&gt;
    &lt;style&gt;
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        input, textarea, button {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 8px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;h2&gt;Contact Us&lt;/h2&gt;
    &lt;form action=&quot;https://fabform.io/f/{your-form-id}&quot; method=&quot;POST&quot;&gt;
        &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot; required&gt;

        &lt;label for=&quot;email&quot;&gt;Email:&lt;/label&gt;
        &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; required&gt;

        &lt;label for=&quot;message&quot;&gt;Message:&lt;/label&gt;
        &lt;textarea id=&quot;message&quot; name=&quot;message&quot; required&gt;&lt;/textarea&gt;

        &lt;button type=&quot;submit&quot;&gt;Send&lt;/button&gt;
    &lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p class="text-base mb-4">✅ <strong class="font-bold">Replace</strong> <code class="bg-gray-800 text-white p-2 rounded-md">{your-form-id}</code> with the actual FabForm.io form ID you copied earlier.</p>
<hr>
<h2 class="text-3xl font-semibold mb-3"><strong class="font-bold">Step 3: Deploy to Cloudflare Pages</strong></h2>
<h3 class="text-2xl font-semibold mb-2"><strong class="font-bold">1. Push the Code to GitHub</strong></h3>
<pre class="bg-gray-100 p-4 rounded-md overflow-x-auto"><code class="language-sh">git add .
git commit -m &quot;Initial commit&quot;
git push origin main
</code></pre>
<h3 class="text-2xl font-semibold mb-2"><strong class="font-bold">2. Deploy with Cloudflare Pages</strong></h3>
<ol>
<li class="mb-2">Go to <strong class="font-bold">Cloudflare Pages</strong>: <a href="https://dash.cloudflare.com" class="text-blue-500 hover:underline">https://dash.cloudflare.com</a></li>
<li class="mb-2">Click <strong class="font-bold">&quot;Create a Project&quot;</strong> → <strong class="font-bold">&quot;Connect to Git&quot;</strong></li>
<li class="mb-2">Select your GitHub repository (<code class="bg-gray-800 text-white p-2 rounded-md">cloudflare-form</code>)</li>
<li class="mb-2">Set the following build settings:
<ul class="list-disc pl-6 mb-4">
<li class="mb-2"><strong class="font-bold">Framework Preset</strong>: None</li>
<li class="mb-2"><strong class="font-bold">Build Command</strong>: (Leave empty)</li>
<li class="mb-2"><strong class="font-bold">Output Directory</strong>: <code class="bg-gray-800 text-white p-2 rounded-md">/</code></li>
</ul>
</li>
<li class="mb-2">Click <strong class="font-bold">&quot;Deploy&quot;</strong></li>
</ol>
<p class="text-base mb-4">After a few seconds, your form will be live on a <strong class="font-bold">Cloudflare Pages URL</strong> like:<br>
👉 <code class="bg-gray-800 text-white p-2 rounded-md">https://your-project.pages.dev</code></p>
<hr>
<h2 class="text-3xl font-semibold mb-3"><strong class="font-bold">Step 4: Test the Form</strong></h2>
<ul class="list-disc pl-6 mb-4">
<li class="mb-2">Open the URL and fill out the form.</li>
<li class="mb-2">Submit it and check <strong class="font-bold">FabForm.io</strong> for the submitted data.</li>
</ul>
<hr>
<h2 class="text-3xl font-semibold mb-3"><strong class="font-bold">Bonus: Add Form Validation &amp; Success Message</strong></h2>
<p class="text-base mb-4">If you want to add a success message, modify the form like this:</p>
<pre class="bg-gray-100 p-4 rounded-md overflow-x-auto"><code class="language-html">&lt;form action=&quot;https://fabform.io/f/{your-form-id}&quot; method=&quot;POST&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;_redirect&quot; value=&quot;thank-you.html&quot;&gt;
    &lt;!-- Form fields --&gt;
&lt;/form&gt;
</code></pre>
<p class="text-base mb-4">Then, create a <code class="bg-gray-800 text-white p-2 rounded-md">thank-you.html</code> file:</p>
<pre class="bg-gray-100 p-4 rounded-md overflow-x-auto"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Thank You&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Thank you for your message!&lt;/h2&gt;
    &lt;p&gt;We will get back to you soon.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<hr>


<div class="bg-gray-100 text-gray-800">
  <div class="container mx-auto p-6 max-w-4xl">
    <p class="text-base mb-4"><strong class="font-bold">FabForm: A Simple and Powerful Form Backend</strong></p>
<p class="text-base mb-4">FabForm is a modern and efficient <strong class="font-bold"><a href="https://fabform.io/" class="text-blue-500 hover:underline">form backend</a></strong> designed to handle form submissions without the need for server-side code. It enables developers to easily collect and manage form data, making it ideal for static sites, JAMstack applications, and dynamic web projects.</p>
<h3 class="text-2xl font-semibold mb-2">Why Use FabForm?</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-2"><strong class="font-bold">No Backend Setup</strong> – Just point your form to FabForm and start collecting submissions instantly.</li>
<li class="mb-2"><strong class="font-bold">Spam Protection</strong> – Built-in spam filtering ensures clean and legitimate form entries.</li>
<li class="mb-2"><strong class="font-bold">Email Notifications</strong> – Get notified whenever a new submission is received.</li>
<li class="mb-2"><strong class="font-bold">API &amp; Webhooks</strong> – Easily integrate with other services for automated workflows.</li>
</ul>
<p class="text-base mb-4">Whether you're building a contact form, survey, or any other interactive form, FabForm simplifies the process by providing a reliable <strong class="font-bold"><a href="https://fabform.io/" class="text-blue-500 hover:underline">form backend</a></strong> solution.</p>

  </div>
</div>
</html>

</body>
</html>