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

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

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

问题

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

<h2 class="title">联系我!</h2>
<br>
<br>

<form (ngSubmit)="submitForm()" #contactForm="ngForm" action="https://formsubmit.co/katie.m.tantillo@gmail.com" method="POST">
    <div class="field">
        <label class="label">姓名</label><br>
        <input 
            type="text" 
            size="maxlength" 
            name="name" 
            class="input" 
            [(ngModel)]="name" 
            #nameInput="ngModel" 
            required>

        <div class="help is-error" *ngIf="nameInput.invalid && nameInput.touched">
            <h6>请填写您的姓名。</h6>
        </div>
    </div>

    <div class="field">
        <label class="label">电子邮件</label><br>
        <input 
            type="email" 
            name="email" 
            class="input" 
            [(ngModel)]="email" 
            #emailInput="ngModel" 
            required
            email>

        <div class="help is-required" *ngif="emailInput.invalid && emailInput.touched">
            <h6>请填写有效的电子邮件地址。</h6>
        </div>
    </div>

    <div class="field">
        <label class="label">您的消息</label><br>
        <textarea rows="2" cols="25" name="message" name="name" class="textarea" [(ngModel)]="message"></textarea>
    </div>

    <button 
        type="submit" 
        class="button"
        [disabled]="contactForm.invalid">
        <span>发送</span>
    </button>
</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>

 &lt;form (ngSubmit)=&quot;submitForm()&quot; #contactForm=&quot;ngForm&quot;   
action=&quot;https://formsubmit.co/katie.m.tantillo@gmail.com&quot; method=&quot;POST&quot;&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;label class=&quot;label&quot;&gt;Name&lt;/label&gt;&lt;br&gt;
&lt;input 
type=&quot;text&quot; 
size=&quot;maxlength&quot; 
name=&quot;name&quot; 
class=&quot;input&quot; 
[(ngModel)]=&quot;name&quot;
#nameInput=&quot;ngModel&quot; 
required&gt;
&lt;div class=&quot;help is-error&quot; *ngIf=&quot;nameInput.invalid &amp;&amp; nameInput.touched&quot;&gt;
&lt;h6&gt;Please enter your name.&lt;/h6&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;label class=&quot;label&quot;&gt;Email&lt;/label&gt;&lt;br&gt;
&lt;input 
type=&quot;email&quot; 
name=&quot;email&quot; 
class=&quot;input&quot; 
[(ngModel)]=&quot;email&quot; 
#emailInput=&quot;ngModel&quot;
required
email&gt;
&lt;div class=&quot;help is-required&quot; *ngif=&quot;emailInput.invalid &amp;&amp; emailInput.touched&quot;&gt;
&lt;h6&gt;Please enter a valid email.&lt;/h6&gt; 
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field&quot;&gt;
&lt;label class=&quot;label&quot;&gt;Your Message&lt;/label&gt;&lt;br&gt;
&lt;textarea rows=&quot;2&quot; cols=&quot;25&quot; name=&quot;message&quot; name=&quot;name&quot; class=&quot;textarea&quot; 
[(ngModel)]=&quot;message&quot;&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;button 
type=&quot;submit&quot; 
class=&quot;button&quot;
[disabled]=&quot;contactForm.invalid&quot;&gt;
&lt;span&gt;Send&lt;/span&gt;
&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

export class ContactComponent {
name: string=&quot;&quot;;
email: string=&quot;&quot;;
message: string=&quot;&quot;
submitForm() {
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.`;
alert(message);
}
}
enter code here

答案1

得分: 0

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

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

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

<button
   (click)="submitForm()"
   type="submit"
   class="button"
   [disabled]="contactForm.invalid">
   <span>发送</span>
</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:

 &lt;button 
(click)=&quot;submitForm()&quot;
type=&quot;submit&quot; 
class=&quot;button&quot;
[disabled]=&quot;contactForm.invalid&quot;&gt;
&lt;span&gt;Send&lt;/span&gt;
&lt;/button&gt;

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

发表评论

匿名网友

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

确定