How to Create Mailto Forms?

The HTML element <form> represents a document section with interactive controls for submitting data. It is a container for input elements such as text, email, numbers, radio buttons, checkboxes, submit buttons, and so on.

Forms are created by embedding input fields within paragraphs, preformatted text, lists, and tables. This provides a great deal of freedom in designing form layouts. Following is the syntax –

<form>
  <!--form elements-->
</form>

There are numerous form elements. A few of them are discussed below:

  • input: It specifies a data entry field for the user.

  • label: It defines a label for the elements.

  • select: It defines a drop-down list.

  • textarea: It defines an input field with multiple-lines.

  • button: It defines a clickable button.

  • output: It represents the result of any calculation.

  • option: It defines an option to be selected.

The <form> element has five attributes:

  • action: It defines the action that will be taken when the form is submitted.

  • target: It specifies where the response received after submitting the form should be displayed.

  • method: It specifies the HTTP method (GET/POST) that will be used to submit form data.

  • autocomplete: It specifies whether autocomplete should be enabled or disabled for a form.

  • novalidate: It specifies that the form-data (input) should not be validated when submitted.

Form elements and attributes are the most important aspects of creating a form and by using them we can create a variety of different forms with different concepts and functionalities.

In this tutorial we will discuss about mailto forms and the technique to create them in HTML. Let us begin by understanding what are mailto forms and why do we need them.

Mailto Forms

Mailto forms are used on websites to keep visitors in touch so they can make suggestions, ask questions, or provide feedback. These forms are simple to use and typically include fields for an email address, user name, and a message text area.

When a consumer wants to communicate or provide feedback, the mailto link will open a default sending mail window. We can set the form's action field to mailto, and the web browser will then invoke the email client to send the form submission to the specified email address. We can also attach the Cc, Bcc, Subject, and body content.

There are several advantages of using mailto forms over plain mailto links. A Mailto form allows us to ask specific questions, whereas a Mailto link does not. Based on the responses, we can easily sort our Email messages and respond to the ones that require a response. Furthermore, using a form allows us to not always display the Email address on the web page, which keeps spammers at bay.

Using the Form Action Attribute

To create a simple Mailto form, we have to use the <form> element with its action ( it specifies the address (URL) where to submit the form), method ( it specifies the HTTP method to use when submitting the form), and enctype ( it specifies the encoding of the submitted data) attributes, and insert a mailto link, a <textarea> element, and an <input> element for submitting the form. Following is the syntax –

<form method="POST/GET" action="mailto: name@gmail.com"
          enctype="multipart/form-data">

Example

<!DOCTYPE html>
<html>
  <head>
    <title>How to Create Mailto Forms?</title>
    <style>
      .container{
          height:350px;
          width:350px;
          padding:10px;
          background-color:mintcream;
          border:1px solid mediumturquoise;
      }
      div{
          margin:25px;
      }
      .btn1,
      .btn2{
          background-color:mediumturquoise;
          border:none;
          color:white;
          height:25px;
          border-radius:5px;
          margin-right:10px;
      }
      h3{
          margin-left:25px;
      }
    </style>
    <script>
        function validation() {
            var x = document.forms["mailtoform"]["fullname"].value;
            var y = document.forms["mailtoform"]["emailaddress"].value;
            if (x == "") and (y == ""){
                alert("Name and email must be filled out");
                return false;
            }
        }   
    </script>
  </head>
  <body>
    <h3>Please Provide Your Valuable Feedback</h3>
    <div class="container">
    <form name="mailtoform" action="mailto:contact@tutorialspoint.com" onsubmit="return validation()" method="post" enctype="text/plain" required>
      <div>
        <label for="fullname">Full Name:
          <input type="text" name="fullname" id="fullname" />
        </label>
      </div>
      <div>
        <label for="emailaddress">Email Address:
          <input type="text" name="emailaddress" id="emailaddress" />
        </label>
      </div>
      <div>
        <label>Comments/Suggestions:</label>
        <br><br>
        <textarea name="comments" rows="8" cols="34">Share your experience with us and let us know how we can improvise.</textarea>
      </div>
      <div>
        <input class="btn1" type="submit" name="submit" value="Submit" />
        <input class="btn2" type="reset" name="reset" value="Clear Form" />
      </div>
    </form>
    </div>
  </body>
</html>

We can customize the mailto form as per our requirements by including the required input fields and their respective labels.

Updated on: 11-Sep-2023

268 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements