React项目/静态站点的Formspree表单替代

Question

我正在建立一个新的投资组合网站，希望它有一个联系表。该项目是用React构建的，我曾计划使用Formspree添加不带后端的联系表单。事实证明，除非您是付费订阅者，否则Formspree不再允许AJAX呼叫。

是否有类似于Formspree的联系表格的替代方法？我本来打算做这样的事情，但是由于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;