首页 > 解决方案 > 使用 EmailJS 从我网站上的多个表单发送电子邮件

问题描述

我是一名前端开发人员,使用 EmailJS sendForm 允许我的用户从我的网站联系表格中进行查询。问题是我有多个表格,因为它们在每个页面上。

第三个参数是 sendForm 函数中的 ID。

                window.onload = function() {
                document.getElementById('contact-form').addEventListener('submit', function(event){
                    event.preventDefault();
                    emailjs.sendForm('contact_service', 'southwicks', '#contact-form')
                    .then(function(response) {
                        if (response.status == 200 && response.text == 'OK')
                            alert('Your message has been sent successfully!');
                        else 
                            alert('Sorry there was a problem, please refresh your browser and try again.');
                            document.getElementById('contact-form').reset();
                            window.location.replace("index.html");
                    });
                });
            };
    });

我正在尝试弄清楚如何更改此代码,以便它引用类而不是 ID,但“getElementByClass”不是 window.load 中的函数。

有谁知道我如何在不学习后端的情况下做到这一点?

这是我的表单代码:



```    <div class="container-fluid enquire-section align-items-center d-flex">
                <div class="row no-gutters justify-content-center">
                    <div class="col-11 col-lg-4 enquire-form">
                        <form id="contact-form" class="formsection" onsubmit="return emailjs.sendForm(this);">
                            <h4 class="uppercase enquire-heading">We would love to hear from you</h4>
                            <div class="form-row">
                                <div class="col">
                                    <label>
                                        <input type="text" name="firstName" class="form-control" placeholder="First name" required/>
                                    </label>
                                </div>
                                <div class="col">
                                    <label>
                                        <input type="text" name="secondName" class="form-control" placeholder="Last name" required/>
                                    </label>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col">
                                    <label>
                                        <input type="email" name="email" class="form-control" id="inputEmail4" placeholder="Email"
                                               required/>
                                    </label>
                                </div>
                                <div class="col">
                                    <label>
                                        <input type="tel" name="telephone" class="form-control" id="example-tel-input"
                                               placeholder="Telephone"
                                               required/>
                                    </label>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col">
                                    <label>
                                        <input type="text" name="address" class="form-control" id="inputAddress" placeholder="Address"
                                               required/>
                                    </label>
                                </div>
                                <div class="col">
                                    <label>
                                        <input type="text" name="postCode" class="form-control" id="inputZip" placeholder="Post Code"
                                               required/>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col">
                                    <label for="exampleFormControlTextarea1" class="message-text">Your Message</label>
                                    <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="col-6-md button-holder">
                                <button type="submit" value="send" class="btn btn-success">Submit</button>
                            </div>
                        </form>
                    </div>

非常感谢 :)

标签: javascripthtmlcssforms

解决方案


推荐阅读