How to make contact form send to your email html

Question

There are numerous ways of achieving this, with numerous wild and wonderful programming languages, but we’re going to use a scripting language called PHP.

Table of Contents Show

Step 1: Create a PHP page
Step 2: Create a form
Step 3: Send the form’s data in an email
Further steps: A basic “Contact us” page
How do I link a contact form to an email in HTML?
How do I add a contact form to my HTML website?
How do I email a contact us form?
How do I create a mailto form in HTML?

Step 1: Create a PHP page

If you use the extension “.php” instead of “.html” for your web page, the server hosting the page will know to execute any PHP sitting within it. So, to start, simply save an empty HTML page as “contact.php”.

Step 2: Create a form

You can read about the ins and outs of forms in the HTML Beginner Tutorial. To jump straight in, let’s use the following super-stripped-down form HTML:


<form method="post" action="contact.php">
    <textarea name="message"></textarea>
    <input type="submit">
</form>

All quite straightforward, right? The action="contact.php" bit tells the page to send the form’s content to itself when the form is submitted. Crazy, huh? We’re doing everything here with the same page…

Step 3: Send the form’s data in an email

At the very top of the page, even before the Doctype, we are going to enter a smattering of PHP to handle the form data:


<?php
if($_POST["message"]) {
    mail("", "Form to email message", $_POST["message"], "From: ");
}
?>

“<?php” marks the start of the PHP and “?>” marks the end. The server will attempt to execute everything in between as PHP.

This code checks if form data has been sent and, if it has, it uses the mail function to send the data as an email to “” with the subject “Form to email message” and the message body that is the same as the form field with the name “message”. The email will appear to be from “”.

Recap

You can try this out once you upload it (it requires the server to run — you won’t be able to run it locally).

Here’s what’s happening:

Once the form has been submitted, the page will send the data to itself.
The page will check if data has been sent and, if it has, it will send it on as an email.
The browser will load the page’s subsequent HTML, including your form.

Further steps: A basic “Contact us” page

OK, how about making this a bit more like a “Contact us” form? We can add sender name and sender email address to the message and also include a confirmation message, to let the sender know their message has been sent. Here’s the whole shebang:


<?php

if($_POST["submit"]) {
    $recipient="";
    $subject="Form to email message";
    $sender=$_POST["sender"];
    $senderEmail=$_POST["senderEmail"];
    $message=$_POST["message"];

    $mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";

    mail($recipient, $subject, $mailBody, "From: $sender <$senderEmail>");

    $thankYou="<p>Thank you! Your message has been sent.</p>";
}

?><!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Contact form to email</title>
</head>

<body>

    <?=$thankYou ?>

    <form method="post" action="contact.php">
        <label>Name:</label>
        <input name="sender">

        <label>Email address:</label>
        <input name="senderEmail">

        <label>Message:</label>
        <textarea rows="5" cols="20" name="message"></textarea>

        <input type="submit" name="submit">
    </form>

</body>

</html>

This time we’re:

Checking the form has been sent (this time by looking for the form field named “submit”) and, if it has…
Setting a bag-load of variables:
1. Your email address
2. The email subject
3. The sender’s name (taken from the form)
4. The sender’s email address (taken from the form)
5. The message (taken from the form)
Sending the email, using all of those variables
Setting a variable for a confirmation message
Loading the HTML, including the confirmation message

If the page loads and no form data has been sent then no email will be composed and no conformation message will be set so all that will happen is loading of the page’s HTML.

A simple HTML5 contact form template with CSS to style the form. Copy and paste code.

This is a simple HTML5 contact form. It does not use any CSS frameworks or libraries but the css below has some code to reset the default browser styles. The rest of the CSS is simple. It styles the input element and the textarea element and adds a button element. The code can be copied to any HTML web page. Remember to copy the CSS code to your CSS file as well. The styles were generated with help of TailWind CSS.

Code


        
<div class="form-container">
    <form id="contact_form">
        <div class="mb-3 form-row">
            <div class="mr-3 form-col">
                <label for="name_input">Your Name:</label>
                <input type="text" name="name" id="name_input" placeholder="Name" />
            </div>
            <div class="form-col">
                <label>Email:</label>
                <input type="email" placeholder="" />
            </div>
        </div>
        <div class="mb-3">
            <label>Message:</label>
            <textarea rows="6" class="w-full border border-gray"></textarea>
        </div>
        <div class="mb-3">
            <button class="btnx" type="submit">Send</button>
        </div>
    </form>
</div>

<style>
  /*CSS Reset code. to reset browser defaults */
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}


button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*Form styles start*/
  
.mb-3 {
  margin-bottom: 0.75rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.w-full {
  width: 100%;
}

.border {
  border-width: 1px;
}

input[type=text],  input[type=email] {
  height: 2.25rem;
  width: 100%;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

input[type=text]:focus,  input[type=email]:focus {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

textarea {
  width: 100%;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
  padding: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.form-container {
  width: 100%;
}

.form-container {
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.form-row {
  display: flex;
  width: 100%;
}
.form-col {
  width: 50%;
}
button.btnx {
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
button.btnx:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
button.btnx:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
</style>

How to Use

Simply copy the code to your web page HTML.

Back-end processing and record keeping

You may want to get email notifications when a form is submitted. Moreover, you may want to store the form submission records, search the records later. All these requires a back-end processor. Here is how to add a backend to your form:

Using Ratufa backend

Go to ratufa.io
Press the "Connect your form" button
Code to connect your form is displayed. Copy the code to the bottom of the HTML code above
Test your form. Ratufa will display the submissions - to the right side
Copy the combined code to your web page

Ratufa will store your form submissions and you can configure to send email notifications. You can search and download the records whenever required.

How do I link a contact form to an email in HTML?

The visitor's web browser uses HTML code to display the form..

Step 1: Use PHP to create a page. ... .

Step 2: Make the form using code. ... .

Step 3: Make the form send an email..

How do I add a contact form to my HTML website?

Five steps to creating an HTML contact form.

Choose an HTML editor..

Make a file with . html extension..

Make a file with the . php extension..

Generate the PHP code to capture form data..

Create your HTML contact form..

How do I email a contact us form?

Contact forms can use PHP mail() function or SMTP authentication to send emails. With the PHP mail() function, you send emails directly from your web server without any form of authentication.

How do I create a mailto form in HTML?

For creating a simple Mailto form, you need to use the <form> element with its action (specifies the address (URL) where to submit the form), method (specifies the HTTP method to use when submitting the form) and enctype (specifies the encoding of the submitted data) attributes, insert a mailto: link, a <textarea> ...

kode html Form Contact Coding contact us