Untitled
unknown
javascript
6 months ago
5.0 kB
0
Indexable
Never
import React, { useState } from "react" /** * @framerSupportedLayoutWidth fixed * @framerSupportedLayoutHeight fixed */ export default function Form(props) { const [submitted, setSubmitted] = useState(false) const handleSubmit = async (event) => { event.preventDefault() const formElements = event.target.elements const formData = { first_name: formElements.first_name.value, last_name: formElements.last_name.value, email: formElements.email.value, tel: formElements.tel.value, message: formElements.message.value, } fetch("https://submit-form.com/[your-form-id-here]", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify(formData), }) .then(function (response) { if (response.ok) { setSubmitted(true) } else { throw new Error("Network response was not ok") } return response.json() }) .then(function (data) { console.log(data) }) .catch(function (error) { console.error("Form submission failed:", error) }) } const formStyle = { display: "grid", gridTemplateRows: "auto auto auto 1fr auto", // divides the height among the elements gap: "20px", padding: "12px", borderRadius: "20px", fontFamily: "'Manrope', sans-serif", fontWeight: "500", fontSize: "18px", height: "100%", // specify a height on the form } const inputStyle = { padding: "20px", borderRadius: "20px", backgroundColor: "#F4FBF8", color: "#354155", border: "0", fontSize: "18px", } const placeholderStyle = { color: "#667085", } const textAreaStyle = { ...inputStyle, resize: "none", // this prevents the textarea from being resizable } const buttonStyle = { ...inputStyle, backgroundColor: "#4D6A61", color: "white", cursor: "pointer", } const overlayStyle = { backgroundColor: "rgba(0, 0, 0, 0.5)", position: "absolute", top: 0, left: 0, right: 0, bottom: 0, display: "flex", justifyContent: "center", alignItems: "center", } const checkmarkStyle = { color: "green", fontSize: "50px", fontWeight: "bold", } return ( <div style={{ position: "relative", height: "100%" }}> <form onSubmit={handleSubmit} style={formStyle}> <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px", }} > <input type="text" id="first_name" name="first_name" placeholder="First name" style={inputStyle} /> <input type="text" id="last_name" name="last_name" placeholder="Last name" style={inputStyle} /> </div> <input type="email" id="email" name="email" placeholder="Email" style={inputStyle} /> <input type="tel" id="tel" name="tel" placeholder="Phone number" style={inputStyle} /> <textarea id="message" name="message" placeholder="Message" style={textAreaStyle} ></textarea> <label htmlFor="accept_privacy" style={{ ...inputStyle, backgroundColor: "transparent", padding: "0", }} > <input type="checkbox" id="accept_privacy" required />I accept the Privacy Policy </label> <input type="submit" value="Send message" style={buttonStyle} /> </form> {submitted && ( <div style={overlayStyle}> <div style={checkmarkStyle}>✓</div> </div> )} </div> ) }