How to Send Email from HTML Form

How do I send an HTML Form in an Email .. not just MAILTO

I actually use ASP C# to send my emails now, with something that looks like :

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Form.Count > 0)
    {
        string formEmail = "";
        string fromEmail = "from@email.com";
        string defaultEmail = "default@email.com";

        string sendTo1 = "";

        int x = 0;

        for (int i = 0; i < Request.Form.Keys.Count; i++)
        {
            formEmail += "<strong>" + Request.Form.Keys[i] + "</strong>";
            formEmail += ": " + Request.Form[i] + "<br/>";
            if (Request.Form.Keys[i] == "Email")
            {
                if (Request.Form[i].ToString() != string.Empty)
                {
                    fromEmail = Request.Form[i].ToString();
                }
                formEmail += "<br/>";
            }

        }
        System.Net.Mail.MailMessage myMsg = new System.Net.Mail.MailMessage();
        SmtpClient smtpClient = new SmtpClient();

        try
        {
            myMsg.To.Add(new System.Net.Mail.MailAddress(defaultEmail));
            myMsg.IsBodyHtml = true;
            myMsg.Body = formEmail;
            myMsg.From = new System.Net.Mail.MailAddress(fromEmail);
            myMsg.Subject = "Sent using Gmail Smtp";
            smtpClient.Host = "smtp.gmail.com";
            smtpClient.Port = 587;
            smtpClient.EnableSsl = true;
            smtpClient.UseDefaultCredentials = true;
            smtpClient.Credentials = new System.Net.NetworkCredential("testing@gmail.com", "pward");

            smtpClient.Send(defaultEmail, sendTo1, "Sent using gmail smpt", formEmail);

        }
        catch (Exception ee)
        {
            debug.Text += ee.Message;
        }
    }
}

This is an example using gmail as the smtp mail sender. Some of what is in here isn't needed, but it is how I use it, as I am sure there are more effective ways in the same fashion.

Send email with PHP from html form on submit with the same script

EDIT (#1)

If I understand correctly, you wish to have everything in one page and execute it from the same page.

You can use the following code to send mail from a single page, for example index.php or contact.php

The only difference between this one and my original answer is the <form action="" method="post"> where the action has been left blank.

It is better to use header('Location: thank_you.php'); instead of echo in the PHP handler to redirect the user to another page afterwards.

Copy the entire code below into one file.

<?php 
if(isset($_POST['submit'])){
    $to = "email@example.com"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $subject = "Form submission";
    $subject2 = "Copy of your form submission";
    $message = $first_name . " " . $last_name . " wrote the following:" . "\n\n" . $_POST['message'];
    $message2 = "Here is a copy of your message " . $first_name . "\n\n" . $_POST['message'];

    $headers = "From:" . $from;
    $headers2 = "From:" . $to;
    mail($to,$subject,$message,$headers);
    mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender
    echo "Mail Sent. Thank you " . $first_name . ", we will contact you shortly.";
    // You can also use header('Location: thank_you.php'); to redirect to another page.
    }
?>

<!DOCTYPE html>
<head>
<title>Form submission</title>
</head>
<body>

<form action="" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Message:<br><textarea rows="5" name="message" cols="30"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

</body>
</html>

Original answer

I wasn't quite sure as to what the question was, but am under the impression that a copy of the message is to be sent to the person who filled in the form.

Here is a tested/working copy of an HTML form and PHP handler. This uses the PHP mail() function.

The PHP handler will also send a copy of the message to the person who filled in the form.

You can use two forward slashes // in front of a line of code if you're not going to use it.

For example: // $subject2 = "Copy of your form submission"; will not execute.

HTML FORM:

<!DOCTYPE html>
<head>
<title>Form submission</title>
</head>
<body>

<form action="mail_handler.php" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Message:<br><textarea rows="5" name="message" cols="30"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

</body>
</html>

PHP handler (mail_handler.php)

(Uses info from HTML form and sends the Email)

<?php 
if(isset($_POST['submit'])){
    $to = "email@example.com"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $subject = "Form submission";
    $subject2 = "Copy of your form submission";
    $message = $first_name . " " . $last_name . " wrote the following:" . "\n\n" . $_POST['message'];
    $message2 = "Here is a copy of your message " . $first_name . "\n\n" . $_POST['message'];

    $headers = "From:" . $from;
    $headers2 = "From:" . $to;
    mail($to,$subject,$message,$headers);
    mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender
    echo "Mail Sent. Thank you " . $first_name . ", we will contact you shortly.";
    // You can also use header('Location: thank_you.php'); to redirect to another page.
    // You cannot use header and echo together. It's one or the other.
    }
?>

To send as HTML:

If you wish to send mail as HTML and for both instances, then you will need to create two separate sets of HTML headers with different variable names.

Read the manual on mail() to learn how to send emails as HTML:

  • http://php.net/manual/en/function.mail.php

Footnotes:

  • In regards to HTML5

You have to specify the URL of the service that will handle the submitted data, using the action attribute.

As outlined at https://www.w3.org/TR/html5/forms.html under 4.10.1.3 Configuring a form to communicate with a server. For complete information, consult the page.

Therefore, action="" will not work in HTML5.

The proper syntax would be:

  • action="handler.xxx" or
  • action="http://www.example.com/handler.xxx".

Note that xxx will be the extension of the type of file used to handle the process. This could be a .php, .cgi, .pl, .jsp file extension etc.

Consult the following Q&A on Stack if sending mail fails:

  • PHP mail form doesn't complete sending e-mail

Contact Form Submit Button link to Email

Sadly (vanilla) HTML+CSS doesn't provide possibility to send emails. Such an action can be achieved with PHP. HTML is just a markup language (it tells your browser where various elements are located), whereas CSS is styling language (it tells the browser how do the HTML-defined elements look like).

Your code opens your default e-mail client, because that's what mailto action does.

Maybe this answer using PHP can be helpful for you in creating your form: https://stackoverflow.com/a/18382062/12631978

Make and send email by HTML form

function send_email() { 
  var html= '<br />Subject: <input type="text" id="sub" /><br />Body of Email: <input type="text" id="bod" /><br /><input type="button" value="Send Email" onclick="sendNow()"/>';
  html+='<div id="msg"></div>';
  html+='<script>function sendNow(){google.script.run.withSuccessHandler(function(msg){document.getElementById("msg").innerHTML=msg;}).send_now({body:document.getElementById("bod").value,subject:document.getElementById("sub").value});}</script>';
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), "Email Form");
}

function send_now(obj) {
  var empsh=SpreadsheetApp.getActiveSheet();
  var currentRow=empsh.getActiveRange().getRow(); 
  var empval=empsh.getRange(currentRow,6).getValue();
  console.log('Email: %s\nSubject: %s\nMessage: %s',empval,obj.subject,obj.body);
  //MailApp.sendEmail({to:empval,subject:obj.subject,htmlBody: obj.body});
  return "Email Sent";
}

Animation:

Sample Image

This version uses a textarea:

function send_email() { 
  var html= '<br />Subject: <input type="text" id="sub" /><br />Body of Email: <textarea rows="4" columns="30" id="bod"></textarea><br /><input type="button" value="Send Email" onclick="sendNow()"/>';
  html+='<div id="msg"></div>';
  html+='<script>function sendNow(){google.script.run.withSuccessHandler(function(msg){document.getElementById("msg").innerHTML=msg;}).send_now({body:document.getElementById("bod").value,subject:document.getElementById("sub").value});}</script>';
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), "Email Form");
}

Related Topics

How to Create Download Link in Html

Equal Width Flex Items Even After They Wrap

Why Does My Xpath Query (Scraping HTML Tables) Only Work in Firebug, But Not the Application I'M Developing

How Does Zalgo Text Work

Linking to Another HTML Page in Google Apps Script

Onclick on Option Tag Not Working on Ie and Chrome

How to Change Bootstrap 3 Column Order on Mobile Layout

Html5 Canvas Drawimage: How to Apply Antialiasing

Data Protocol Url Size Limitations

How to Keep Origin in Center of Image in Scale Animation

Inputting a Default Image in Case the Src Attribute of an HTML ≪Img≫ Is Not Valid

How to Escape Hash Character in Url

Some Emmet Abbreviations in Vsc Not Working, Like '!' or Using '*'

Several Elements With the Same Id Responding to One CSS Id Selector

What Characters Are Valid in a Url

Border Curved CSS - Circle With Curved End

Using Href Links Inside ≪Option≫ Tag

Cross Domain Form Posting


Leave a reply



Submit