按下发送按钮后，如何将我的表格发送到我的电子邮件？

Question

I have this code I'm using from this link: https://codepen.io/TimQuincey/pen/Dtjox/

I'm not sure on how I get the,'Send!' button to redirect the user to my e-mail address, including their message, name and e-mail.

I attempted to add my e-mail the the Send button but this just restarts the form, Any help will be greatly appreciated!

 body { padding-top: 25px; background-color: #454545; margin-left: 10px; margin-right: 10px; } .container { max-width: 600px; margin: 0 auto; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-color: #FAFAFA; } .head { -webkit-border-radius: 6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px; background-color: #2ABCA7; color: #FAFAFA; } h2 { text-align: center; padding: 18px 0 18px 0; font-size: 1.4em; } input { margin-bottom: 10px; } textarea { height: 100px; margin-bottom: 10px; } input:first-of-type { margin-top: 35px; } input, textarea { font-size: 1em; padding: 15px 10px 10px; font-family: 'Source Sans Pro', arial, sans-serif; border: 1px solid #cecece; background: #d7d7d7; color: #FAFAFA; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 80%; max-width: 600px; } ::-webkit-input-placeholder { color: #FAFAFA; } :-moz-placeholder { color: #FAFAFA; } ::-moz-placeholder { color: #FAFAFA; } :-ms-input-placeholder { color: #FAFAFA; } button { margin-top: 15px; margin-bottom: 25px; background-color: #2ABCA7; padding: 12px 45px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #2ABCA7; -webkit-transition: .5s; transition: .5s; display: inline-block; cursor: pointer; width: 30%; color: #fff; } button:hover, .button:hover { background: #19a08c; } label.error { font-family: 'Source Sans Pro', arial, sans-serif; font-size: 1em; display: block; padding-top: 10px; padding-bottom: 10px; background-color: #d89c9c; width: 80%; margin: auto; color: #FAFAFA; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } /* media queries */ @media (max-width: 700px) { label.error { width: 90%; } input, textarea { width: 90%; } button { width: 90%; } body { padding-top: 10px; } } .message { font-family: 'Source Sans Pro', arial, sans-serif; font-size: 1.1em; display: none; padding-top: 10px; padding-bottom: 10px; background-color: #2ABCA7; width: 80%; margin: auto; color: #FAFAFA; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } 

 <br/> <br /> <br /> <script> // When the browser is ready... $(function() { // validate $("#contact").validate({ // Set the validation rules rules: { name: "required", email: { required: true, email: true }, message: "required", }, // Specify the validation error messages messages: { name: "Please enter your name", email: "Please enter a valid email address", message: "Please enter a message", }, // submit handler submitHandler: function(form) { //form.submit(); $(".message").show(); $(".message").fadeOut(4500); } }); }); </script> <!-- contact form created for treehouse competition. --> <form id="contact"> <div class="container"> <div class="head"> <h2>Say Hello</h2> </div> <input type="text" name="name" placeholder="Name" /><br /> <input type="email" name="email" placeholder="Email" /><br /> <textarea type="text" name="message" placeholder="Message"></textarea><br /> <div class="message">Message Sent</div> <a href="mailto:holdenrebecca.24@gmail.com" target="_blank"> <button id="submit" type="submit"> Send! </button> </a> </div> </form> 

Answer 1

There ate lot of other ways to do this, but I usually do like this:

You can remove the tag <a> , add id attributes to your inputs and add to your submitHandler an AjaxCall like this:

 $.ajax({
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'POST',
                url: '@Url.Action("actionName","controllerName")',
                data: JSON.stringify({
                    'name': $('#name').val(),
                    'email': $('#email').val(),
                    'message': $('#message').val(),
                })
            });

Then, create your action actionName in your controllerName something like this:

        [HttpPost]
        public JsonResult actionName(string name, string email, string message)
        {
            try
            {
                yourContext.Database.ExecuteSqlCommand("exec dbo.emailProcedure @name @email @message", new SqlParameter("@name", name), new SqlParameter("@email", email), new SqlParameter("@message", message));
                return Json(true);
            catch (Exception)
            {
                return Json(false);
            }            
        }

Also, you should create your emailProcedure and deal with the returned Json in your view if needed.

EDIT

Sorry, I just saw in the comments that you are using PHP. I used C# in my example. But it might give you some tips.

Answer 2

you can use this in the form instead:

    <form action="*/cgi-bin/formmail/yourservermailscript.pl*" method="post">
<input type="hidden" name="recipient" value="*youremail@domain.com*">
<input type="hidden" name="subject" value="*Subject of email*">
<input type="hidden" name="redirect" value="*yourthankyoupg.htm*">

Please take note that all the spots with asterisks should be changed to your specific information.

The actual script path & name can sometimes be found in your website host's help files. Or you can send your website host support team an email asking for the path to the sendmail script.

The path will look something like this: /cgi-bin/mail/sendmail.pl

It varies based on your website host's server configuration. Although the form has to be live on your server in order for it to work. It won't work if you're just previewing it locally on your own machine. Hope this was as helpful to you as it is to me.

Best Regards.