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

Question

我在我的反应应用程序简单个人网站上的电子邮件表单中添加了表单提交服务。但它似乎不起作用。它什么也不做。那里额外的 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/[email protected]" 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;

Answer 1

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

根据他们的文档：

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

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

Answer 2

我已经测试了你的代码。问题是您既使用表单的 HTML action 字段，又同时使用自己的 method 进行表单提交。删除 action=... 调用，并将其写入您的 handleSubmit 方法中。

fetch('https://formsubmit.co/ajax/[email protected]', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(Object.fromEntries(new FormData(event.target))),
    })

应该像魅力一样发挥作用。根据您的喜好添加 then 和 catch 语句。

Answer 3

对于 AJAX 请求，您可以这样做：

1. 删除

   action="https://formsubmit.co/[email protected]" method="POST"

   表单元素
2. 你可以使用他们的 AJAX 文档

`

fetch("https://formsubmit.co/ajax/[email protected]", {
    method: "POST",
    headers: { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
    body: JSON.stringify({
        name: name,
        message: message,
        email: email

    })
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error));

`

这样您就可以执行自定义成功、错误消息或输入无效：