Formsubmit.co 表单在 reactapp 中不起作用

如何解决Formsubmit.co 表单在 reactapp 中不起作用

我在我的 React 应用程序简单的个人网站上的电子邮件表单中添加了表单提交服务。但它似乎不起作用。它什么都不做。那里的额外 javascript 是否与 formsubmit 服务混淆？我实际上把我的真实电子邮件放在了这个帖子里。

import React,{ useState } from 'react';
import './styles.contactform.css';


function ContactForm() {
    const [name,setName] = useState('');
    const [email,setEmail] = useState('');
    const [message,setMessage] = useState('');
    
    
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(name,email,message)
        setName('') 
        setEmail('')
        setMessage('')       

    }


    return (
        <div className="contact-container">
            <form className="contact-form" action="https://formsubmit.co/myemail@email.com" method="POST" onSubmit={handleSubmit}>
                <input type="hidden" name="_next" value="https://notmicahclark.herokuapp.com/"/>
                <input type="text" value={name} id="name" name="name" placeholder="Name..." onChange={(e) => setName(e.target.value)} required/>
                <input type="email" value={email} id="email" name="email" placeholder="Email..." onChange={(e) => setEmail(e.target.value)} required/>
                <img className="letter-img"  src="contact_form_imagepng.png" alt="Mail Letter"/>
                <input id="message" value={message} name="message" placeholder="Your message..." onChange={(e) => setMessage(e.target.value)}/>
                <button type="submit" value="Submit">Submit</button>
            </form>
            
        </div>
    );
}

export default ContactForm;

解决方法

要解决此问题，您可以使用 FormSubmit 提供的AJAX 表单功能。

根据他们的文档：

您可以使用 AJAX 轻松提交表单，而无需您用户离开页面。 — 这甚至可以跨域工作。

请参阅他们关于 AJAX 表单的文档（提供示例代码片段）：https://formsubmit.co/ajax-documentation