我找到了一种使用 Formspree 无需后端即可直接从网站发送电子邮件的方法。但是我不知道如何在提交时自定义消息

Posted 2023-05-08

【中文标题】我找到了一种使用 Formspree 无需后端即可直接从网站发送电子邮件的方法。但是我不知道如何在提交时自定义消息

【英文标题】：I found a way to direct emails from a website without back-end using Formspree. However I can't figure out how customize the message on submitting

【发布时间】：2022-01-16 11:16:37

【问题描述】：

我目前正在构建一个表单，该表单使用 formspree.io api 向我的电子邮件发送消息，但我不理解编写的 js。我基本上想让它在发送表单时显示#status 错误或成功消息。表单有效，但未显示消息。

var form = document.getElementById("my-form");

async function handleSubmit(event) 
    event.preventDefault();
    var status = document.getElementById("status");
    var data = new FormData(event.target);
    fetch(event.target.action, 
    method: form.method,
    body: data,
    headers: 
        'Accept': 'application/json'
    
    ).then(response => 
    status.innerhtml = "Thank you, received submission!";
    form.reset()
    ).catch(error => 
    status.innerHTML = "Oops! There was a problem submitting your form"
    );

form.addEventListener("submit", handleSubmit)

.contact-form
  width: 500px;
  height: 600px;
  color: white;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  margin-bottom: 100px;
  display: flex;
  flex-direction: column;
  

form
  margin: 35px;
  margin-left: 50px;


.input-field
  width: 400px;
  height: 40px;
  margin-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  border:  1px solid #c4c4c4;
  border-radius: 9px;
  outline: none;


.text-area
  height: 150px;

.submit
  border-radius: 40px;
 border: none;
 background-color: var(--primary-color);
  color: #FFF;
  width: 250px;
  height: 50px;
  margin:  20px 80px;
  cursor: pointer;
  font-weight: bold;
  transition: 1s ease;


.submit:hover
  background-color: #FFF;
  color: var(--primary-color);
  box-shadow: var(--box-shadow);

#status
  width: 300px;
  max-width: 300px;
  height: 50px;
  max-height: 90px;
  margin: -50px 100px;
  text-align: center;
  font-weight: bold;


#status.success
  color: var(--primary-color);
  animation: status 4s ease forwards;


#status.error
  color: var(--primary-color);
  animation: status 4s ease forwards;


@keyframes status
  0%
    opacity: 1;
    pointer-events: all; 
  
  90%
    opacity: 1;
    pointer-events: all; 
  
  100%
    opacity: 0;
    pointer-events: none; 
  

            <div class="contact-form mx-auto">
              <form action="https://formspree.io/f/xeqnqkve" id="my-form" method="POST">
                <label for="Name">
                  <input type="text" class="input-field" id="yourname" name="Name" placeholder="Your Name">
                </label>
                <label for="Email">
                  <input type="text" class="input-field" id="youremail" name="Email" placeholder="Your Email">
                </label>
                <label for="Subject">
                  <input type="text" class="input-field" id="subject" name="Subject" placeholder="Subject">
                </label>
                <label for="Message">
                  <textarea type="text" class="input-field text-area" placeholder="Message" name="message" id="message"></textarea>
                </label>
                <button type="submit" class="submit">Send Message</button>
              </form>
              <div id="status" class="success">Thank you!</div>
              
                
                
            </div>

本站未改动的js代码如下所示。

<script>
    var form = document.getElementById("my-form");
    
    async function handleSubmit(event) 
      event.preventDefault();
      var status = document.getElementById("my-form-status");
      var data = new FormData(event.target);
      fetch(event.target.action, 
        method: form.method,
        body: data,
        headers: 
            'Accept': 'application/json'
        
      ).then(response => 
        status.innerHTML = "Thanks for your submission!";
        form.reset()
      ).catch(error => 
        status.innerHTML = "Oops! There was a problem submitting your form"
      );
    
    form.addEventListener("submit", handleSubmit)
</script>

我想要“谢谢，收到提交！”点击提交按钮后出现在按钮下方，如下图所示。您的帮助将不胜感激。

【参考方案1】：

你的 html 代码应该被修改： 我将状态 id 的 div 更改为提交按钮的上方

<div class="contact-form mx-auto">
          <form action="https://formspree.io/f/xeqnqkve" id="my-form" method="POST">
            <label for="Name">
              <input type="text" class="input-field" id="yourname" name="Name" placeholder="Your Name">
            </label>
            <label for="Email">
              <input type="text" class="input-field" id="youremail" name="Email" placeholder="Your Email">
            </label>
            <label for="Subject">
              <input type="text" class="input-field" id="subject" name="Subject" placeholder="Subject">
            </label>
            <label for="Message">
              <textarea type="text" class="input-field text-area" placeholder="Message" name="message" id="message"></textarea>
            </label>
             <div id="status" class="success">Thank you!</div>
            <button type="submit" class="submit">Send Message</button>
          </form>
          
          
            
            
        </div>

【讨论】：

修改了具体的方式和原因。人们需要逐行进行代码差异以了解这里有什么不同

我将状态 id 的 div 更改为提交按钮的上方。

好的，所以建议您编辑答案以反映解决问题的内容、原因和方式

好的。谢谢。我做到了。

@AmirKhaledian 更改我的 HTML 无效。