├── README.md
├── html-form-with-recaptcha.html
├── html-form.html
├── react-form-with-recaptcha.jsx
├── react-form.jsx
└── vue-form.vue


/README.md:
--------------------------------------------------------------------------------
1 | # FormBold examples for different frameworks and libraries
2 | 
3 | FormBold provides free form API that works with all frameworks, libraries, and platforms. This repository contains ready to use code examples and usage of FormBold API with various tech stacks such as - React, HTML, Vue, and Gatsby, etc.
4 | 


--------------------------------------------------------------------------------
/html-form-with-recaptcha.html:
--------------------------------------------------------------------------------
 1 | // Loading reCAPTCHA script
 2 | <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 3 | 
 4 | <form action="https://formbold.com/s/FORM_ID" method="POST">
 5 |   <label>
 6 |     Your email:
 7 |     <input type="email" name="email">
 8 |   </label>
 9 |   <label>
10 |     Your message:
11 |     <textarea name="message"></textarea>
12 |   </label>
13 |   // Insert reCAPTCHA site key here
14 |   <div class="g-recaptcha" data-sitekey="your recaptcha site key"></div>
15 |   <button type="submit">Send</button>
16 | </form>
17 | 


--------------------------------------------------------------------------------
/html-form.html:
--------------------------------------------------------------------------------
1 | <form action="https://formbold.com/s/FORM_ID" method="POST">
2 |   <input type="email" placeholder="Email" name="email" />
3 |   <input type="text" placeholder="Subject" name="subject" />
4 |   <textarea name="message" placeholder="Type your message"></textarea>
5 | 
6 | <button type="submit">Send Message</button>
7 | </form>
8 | 


--------------------------------------------------------------------------------
/react-form-with-recaptcha.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import axios from "axios";
 3 | // Install dependency - npm install react-google-recaptcha
 4 | import ReCAPTCHA from "react-google-recaptcha";
 5 | 
 6 | export default function Forms() {
 7 |     const recaptchaRef = React.createRef();
 8 | 
 9 |     // Input Change Handling
10 |   const [inputs, setInputs] = useState({
11 |     email: "",
12 |     subject: "",
13 |     message: "",
14 |   });
15 |   const handleOnChange = (event) => {
16 |     event.persist();
17 |     setInputs((prev) => ({
18 |       ...prev,
19 |       [event.target.id]: event.target.value,
20 |     }));
21 |   };
22 | 
23 |   // Server State Handling
24 | 
25 |   const handleOnSubmit = (event) => {
26 |     event.preventDefault();
27 | 
28 |     axios({
29 |       method: "POST",
30 |       url: "https://formbold.com/s/FORM_ID",
31 |       data: {...inputs, 'g-recaptcha-response': recaptchaRef.current.getValue()},
32 |     })
33 |       .then((r) => {
34 |         console.log("hello");
35 |       })
36 |       .catch((r) => {
37 |         console.log("error");
38 |       });
39 |   };
40 | 
41 |   return (
42 |     <form onSubmit={handleOnSubmit}>
43 |       <input
44 |         onChange={handleOnChange}
45 |         value={inputs.email}
46 |         id="email"
47 |         type="email"
48 |         name="email"
49 |         placeholder="Email"
50 |       />
51 |       <input
52 |         onChange={handleOnChange}
53 |         value={inputs.subject}
54 |         id="subject"
55 |         type="text"
56 |         name="subject"
57 |         placeholder="Subject"
58 |       />
59 |       <textarea
60 |         onChange={handleOnChange}
61 |         value={inputs.message}
62 |         id="message"
63 |         name="message"
64 |         placeholder="Type your message"
65 |       />
66 |       <ReCAPTCHA
67 |         ref={recaptchaRef}
68 |         // Insert reCAPTCHA site key here
69 |         sitekey="your recaptcha site key"
70 |       />
71 |       <button type="submit"> Send Message </button>
72 |     </form>
73 |   );
74 | }
75 | 


--------------------------------------------------------------------------------
/react-form.jsx:
--------------------------------------------------------------------------------
 1 | import { useForm } from "formbold-react";
 2 | 
 3 | function Form() {
 4 |   const [state, handleSubmit] = useForm("Form_ID");
 5 | 
 6 |   if (state.succeeded) {
 7 |     return <div>Form submitted successfully</div>;
 8 |   }
 9 | 
10 |   return (
11 |     <>
12 |       <h1>Home Page</h1>
13 |       <form onSubmit={handleSubmit}>
14 |         <label htmlFor="email">Email Address</label>
15 |         <input id="email" type="email" name="email" required />
16 |         <textarea id="message" name="message" required />
17 |         <button type="submit">Submit</button>
18 | 
19 |         <div>{state.error && state.error.message}</div>
20 |       </form>
21 |     </>
22 |   );
23 | }
24 | 
25 | export default Form;
26 | 


--------------------------------------------------------------------------------
/vue-form.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <form action="https://formbold.com/s/FORM_ID" method="POST">
3 |     <input type="email" placeholder="Email" name="email" />
4 |     <input type="text" placeholder="Subject" name="subject" />
5 |     <textarea name="message" placeholder="Type your message"></textarea>
6 |     <button type="submit">Send Message</button>
7 |   </form>
8 | </template>
9 | 


--------------------------------------------------------------------------------