React project/static 站点的 Formspree 表单替代方案

Question

我正在建立一个新的投资组合网站，我希望它有一个联系表。该项目是用 React 构建的，我曾计划使用 Formspree 添加一个没有后端的联系表单。原来 Formspree 不再允许 AJAX 呼叫，除非你是付费用户。

有没有类似于 Formspree 的联系表格的替代品？我本来打算做 something like this 但由于 Formspree 的限制不能做。

我对后端编程知之甚少，不想为了连接联系表而深入研究 Node/Express。这是否实用，或者此时仅添加后端会更容易？

Answer 1

您好，您可以使用 formcarry 来达到这个目的。

下面是一个示例代码：

import React from "react";
import axios from "axios"; // For making client request.


class Form extends React.Component {
  constructor(props){
    super(props);
    this.state = {name: "", surname: "", email: "", message: ""};
  }

  handleForm = e => {
    axios.post(
      "https://formcarry.com/s/yourFormId", 
      this.state, 
      {headers: {"Accept": "application/json"}}
      )
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

    e.preventDefault();
  }

  handleFields = e => this.setState({ [e.target.name]: e.target.value });

  render() {
    return (
      <form onSubmit={this.handleForm}>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" onChange={this.handleFields} />

        <label htmlFor="surname">Surname</label>
        <input type="text" id="surname" name="surname" onChange={this.handleFields} />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" onChange={this.handleFields} />

        <label htmlFor="message">Your Message</label>
        <textarea name="message" id="message" onChange={this.handleFields}></textarea>

        <button type="submit">Send</button>
      </form>
    );
  }
}

export default Form;

Answer 2

截至 2019 年 11 月，Formspree 在免费计划中支持 AJAX 个表单。他们最近做了一个由 3 部分组成的系列教程，内容是使用 Formspree 作为示例使用 React 构建表单。参见：https://formspree.io/blog/react-forms-1/

这是上述系列第 3 部分中的一段代码。这是一个简单的联系人，用于使用 Formik 执行客户端验证。

    import React, { useState } from "react";
    import axios from "axios";
    import { Formik, Form, Field, ErrorMessage } from "formik";
    import * as Yup from "yup";

    const formSchema = Yup.object().shape({
      email: Yup.string()
        .email("Invalid email")
        .required("Required"),
      message: Yup.string().required("Required")
    });

    export default () => {
      /* Server State Handling */
      const [serverState, setServerState] = useState();
      const handleServerResponse = (ok, msg) => {
        setServerState({ok, msg});
      };
      const handleOnSubmit = (values, actions) => {
        axios({
          method: "POST",
          url: "http://formspree.io/YOUR_FORM_ID",
          data: values
        })
          .then(response => {
            actions.setSubmitting(false);
            actions.resetForm();
            handleServerResponse(true, "Thanks!");
          })
          .catch(error => {
            actions.setSubmitting(false);
            handleServerResponse(false, error.response.data.error);
          });
      };
      return (
        <div>
          <h1>Contact Us</h1>
          <Formik
            initialValues={{ email: "", message: "" }}
            onSubmit={handleOnSubmit}
            validationSchema={formSchema}
          >
            {({ isSubmitting }) => (
              <Form id="fs-frm" noValidate>
                <label htmlFor="email">Email:</label>
                <Field id="email" type="email" name="email" />
                <ErrorMessage name="email" className="errorMsg" component="p" />
                <label htmlFor="message">Message:</label>
                <Field id="message" name="message" component="textarea" />
                <ErrorMessage name="message" className="errorMsg" component="p" />
                <button type="submit" disabled={isSubmitting}>
                  Submit
                </button>
                {serverState && (
                  <p className={!serverState.ok ? "errorMsg" : ""}>
                    {serverState.msg}
                  </p>
                )}
              </Form>
            )}
          </Formik>
        </div>
      );
    };

Answer 3

作为 2021 年的更新（不确定何时引入或更改），formspree 的标准 React 方法不会进行任何重定向并向您隐藏任何 AJAX 详细信息。

他们在这里有更多信息 - 在写作时是正确的，但值得检查，因为它经常更新：https://help.formspree.io/hc/en-us/articles/360053108134-How-To-Build-a-Contact-Form-with-React

import React from 'react';
import { useForm, ValidationError } from '@formspree/react';

function ContactForm() {
  const [state, handleSubmit] = useForm("contactForm");
  if (state.succeeded) {
      return <p>Thanks for joining!</p>;
  }
  return (
      <form onSubmit={handleSubmit}>
      <label htmlFor="email">
        Email Address
      </label>
      <input
        id="email"
        type="email" 
        name="email"
      />
      <ValidationError 
        prefix="Email" 
        field="email"
        errors={state.errors}
      />
      <textarea
        id="message"
        name="message"
      />
      <ValidationError 
        prefix="Message" 
        field="message"
        errors={state.errors}
      />
      <button type="submit" disabled={state.submitting}>
        Submit
      </button>
    </form>
  );
}
export default ContactForm;

上面的页面中包含一些额外的步骤，但这是函数的主要联系人

React project/static 站点的 Formspree 表单替代方案

Formspree form alternative for React project/static site

ajax

reactjs

static

axios

contact-form