设置联系表单以自动使用formsubmit.co发送电子邮件不起作用。

huangapple
go评论88阅读模式
英文:

setting up an contact form to automatically send an email with formsubmit.co not working

问题

这是您提供的代码的翻译部分：

  1. <h2 class="title">联系我！</h2>
  2. <br>
  3. <br>
  5. <form (ngSubmit)="submitForm()" #contactForm="ngForm" action="https://formsubmit.co/katie.m.tantillo@gmail.com" method="POST">
  6.     <div class="field">
  7.         <label class="label">姓名</label><br>
  8.         <input 
  9.             type="text" 
  10.             size="maxlength" 
  11.             name="name" 
  12.             class="input" 
  13.             [(ngModel)]="name" 
  14.             #nameInput="ngModel" 
  15.             required>
  17.         <div class="help is-error" *ngIf="nameInput.invalid && nameInput.touched">
  18.             <h6>请填写您的姓名。</h6>
  19.         </div>
  20.     </div>
  22.     <div class="field">
  23.         <label class="label">电子邮件</label><br>
  24.         <input 
  25.             type="email" 
  26.             name="email" 
  27.             class="input" 
  28.             [(ngModel)]="email" 
  29.             #emailInput="ngModel" 
  30.             required
  31.             email>
  33.         <div class="help is-required" *ngif="emailInput.invalid && emailInput.touched">
  34.             <h6>请填写有效的电子邮件地址。</h6>
  35.         </div>
  36.     </div>
  38.     <div class="field">
  39.         <label class="label">您的消息</label><br>
  40.         <textarea rows="2" cols="25" name="message" name="name" class="textarea" [(ngModel)]="message"></textarea>
  41.     </div>
  43.     <button 
  44.         type="submit" 
  45.         class="button"
  46.         [disabled]="contactForm.invalid">
  47.         <span>发送</span>
  48.     </button>
  49. </form>

这段代码是一个包含联系表单的HTML代码。如果您有其他问题或需要进一步的帮助，请随时提问。

英文:

trying to set up a contact me with formsubmit.co but it doesnt seem to be working. heres the code for my form

` <h2 class="title">Contact Me!</h2>;
<br>
<br>

  1.  &lt;form (ngSubmit)=&quot;submitForm()&quot; #contactForm=&quot;ngForm&quot;   
  2. action=&quot;https://formsubmit.co/katie.m.tantillo@gmail.com&quot; method=&quot;POST&quot;&gt;
  3. &lt;div class=&quot;field&quot;&gt;
  4. &lt;label class=&quot;label&quot;&gt;Name&lt;/label&gt;&lt;br&gt;
  5. &lt;input 
  6. type=&quot;text&quot; 
  7. size=&quot;maxlength&quot; 
  8. name=&quot;name&quot; 
  9. class=&quot;input&quot; 
  10. [(ngModel)]=&quot;name&quot;
  11. #nameInput=&quot;ngModel&quot; 
  12. required&gt;
  13. &lt;div class=&quot;help is-error&quot; *ngIf=&quot;nameInput.invalid &amp;&amp; nameInput.touched&quot;&gt;
  14. &lt;h6&gt;Please enter your name.&lt;/h6&gt;
  15. &lt;/div&gt;
  16. &lt;/div&gt;
  17. &lt;div class=&quot;field&quot;&gt;
  18. &lt;label class=&quot;label&quot;&gt;Email&lt;/label&gt;&lt;br&gt;
  19. &lt;input 
  20. type=&quot;email&quot; 
  21. name=&quot;email&quot; 
  22. class=&quot;input&quot; 
  23. [(ngModel)]=&quot;email&quot; 
  24. #emailInput=&quot;ngModel&quot;
  25. required
  26. email&gt;
  27. &lt;div class=&quot;help is-required&quot; *ngif=&quot;emailInput.invalid &amp;&amp; emailInput.touched&quot;&gt;
  28. &lt;h6&gt;Please enter a valid email.&lt;/h6&gt; 
  29. &lt;/div&gt;
  30. &lt;/div&gt;
  31. &lt;div class=&quot;field&quot;&gt;
  32. &lt;label class=&quot;label&quot;&gt;Your Message&lt;/label&gt;&lt;br&gt;
  33. &lt;textarea rows=&quot;2&quot; cols=&quot;25&quot; name=&quot;message&quot; name=&quot;name&quot; class=&quot;textarea&quot; 
  34. [(ngModel)]=&quot;message&quot;&gt;&lt;/textarea&gt;
  35. &lt;/div&gt;
  36. &lt;button 
  37. type=&quot;submit&quot; 
  38. class=&quot;button&quot;
  39. [disabled]=&quot;contactForm.invalid&quot;&gt;
  40. &lt;span&gt;Send&lt;/span&gt;
  41. &lt;/button&gt;`

I tried adding a tool to let me have an email automatically send from my website, I was expecting an email to be sent.

edited to add: this is the live site in question https://tantilloportfolio.web.app/

edited to add

  1. export class ContactComponent {
  2. name: string=&quot;&quot;;
  3. email: string=&quot;&quot;;
  4. message: string=&quot;&quot;
  5. submitForm() {
  6. const message = `Thanks ${this.name}! Your message has been sent to katie.m.tantillo@gmail.com. Look for a reply to ${this.email} within 24 hours.`;
  7. alert(message);
  8. }
  9. }
  10. enter code here

答案1

得分: 0

action 和 ngSubmit 不能一起使用。这是你的问题。

请将你的表单标签还原为文档中所示。

如果你想要弹出窗口，将你的 submitForm 调用移至：

  1. <button
  2.    (click)="submitForm()"
  3.    type="submit"
  4.    class="button"
  5.    [disabled]="contactForm.invalid">
  6.    <span>发送</span>
  7. </button>
英文:

action and ngSubmit cannot be used together. This is your issue.

Revert your form tag to be as shown in the documentation.

If you wish to have a pop up, move your submitForm call to:

  1.  &lt;button 
  2. (click)=&quot;submitForm()&quot;
  3. type=&quot;submit&quot; 
  4. class=&quot;button&quot;
  5. [disabled]=&quot;contactForm.invalid&quot;&gt;
  6. &lt;span&gt;Send&lt;/span&gt;
  7. &lt;/button&gt;

huangapple
  • 本文由 发表于 2023年2月18日 02:15:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/75487924.html
  • angular
  • email
  • form-submit
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定