By reading this article, you will understand how to create an email submission form using HTML tags. We also explain a recommended service that allows you to easily create an email transmission form, so if you’re interested, be sure to check it out!
Table of contents
- What is an email transmission form?
- The basics of an email transmission form created with HTML
- Tags and attributes required for HTML email submission form
- How to create an email form using HTML
- How to send an email with HTML “mailto:”
- Enter the subject and launch the mail sending form
- Specify “CC” and start the mail form
- Specify “BCC” and start the mail form
- Specify the contents of the text and start the mail form
- How to add multiple items
- 3 recommended services that make it easy to create an email transmission form
- formrun
- google forms
- Formmailer
- summary
What is an email transmission form?
An e-mail transmission form is a form that can receive user information by e-mail, and it is almost always set on websites.
HTML has tags for creating forms, so you can create your own email sending form.
By creating an e-mail transmission form, you can obtain information on potential customers who have visited your website. It is also used as a means of making reservations on the websites of lodging and rental services.
The basics of an email transmission form created with HTML
When creating an email transmission form in HTML, generally the following three types of forms are created.
- Form for entering user information
- Screen for confirming entered information
- E-mail transmission completion screen
The top screen of the email transmission form is a form for entering the user’s name, email address, address, etc.
If your form has too many fields, your users may find it cumbersome to fill out and not use it. It is recommended to implement only the minimum required number of form input items according to the website or service to be installed .
The information sent from the input form will move to a screen where you can check whether there are any mistakes in the input content. It is effective to prevent troubles caused by acquiring wrong information of the user.
Finally, display a completion screen that the email has been successfully sent. By implementing a completion screen, you can rest assured that you can tell the user that the submission was successful.
Tags and attributes required for HTML email submission form
The main tags used when creating an email transmission form in HTML are as follows.
- form: The role of summarizing each information in the form field. It is also used when specifying the transmission method and destination of input information.
- label: A tag that names the input field of the form.
- input: A tag that creates a single-line text input field or button.
- textaret: A tag that creates a multi-line input field.
- button: a tag that can create a button
By combining the above tags, you can create an email sending form in your HTML file.
The main HTML attributes used in HTML tags when creating an email transmission form are as follows.
- action: Specifies the destination of the input information.
- method: Specifies the method of sending the input information. There are two methods of sending: POST and GET.
- type: You can change the format of the input form.
- name: Attribute that sets the name of the element. Used to get the input contents of the form.
- Attributes used for the for:label tag that can be associated with form inputs.
If you are creating an email transmission form for the first time, we recommend that you work on creating it while checking the characteristics of each tag and attribute .
How to create an email form using HTML
I will explain how to create an email transmission form in HTML using sample code.
Just copy and paste the sample code into the HTML file and it will be reflected on the web page.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
.box{
margin-bottom:15px;
}
label{
display:block;
float:left;
width:140px;
}
</style>
</head>
<body>
<h2></h2>
<form action="/check.html" method="POST">
<div class="box">
<label class="username" for="username"></label>
<input id="username" type="text" name="name">
</div>
<div class="box">
<label class="email" for="email"></label>
<input id="email" type="email" name="email">
</div>
<div class="box">
<label class="text" for="text"></label>
<textarea id="text"></textarea>
</div>
<div class="btn">
<button type="submit"></button>
</div>
</form>
</body>
</html>Since “/check.html” is specified in the action attribute, the code sends the form submission data to a file called check.html.
method For the method of transmission, you can specify a transmission method called “POST” that is used when acquiring new information such as personal information, and a method called “GET” that acquires existing information.
In the mail transmission form, let’s specify POST because it handles the user’s personal information .
By enclosing the input forms in div tags and specifying the same style, you can align the names of each form.
The for attribute of the label tag and the id attribute of the input tag are associated with the same value. By associating, when the mouse hits the label tag, the associated input field will also be focused.
It is recommended to create an input field with a label tag and associate it with the input form, as it will make it easier for users to use.
If you enter the value “submit” in the type attribute of the button tag, it will function as a button that submits the information of the input tag entered in the form tag.
In addition, by making the width of the label tag uniform with CSS, it is a specification that the position with the input field does not collapse due to the length of the character.
The label tag is an inline element and the width is not reflected, so it is made a block element with “display: block”.
How to send an email with HTML “mailto:”
“mailto:” is a value that can be specified in the href attribute, and you can send an email to the specified email address.
The input method of “mailto:” is as follows.
By entering the destination email address after “mailto:”, clicking the link will launch the email form.
You can also enter the content of the subject and the content of the email in “mailto:”.
I will explain how to use each content.
Enter the subject and launch the mail sending form
If you specify “?subject=content of subject” after entering “mailto:” and the email address, the content of the subject will be displayed in the launched email form.
sample code
Specify “CC” and start the mail form
CC is an abbreviation for Carbon Copy , and is a method of sharing sent emails with multiple email addresses .
You can add multiple email addresses by specifying “?cc=” after the email address.
sample code
The above code specifies two email addresses, “test@mailtest.com” and “test2@mailtest.com”.
Specify “BCC” and start the mail form
BCC is an abbreviation for Blind Carbon Copy, which allows you to share the contents of an email with multiple email addresses while keeping the top down.
This is an effective method when you do not want to know the shared email address, as the email sender does not know the shared email address.
If you specify “?bcc=” after the email address, you can add multiple email addresses with the recipients hidden.
sample code
In the above code, the destination “test@mailtest.com” is visible, but the shared “test2@mailtest.com” is invisible to the sender.
Specify the contents of the text and start the mail form
You can enter the content of the body by adding “?body=” to the end of the email address.
sample code
When inserting a line break in the text, enter “%0D%0A” in the text and use “%20” for half-width spaces.
It is recommended when you want to specify what you want to convey when sending an email or an explanation of the input content .
How to add multiple items
When adding multiple items such as subject and body to “mailto:”, specify “&” between the items.
I will explain how to add “cc=” and “body=” at the same time using sample code.
sample code
By specifying “&” after the e-mail address specified by cc and entering the body, multiple e-mail addresses and body content are added.
3 recommended services that make it easy to create an email transmission form
There are many services that allow you to create email submission forms without using HTML.
Among them, we will introduce three recommended services that even beginners can easily create an email transmission form.
Not only is it easy to use, but it is also feature-rich and highly customizable. If you are an advanced programmer or want to easily create an email transmission form and embed it in an HTML file, please check it out!
formrun
Formrun is a free service that allows you to easily create an input form from a template, and is excellent in customer management and cooperation with external services.
With so many features, it can handle simple forms to forms of various formats. The high level of design is also attractive, and you can select a design that suits your website from over 40 types of design templates .
User information acquired by Form Run can be conveniently used in conjunction with various external services, such as managing with Google Docs and receiving content with Chatwork.
It is a form creation service that can be used with confidence because it has a track record of over 1 million uses so far.
google forms
Google Forms, as the name suggests, is an email submission form provided by Google.
You can receive user input data with Gmail and manage it with a spreadsheet . It is also possible to visualize the acquired data as a graph.
There are about 17 types of form templates, from contact information forms to event forms.
Formmailer
Form Mailer is an email transmission form provided by Future Spirits Co., Ltd.
You can create form input fields by dragging and dropping them. A wide variety of input fields are available, so even those who are not good at HTML can implement their ideal functions.
Form Mailer can also create landing pages as well as email transmission forms . It is recommended for those who want to easily create not only email forms but also web pages .
summary
This time, I explained how to create an email transmission form in HTML. How was it?
By understanding the features and usage of HTML tags , even programming beginners can create email sending forms .
Also, if you specify “mailto:” for the link created with the a tag, you can send it using the mail form installed on the device.
If you want to easily create a form, including form functions and design, it would be a good idea to use the services introduced in this article that allow you to create an email transmission form.
