Free Html Email Form Download

W3.CSS Website Templates. We have created some responsive W3.CSS website templates for you to use. You are free to modify, save, share, and use them in. Leave it empty if it's the same as the email of the form Name: Mail options (SMTP, CC, BCC, HTML or plain text email) Use PHPMailer library Mail type: Html Plain text CC: Use comma (, ) to separate multiple emails, like: a@a.com, b@b.com, c@c.com BCC: Use SMTP server to send email: File upload control. Create & Download Form.

Bootstrap 4's Default Settings

Form controls automatically receive some global styling with Bootstrap:

All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Bootstrap 4 Form Layouts

Bootstrap provides two types of form layouts:

Saying your preferences, like 'I like software X better' is ok. No racism, sexism, or bigotry allowed.

Stacked (full-width) form
Inline form

Bootstrap 4 Stacked Form

Password:

The following example creates a stacked form with two input fields, one checkbox, and a submit button.

Add a wrapper element with .form-group, around each form control, to ensure proper margins:

Example

<form action='/action_page.php'>
<div>
<label for='email'>Email address:</label>
<input type='email' placeholder='Enter email'>
</div>
<div>
<label for='pwd'>Password:</label>
<input type='password' placeholder='Enter password'>
</div>
<div>
<label>
<input type='checkbox'> Remember me
</label>
</div>
<button type='submit'>Submit</button>
</form>

Try it Yourself »

Bootstrap Inline Form

In an inline form, all of the elements are inline and left-aligned.

Note: This only applies to forms within viewports that are at least 576px wide. On screens smaller than 576px, it will stack horizontally.

Additional rule for an inline form:

Add class .form-inline to the <form> element

The following example creates an inline form with two input fields, one checkbox, and one submit button:

Example

<form action='/action_page.php'>
<label for='email'>Email address:</label>
<input type='email' placeholder='Enter email'>
<label for='pwd'>Password:</label>
<input type='password' placeholder='Enter password'>
<div>
<label>
<input type='checkbox'> Remember me
</label>
</div>
<button type='submit'>Submit</button>
</form>

Try it Yourself »

Inline Form with Utilities

The inline form above feels 'compressed', and will look much better with Bootstrap's spacing utilities. The following example adds a right margin (.mr-sm-2) to each input on all devices (small and up). And a margin bottom class (.mb-2) is used to style the input field when it breaks (goes from horizontal to vertical due to not enough space/width):

Example

Try it Yourself »

You will learn more about spacing and other 'helper' classes in our Bootstrap 4 Utilities Chapter.

Form Row/Grid

You can also use columns (.col) to control the width and alignment of form inputs without using spacing utilities. Just remember to put them inside a .row container.

In the example below, we use two columns that will appear side by side. You will learn much more about columns and rows in the Bootstrap Grids Chapter.

Example

Try it Yourself »

If you want less grid margins (override default column gutters), use .form-row instead of .row:

Example

Try it Yourself »

Form Validation

You can use different validation classes to provide valuable feedback to users. Add either .was-validated or .needs-validation to the <form> element, depending on whether you want to provide validation feedback before or after submitting the form. The input fields will have a green (valid) or red (invalid) border to indicate what's missing in the form. You can also add a .valid-feedback or .invalid-feedback message to tell the user explicitly what's missing, or needs to be done before submitting the form.

Example

In this example, we use .was-validated to indicate what's missing before submitting the form:

<form action='/action_page.php'>
<div>
<label for='uname'>Username:</label>
<input type='text' placeholder='Enter username' name='uname' required>
<div>Valid.</div>
<div>Please fill out this field.</div>
</div>
<div>
<label for='pwd'>Password:</label>
<input type='password' placeholder='Enter password' name='pswd' required>
<div>Valid.</div>
<div>Please fill out this field.</div>
</div>
<div>
<label>
<input type='checkbox' name='remember' required> I agree on blabla.
<div>Valid.</div>
<div>Check this checkbox to continue.</div>
</label>
</div>
<button type='submit'>Submit</button>
</form>

Try it Yourself »

Example

In this example, we use .needs-validation, which will add the validation effect AFTER the form has been submitting (if there's anything missing). Note that you will also have to add some jQuery code for this example to work properly:

<form action='/action_page.php' novalidate>
<div>
<label for='uname'>Username:</label>
<input type='text' placeholder='Enter username' name='uname' required>
<div>Valid.</div>
<div>Please fill out this field.</div>
</div>
<div>
<label for='pwd'>Password:</label>
<input type='password' placeholder='Enter password' name='pswd' required>
<div>Valid.</div>
<div>Please fill out this field.</div>
</div>
<div>
<label>
<input type='checkbox' name='remember' required> I agree on blabla.
<div>Valid.</div>
<div>Check this checkbox to continue.</div>
</label>
</div>
<button type='submit'>Submit</button>
</form>
<script>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>

Try it Yourself »