Ajax Formspree表格React项目/静态站点的备选表格

我正在建立一个新的投资组合网站，我希望它有一个联系方式。该项目是用React构建的，我计划使用Formspree添加一个没有后端的联系人表单。事实证明，Formspree不再允许AJAX调用，除非您是付费用户

与Formspree类似的联系方式是否有其他选择？我本来打算这么做的，但由于Formspree的限制，我不能

我对后端编程知之甚少，我不希望为了连接一个联系人表单而深入Node/Express。这是可行的还是仅仅添加一个后端会更容易呢？

您好，您可以使用它来实现这一目的

下面是一个示例代码：

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;

从“React”导入React；
从“axios”导入axios；//用于提出客户请求。
类形式扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={name:，姓氏：，电子邮件：，消息：}；
}
handleForm=e=>{
轴心柱(
"https://formcarry.com/s/yourFormId", 
这个州，
{头：{“接受”：“应用程序/json”}
)
.然后（功能（响应）{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（错误）；
});
e、 预防默认值（）；
}
handleFields=e=>this.setState（{[e.target.name]：e.target.value}）；
render（）{
返回(
名称
姓
电子邮件
你的信息
发送
);
}
}
导出默认表单；

您好，您可以将其用于此目的

下面是一个示例代码：

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;

从“React”导入React；
从“axios”导入axios；//用于提出客户请求。
类形式扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={name:，姓氏：，电子邮件：，消息：}；
}
handleForm=e=>{
轴心柱(
"https://formcarry.com/s/yourFormId", 
这个州，
{头：{“接受”：“应用程序/json”}
)
.然后（功能（响应）{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（错误）；
});
e、 预防默认值（）；
}
handleFields=e=>this.setState（{[e.target.name]：e.target.value}）；
render（）{
返回(
名称
姓
电子邮件
你的信息
发送
);
}
}
导出默认表单；

自2019年11月起，Formspree在免费计划中支持AJAX表单。他们最近做了一个关于使用Formspree创建表单的3部分教程系列。见：

下面是上述系列第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>
      );
    };

import React，{useState}来自“React”；
从“axios”导入axios；
从“Formik”导入{Formik，Form，Field，ErrorMessage}；
从“Yup”导入*作为Yup；
const formSchema=Yup.object（）.shape({
电子邮件：Yup.string（）
.电子邮件（“无效电子邮件”）
.必需（“必需”），
消息：Yup.string（）.required（“required”）
});
导出默认值（）=>{
/*服务器状态处理*/
const[serverState，setServerState]=useState（）；
const handleServerResponse=（确定，消息）=>{
setServerState（{ok，msg}）；
};
const handleOnSubmit=（值、操作）=>{
axios({
方法：“张贴”，
url:“http://formspree.io/YOUR_FORM_ID",
数据：值
})
。然后（响应=>{
动作。设置提交（错误）；
actions.resetForm（）；
handleServerResponse（正确，“谢谢！”）；
})
.catch（错误=>{
动作。设置提交（错误）；
handleServerResponse（false，error.response.data.error）；
});
};
返回(
联系我们
{（{isSubmitting}）=>(
电邮：
信息：
提交
{serverState&&(

{serverState.msg}

)}
)}
);
};

自2019年11月起，Formspree在免费计划中支持AJAX表单。他们最近做了一个关于使用Formspree创建表单的3部分教程系列。见：

下面是上述系列第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>
      );
    };

import React，{useState}来自“React”；
从“axios”导入axios；
从“Formik”导入{Formik，Form，Field，ErrorMessage}；
从“Yup”导入*作为Yup；
const formSchema=Yup.object（）.shape({
电子邮件：Yup.string（）
.电子邮件（“无效电子邮件”）
.必需（“必需”），
消息：Yup.string（）.required（“required”）
});
导出默认值（）=>{
/*服务器状态处理*/
const[serverState，setServerState]=useState（）；
const handleServerResponse=（确定，消息）=>{
setServerState（{ok，msg}）；
};
const handleOnSubmit=（值、操作）=>{
axios({
方法：“张贴”，
url:“http://formspree.io/YOUR_FORM_ID",
数据：值
})
。然后（响应=>{
动作。设置提交（错误）；
actions.resetForm（）；
handleServerResponse（正确，“谢谢！”）；
})
.catch（错误=>{
动作。设置提交（错误）；
handleServerResponse（false，error.response.data.error）；
});
};
返回(
联系我们
{（{isSubmitting}）=>(