8 min remaining

As a marketer, your customers are your priority. To put them first, though, you need to know a lot about them — including their personal information, product or service preferences, and honest feedback.

The best way to connect with and analyze your customers is through a web form. Forms provide an easy, straightforward, and systematized way to gather information from your website visitors, leads, and customers.

What might not be as simple is figuring out the specific questions you should ask and the type of information you should collect from your audience. That’s where form templates come in handy.

This guide will walk you through our recommended templates for a variety of web forms you may need.

Form Templates

Form templates are pre-designed web forms that are used by businesses to collect data from website visitors and customers. They’re typically created to obtain a particular set of information a business needs from their audience members.

Building a web form from scratch isn’t difficult, especially if you’re working with an intelligent CMS or marketing software — like HubSpot Marketing Hub. (In fact, HubSpot offers its own free form builder.)

There are numerous form templates available online to purchase or download for free. You can also build your own form templates in free software like Google Forms. A primary benefit of using form templates is that you can tailor them to your audience and business goals.

When you consider the value and importance of the information you’re gathering from your audience members, working with a form template can be helpful. Let’s discuss a few key reasons why.

Form Template Benefits

There are many reasons to use web form templates — they’re convenient to set up and ensure you gather the right information from your visitors, leads, and customers.

1. Form templates are systematized.

While web forms vary between organizations and websites, most types of forms ask similar questions. Form templates allow you to keep your web forms consistent and systematized, ensuring that you’re presenting the same user experience (UX) across all your web pages and web forms.

Systematized web forms also make for easy form analysis — an activity that helps you maximize the impact of your forms through optimization efforts, tracking, and key insights.

2. Form templates are convenient.

Marketers love saving time without sacrificing quality, right? Form templates can do this for you, too. Whether you’re pulling one from this guide, the free forms tool in HubSpot, or some pre-written HTML code, a form template can help you gather important information in only a few clicks.

Form templates also help you meet those web form best practices, such as using the correct form fields and question order. With a template, you don’t have to consider what to ask or how to ask it — those details are taken care of for you.

Speaking of convenience, you can save even more time and build gorgeous drag-and-drop web forms (and entire landing pages!) inside the free HubSpot WordPress plugin.

3. Form templates are thorough.

Regardless of what type of web form you’re building, it'll allow you to ask visitors and customers for information that matters to your business.

Whether you’re growing your email list, accepting online payments, asking for customer feedback, or registering new sponsorships, form templates come ready to help you ask the right questions and gather all necessary information.

Now, let’s review some form templates you can use for your business or organization. You might use one or several of these form templates based on your needs depending on your preference and what your business needs.

Business Form Templates

Business web forms are used to connect with site visitors, convert leads, accept purchases and payments, and gather customer feedback.

 

1. Booking Form Template

Booking forms are similar to contact forms (which we'll touch on next) in that they request personal information from your site visitors, but visitors typically complete these forms to book an appointment or reservation with your business (such as a restaurant reservation). For this reason, booking forms also include time and date information.

booking form template

Click here to download this booking form template from Paperform — a form-building software that integrates with your HubSpot account.

 

2. Contact Form Template

Contact forms provide a space for visitors and customers to ask questions, express interest in your business, or request customer service. They gather data — such as a visitor’s name, contact information, or order number — that you can use to follow-up and provide information or assistance. Contact forms are typically found on ”Contact Us” web pages.

contact form template

Click here to download this contact form template from the HubSpot Marketplace.

 

3. Branding Questionnaire Form Template

Branding questionnaire forms are typically shared by agencies, brand marketers, and designers who provide branding services to clients. These forms ask a variety of questions about a company’s branding, such as its logo, tagline, and other visual assets.

branding questionnaire form template

Click here to access this branding questionnaire form template from Typeform — a form-building software that integrates with your HubSpot account.

 

4. Lead Generation Form Template

Lead generation forms serve a single purpose: to convert your website visitors into leads. They’re typically found on landing pages and are filled out in exchange for a content offer or discount, but lead gen forms can also be located anywhere on your website.

These forms ask similar questions as contact forms but may also include form fields for a visitor’s company name, job title, or other information that helps your marketing and/or sales department qualify them as a lead.

lead generation form template

Click here to download this lead generation form template from the HubSpot Marketplace.

 

5. Order Form Template

Order forms allow your site visitors and returning customers to place orders and make purchases on your website. They typically ask for contact, payment, billing, and shipping information, making them perfect candidates for multi-step form design.

order form template

Click here to use this order form template from JotForm — a form-building software that integrates with your HubSpot account.

 

6. Customer Feedback Form Template

Customer feedback form templates focus primarily on your customers’ experiences. These surveys feature a variety of form fields, including multiple-choice, drop-down, and long-form questions.

Easily measure customer satisfaction and begin to improve your customer experience with these five free customer experience survey templates.

customer feedback form template

Click here to access this customer feedback form template from Typeform.

Entry Form and Request Form Templates

Entry forms and request forms gather information from customers and other members of your audience. These types of forms don’t necessarily affect your business — rather, they’re used as sign-up or registration forms that encourage visitors to share information.

Create gorgeous forms and even entire landing pages with HubSpot’s free WordPress plugin.

 

1. Registration Form Template

Registration forms are used when leads are interested in signing up for your service or event. These forms may or may not request billing and shipping information depending on the nature of your service or event. (For example, if visitors fill out your registration form to participate in a marathon, you may ask for shipping information to send them tickets or further information in the mail.)

registration form template

Click here to download this registration form template from the HubSpot Marketplace.

 

2. Donation Form Template

Donation forms are similar to order forms in that they ask for contact and payment information, but they serve to collect donations from visitors. For that reason, they typically don’t request shipping information, and they allow visitors to input their custom payment/donation amount.

donation form template

Click here to use this donation form template from JotForm.

HTML Form Templates

HTML forms don’t apply to a specific type of web form; rather, they refer to the way your form templates are designed — with HTML.

Download our free guide to HTML and learn some coding hacks that can help you become a more agile marketer.

The <form> tag is used to “declare” a form, and this HTML tag comes in pairs alongside a special element (called a “control”). These controls are written between the opening <form> tag and closing </form> tag.

A few examples of these special form elements include:

  • <input>, which defines the type of data input
  • <textarea>, which defines the size of the data input field
  • <button>, which places a button in the form field
  • <select>, which defines a drop-down list
  • <option>, which defines the options in the drop-down list

Let’s look at a few examples of HTML form templates that put these tags to work.

 

1. Contact Form Template

 

<!DOCTYPE html>
<html>
<head>
<title>Contact form</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<style>
html, body {
min-height: 100%;
padding: 0;
margin: 0;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
}
h1 {
margin: 0 0 20px;
font-weight: 400;
color: #1c87c9;
}
p {
margin: 0 0 5px;
}
.main-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1c87c9;
}
form {
padding: 25px;
margin: 25px;
box-shadow: 0 2px 5px #f5f5f5;
background: #f5f5f5;
}
.fas {
margin: 25px 10px 0;
font-size: 72px;
color: #fff;
}
.fa-envelope {
transform: rotate(-20deg);
}
.fa-at , .fa-mail-bulk{
transform: rotate(10deg);
}
input, textarea {
width: calc(100% - 18px);
padding: 8px;
margin-bottom: 20px;
border: 1px solid #1c87c9;
outline: none;
}
input::placeholder {
color: #666;
}
button {
width: 100%;
padding: 10px;
border: none;
background: #1c87c9;
font-size: 16px;
font-weight: 400;
color: #fff;
}
button:hover {
background: #2371a0;
}
@media (min-width: 568px) {
.main-block {
flex-direction: row;
}
.left-part, form {
width: 50%;
}
.fa-envelope {
margin-top: 0;
margin-left: 20%;
}
.fa-at {
margin-top: -10%;
margin-left: 65%;
}
.fa-mail-bulk {
margin-top: 2%;
margin-left: 28%;
}
}
</style>
</head>
<body>
<div class="main-block">
<div class="left-part">
<i class="fas fa-envelope"></i>
<i class="fas fa-at"></i>
<i class="fas fa-mail-bulk"></i>
</div>
<form action="/">
<h1>Contact Us</h1>
<div class="info">
<input class="fname" type="text" name="name" placeholder="Full name">
<input type="text" name="name" placeholder="Email">
<input type="text" name="name" placeholder="Phone number">
<input type="text" name="name" placeholder="Website">
</div>
<p>Message</p>
<div>
<textarea rows="4"></textarea>
</div>
<button type="submit" href="/">Submit</button>
</form>
</div>
</body>
</html>

Click here to see what this HTML form template looks like live.

 

2. Booking Form Template

 

<!DOCTYPE html>
<html>
<head>
<title>Entertainment Booking Form</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<style>
html, body {
min-height: 100%;
}
body, div, form, input, select, textarea, p {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
line-height: 22px;
}
h1 {
position: absolute;
margin: 0;
font-size: 32px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 100%;
padding: 20px;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 20px 0 #a82877;
}
.banner {
position: relative;
height: 210px;
background-image: url("/uploads/media/default/0001/02/8ca4045044162379597641472fa0bb5489ba418f.jpeg"); background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
}
input, textarea, select {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 7px 0;
background: transparent;
}
textarea {
width: calc(100% - 12px);
padding: 5px;
}
.item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder {
color: #a82877;
}
.item input:hover, .item select:hover, .item textarea:hover {
border: 1px solid transparent;
box-shadow: 0 0 6px 0 #a82877;
color: #a82877;
}
.item {
position: relative;
margin: 10px 0;
}
input[type="date"]::-webkit-inner-spin-button {
display: none;
}
.item i, input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
font-size: 20px;
color: #a9a9a9;
}
.item i {
right: 1%;
top: 30px;
z-index: 1;
}
[type="date"]::-webkit-calendar-picker-indicator {
right: 0;
z-index: 2;
opacity: 0;
cursor: pointer;
}
input[type="time"]::-webkit-inner-spin-button {
margin: 2px 22px 0 0;
}
input[type=radio], input.other {
display: none;
}
label.radio {
position: relative;
display: inline-block;
margin: 5px 20px 10px 0;
cursor: pointer;
}
.question span {
margin-left: 30px;
}
label.radio:before {
content: "";
position: absolute;
top: 2px;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid #ccc;
}
#radio_5:checked ~ input.other {
display: block;
}
input[type=radio]:checked + label.radio:before {
border: 2px solid #a82877;
background: #a82877;
}
label.radio:after {
content: "";
position: absolute;
top: 7px;
left: 5px;
width: 7px;
height: 4px;
border: 3px solid #fff;
border-top: none;
border-right: none;
transform: rotate(-45deg);
opacity: 0;
}
input[type=radio]:checked + label:after {
opacity: 1;
}
.btn-block {
margin-top: 10px;
text-align: center;
}
button {
width: 150px;
padding: 10px;
border: none;
border-radius: 5px;
background: #a82877;
font-size: 16px;
color: #fff;
cursor: pointer;
}
button:hover {
background: #bf1e81;
}
@media (min-width: 568px) {
.name-item, .city-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.name-item input, .city-item input {
width: calc(50% - 20px);
}
.city-item select {
width: calc(50% - 8px);
}
}
</style>
</head>
<body>
<div class="testbox">
<form action="/">
<div class="banner">
<h1>Entertainment Booking Form</h1>
</div>
<div class="item">
<p>Date of Event</p>
<input type="date" name="bdate" />
<i class="fas fa-calendar-alt"></i>
</div>
<div class="item">
<p>Time of Event</p>
<input type="time" name="name" />
<i class="fas fa-clock"></i>
</div>
<div class="item">
<p>Select Artist</p>
<select>
<option value=""></option>
<option value="1">*Please select*</option>
<option value="2">Artist 1</option>
<option value="3">Artist 2</option>
<option value="4">Artist 3</option>
<option value="5">Artist 4</option>
</select>
</div>
<div class="item">
<p>Description of Event</p>
<textarea rows="3" ></textarea>
</div>
<div class="item">
<p>Promoter's Name</p>
<input type="text" name="name"/>
</div>
<div class="item">
<p>Venue Name</p>
<input type="text" name="name"/>
</div>
<div class="item">
<p>Venue Address</p>
<input type="text" name="name" placeholder="Street address" />
<input type="text" name="name" placeholder="Street address line 2" />
<div class="city-item">
<input type="text" name="name" placeholder="City" />
<input type="text" name="name" placeholder="Region" />
<input type="text" name="name" placeholder="Postal / Zip code" />
<select>
<option value="">Country</option>
<option value="1">Russia</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="4">Armenia</option>
<option value="5">USA</option>
</select>
</div>
</div>
<div class="item">
<p>Venue Capacity</p>
<input type="text" name="name"/>
</div>
<div class="item">
<p>Expected Attendance</p>
<input type="text" name="name"/>
</div>
<div class="item">
<p>Type of Performance</p>
<select>
<option value=""></option>
<option value="1">*Please select*</option>
<option value="2">Solo Performance</option>
<option value="3">Full Band</option>
</select>
</div>
<div class="item">
<p>Set Time (in minutes)</p>
<input type="text" name="name"/>
</div>
<div class="item">
<p>Contact Person</p>
<div class="name-item">
<input type="text" name="name" placeholder="First" />
<input type="text" name="name" placeholder="Last" />
</div>
</div>
<div class="item">
<p>Contact Email</p>
<input type="text" name="name"/>
</div>
<div class="item">
<p>Contact Number</p>
<input type="text" name="name"/>
</div>
<div class="question">
<p>Will this event be recorded?</p>
<div class="question-answer">
<div>
<input type="radio" value="none" id="radio_1" name="recorded" />
<label for="radio_1" class="radio"><span>Yes</span></label>
</div>
<div>
<input type="radio" value="none" id="radio_2" name="recorded" />
<label for="radio_2" class="radio"><span>No</span></label>
</div>
</div>
</div>
<div class="btn-block">
<button type="submit" href="/">SEND</button>
</div>
</form>
</div>
</body>
</html>

Click here to see what this HTML form template looks like live.

 

3. Registration Form Template

 

<!DOCTYPE html>
<html>
<head>
<title>Account registration form</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<style>
html, body {
min-height: 100%;
}
body, div, form, input, select, p {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
}
h1 {
margin: 0;
font-weight: 400;
}
h3 {
margin: 12px 0;
color: #8ebf42;
}
.main-block {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
form {
width: 100%;
padding: 20px;
}
fieldset {
border: none;
border-top: 1px solid #8ebf42;
}
.account-details, .personal-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.account-details >div, .personal-details >div >div {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.account-details >div, .personal-details >div, input, label {
width: 100%;
}
label {
padding: 0 5px;
text-align: right;
vertical-align: middle;
}
input {
padding: 5px;
vertical-align: middle;
}
.checkbox {
margin-bottom: 10px;
}
select, .children, .gender, .bdate-block {
width: calc(100% + 26px);
padding: 5px 0;
}
select {
background: transparent;
}
.gender input {
width: auto;
}
.gender label {
padding: 0 5px 0 0;
}
.bdate-block {
display: flex;
justify-content: space-between;
}
.birthdate select.day {
width: 35px;
}
.birthdate select.mounth {
width: calc(100% - 94px);
}
.birthdate input {
width: 38px;
vertical-align: unset;
}
.checkbox input, .children input {
width: auto;
margin: -2px 10px 0 0;
}
.checkbox a {
color: #8ebf42;
}
.checkbox a:hover {
color: #82b534;
}
button {
width: 100%;
padding: 10px 0;
margin: 10px auto;
border-radius: 5px;
border: none;
background: #8ebf42;
font-size: 14px;
font-weight: 600;
color: #fff;
}
button:hover {
background: #82b534;
}
@media (min-width: 568px) {
.account-details >div, .personal-details >div {
width: 50%;
}
label {
width: 40%;
}
input {
width: 60%;
}
select, .children, .gender, .bdate-block {
width: calc(60% + 16px);
}
}
</style>
</head>
<body>
<div class="main-block">
<form action="/">
<h1>Create a free account</h1>
<fieldset>
<legend>
<h3>Account Details</h3>
</legend>
<div class="account-details">
<div><label>Email*</label><input type="text" name="name" required></div>
<div><label>Password*</label><input type="password" name="name" required></div>
<div><label>Repeat email*</label><input type="text" name="name" required></div>
<div><label>Repeat password*</label><input type="password" name="name" required></div>
</div>
</fieldset>
<fieldset>
<legend>
<h3>Personal Details</h3>
</legend>
<div class="personal-details">
<div>
<div><label>Name*</label><input type="text" name="name" required></div>
<div><label>Phone*</label><input type="text" name="name" required></div>
<div><label>Street</label><input type="text" name="name"></div>
<div><label>City*</label><input type="text" name="name" required></div>
<div>
<label>Country*</label>
<select>
<option value=""></option>
<option value="Armenia">Armenia</option>
<option value="Russia">Russia</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</div>
<div><label>Website</label><input type="text" name="name"></div>
</div>
<div>
<div>
<label>Gender*</label>
<div class="gender">
<input type="radio" value="none" id="male" name="gender" required/>
<label for="male" class="radio">Male</label>
<input type="radio" value="none" id="female" name="gender" required/>
<label for="female" class="radio">Female</label>
</div>
</div>
<div class="birthdate">
<label>Birthdate*</label>
<div class="bdate-block">
<select class="day" required>
<option value=""></option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select class="mounth" required>
<option value=""></option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<input type="text" name="name" required>
</div>
</div>
<div>
<label>Nationality*</label>
<select required>
<option value=""></option>
<option value="Armenian">Armenian</option>
<option value="Russian">Russian</option>
<option value="German">German</option>
<option value="French">French</option>
<option value="American">American</option>
<option value="English">English</option>
</select>
</div>
<div>
<label>Children*</label>
<div class="children"><input type="checkbox" name="name" required></div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h3>Terms and Mailing</h3>
</legend>
<div class="terms-mailing">
<div class="checkbox">
<input type="checkbox" name="checkbox"><span>I accept the <a href="https://www.w3docs.com/privacy-policy">Privacy Policy for W3Docs.</a></span>
</div>
<div class="checkbox">
<input type="checkbox" name="checkbox"><span>I want to recelve personallzed offers by your site</span>
</div>
</fieldset>
<button type="submit" href="/">Submit</button>
</form>
</div>
</body>
</html>

Click here to see what this HTML form template looks like live.

 

4. Customer Feedback Form Template

 

<!DOCTYPE html>
<html>
<head>
<title>Customer Feedback Form</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<style>
html, body {
min-height: 100%;
}
body, div, form, input, p {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
line-height: 22px;
}
h1 {
font-weight: 400;
}
h4 {
margin: 15px 0 4px;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 3px;
}
form {
width: 100%;
padding: 20px;
background: #fff;
box-shadow: 0 2px 5px #ccc;
}
input {
width: calc(100% - 10px);
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
vertical-align: middle;
}
.email {
display: block;
width: 45%;
}
input:hover, textarea:hover {
outline: none;
border: 1px solid #095484;
}
th, td {
width: 15%;
padding: 15px 0;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: unset;
line-height: 18px;
font-weight: 400;
word-break: break-all;
}
.first-col {
width: 16%;
text-align: left;
}
table {
width: 100%;
}
textarea {
width: calc(100% - 6px);
}
.btn-block {
margin-top: 20px;
text-align: center;
}
button {
width: 150px;
padding: 10px;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #095484;
font-size: 16px;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0666a3;
}
@media (min-width: 568px) {
th, td {
word-break: keep-all;
}
}
</style>
</head>
<body>
<div class="testbox">
<form action="/">
<h1>Customer Feedback Form</h1>
<p>Please take a few minutes to give us feedback about our service by filling in this short Customer Feedback Form. We are conducting this research in order to measure your level of satisfaction with the quality of our service. We thank you for your participation.</p>
<hr />
<h3>Overall experience with our service</h3>
<table>
<tr>
<th class="first-col"></th>
<th>Very Good</th>
<th>Good</th>
<th>Fair</th>
<th>Poor</th>
<th>Very Poor</th>
</tr>
<tr>
<td class="first-col">How would you rate your overall experience with our service?</td>
<td><input type="radio" value="none" name="rate" /></td>
<td><input type="radio" value="none" name="rate" /></td>
<td><input type="radio" value="none" name="rate" /></td>
<td><input type="radio" value="none" name="rate" /></td>
<td><input type="radio" value="none" name="rate" /></td>
</tr>
<tr>
<td class="first-col">How satisfied are you with the comprehensiveness of our offer?</td>
<td><input type="radio" value="none" name="satisfied" /></td>
<td><input type="radio" value="none" name="satisfied" /></td>
<td><input type="radio" value="none" name="satisfied" /></td>
<td><input type="radio" value="none" name="satisfied" /></td>
<td><input type="radio" value="none" name="satisfied" /></td>
</tr>
<tr>
<td class="first-col">How would you rate our prices?</td>
<td><input type="radio" value="none" name="prices" /></td>
<td><input type="radio" value="none" name="prices" /></td>
<td><input type="radio" value="none" name="prices" /></td>
<td><input type="radio" value="none" name="prices" /></td>
<td><input type="radio" value="none" name="prices" /></td>
</tr>
<tr>
<td class="first-col">How satisfied are you with the timeliness of order delivery?</td>
<td><input type="radio" value="none" name="timeliness" /></td>
<td><input type="radio" value="none" name="timeliness" /></td>
<td><input type="radio" value="none" name="timeliness" /></td>
<td><input type="radio" value="none" name="timeliness" /></td>
<td><input type="radio" value="none" name="timeliness" /></td>
</tr>
<tr>
<td class="first-col">How satisfied are you with the customer support?</td>
<td><input type="radio" value="none" name="name" /></td>
<td><input type="radio" value="none" name="name" /></td>
<td><input type="radio" value="none" name="name" /></td>
<td><input type="radio" value="none" name="name" /></td>
<td><input type="radio" value="none" name="name" /></td>
</tr>
<tr>
<td class="first-col">Would you recommend our product / service to other people?</td>
<td><input type="radio" value="none" name="recommend" /></td>
<td><input type="radio" value="none" name="recommend" /></td>
<td><input type="radio" value="none" name="recommend" /></td>
<td><input type="radio" value="none" name="recommend" /></td>
<td><input type="radio" value="none" name="recommend" /></td>
</tr>
</table>
<h4>What should we change in order to live up to your expectations?</h4>
<textarea rows="5"></textarea>
<h4>Email</h4>
<small>Only if you want to hear more from us.</small>
<input class="email" type="text" name="name" />
<div class="btn-block">
<button type="submit" href="/">Send Feedback</button>
</div>
</form>
</div>
</body>
</html>

Click here to see what this HTML form template looks like live.

Put Your Form Templates to Work

Form templates make the web form process that much easier. They offer a fantastic user experience for your visitors, leads, and customers, and they simplify your life by providing a systematized, thorough process of gathering critical information. Begin with one of templates above to put your web forms to work.

Originally published Mar 4, 2020 7:30:00 AM, updated March 31 2020

Topics:

Form Templates