ready form URL

SomajitDey · Sep 19, 2024 · ec7f862 · ec7f862
1 parent 9a478cd
commit ec7f862
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 2 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EasyForm</title>
+        <meta name="description" content="Free, self-hosted, open-source form backend solution. No installation required for hosting. Lightweight server runs in browser. Backend sends form data as a Telegram bot to your Telegram account.">
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+        <link rel="icon" type="image/x-icon" href="favicon.ico">
+        <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+        <link rel="manifest" href="site.webmanifest">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    </head>
+
+    <body>
+                                    <form method="POST" target="hidden_iframe">
+                                        <input type="hidden" name="From" value="tester">
+                                        <div class="row mt-2">
+                                            <div class="col">
+                                                <input type="email" class="form-control" name="Email" placeholder="Your Email" autocomplete="on" required>
+                                            </div>
+                                            <div class="col">
+                                                <input type="text" class="form-control" name="Name" placeholder="Your Name" autocomplete="on" required>
+                                            </div>
+                                            <input type="text" class="form-control mt-2" name="Message" placeholder="Your Message" required>
+                                        </div>
+                                        <button type="submit" id="submit" class="btn btn-info mt-2" onclick="alert('Thanks for your message!');">Post</button>
+                                        <button type="reset" class="btn btn-warning mt-2">Reset</button>
+                                    </form>
+                                    <iframe name="hidden_iframe" src="about:blank" hidden></iframe>
+
+    <script>
+        document.getElementById("submit").setAttribute("formaction", atob(location.pathname.substr(1,).replace(/_/g,'+').replace(/-/g,'/')));
+    </script>
+    </body>
+</html>
diff --git a/app/server.js b/app/server.js
@@ -140,6 +140,7 @@ function startWorker() {
     document.getElementById("serverStatus").innerHTML = 'Live  <span class="spinner-grow spinner-grow-sm"></span>';
 
     document.getElementById("formActionURL").innerHTML = `<p class="alert alert-success">HTML Form Action URL: <u>${getFrom}</u></p>`;
+    document.getElementById("readyForm").href = `./${btoa(getFrom).replace(/\+/g,'_').replace(/\//g,'-')}`;
     document.getElementById("testFormBtn").setAttribute("formaction", getFrom);
     spaShow("testForm");
 }

diff --git a/index.html b/index.html
@@ -45,8 +45,7 @@ <h1>Welcome to EasyForm</h1>
                             <section>
                                 <h3>About</h3>
                                 <p>EasyForm gives you a free and easy, self-hosted form backend solution that runs in your browser! Just sign up and then embed the following HTML
-                                   form in your website. Therefrom, as long as this Tab is open in your browser, whenever your users submit the form in your website, your Inbox here
-                                   will be populated. You will also be notified via Telegram.
+                                   form in your website. You also get your own contact form URL that you can use if you don't have a website.
                                 </p>
                                 <pre><code class="language-html">
 &lt;!-- Replace XXXXX with the form action URL given by this app upon sign up` --&gt;
@@ -61,6 +60,9 @@ <h3>About</h3>
 &lt;!-- when the form is submitted, the server response will appear in this iframe, hidden from view --&gt;
 &lt;iframe name=&quot;hidden_iframe&quot; src=&quot;about:blank&quot; hidden&gt;&lt;/iframe&gt;
 </code></pre>
+                                <p>As long as this Tab is open in your browser, whenever your users submit the form, your Inbox here will be populated.
+                                    You will also be notified via Telegram.
+                                </p>
 
                                 <p><button class="btn btn-primary mt-4" onclick="main();">Let's get started</button></p>
 
@@ -105,6 +107,7 @@ <h3>Server</h3>
                                     <p>Test if everything is working properly with the following sample form (embed in your own website with 
                                     <button onclick="spaGoTo('about');">this code</button>). You should get a Telegram message upon clicking Post! Your posted data 
                                     should also be logged below.</p>
+                                    <p>You also get <a id="readyForm" target="_blank">your own contact form URL</a>.</p>
                                     <form method="POST" target="hidden_iframe">
                                         <input type="hidden" name="From" value="tester">
                                         <div class="row mt-2">