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 its 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 with free software like Google Forms. A primary benefit of using form templates is that you can tailor your web form to your audience and your business goals.
When you consider the value and importance of the information you’re gathering, working with a form template is quite 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.
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 adhere to 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.
Pro-Tip: 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, you can 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 help you ask the right questions and gather all the information you need from your customers.
Let’s review some form templates you can use for your business or organization. You might use one or several of these templates based on your needs depending on your preferences and goals.
Business Form Templates and Examples
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.
Click here to download this booking form template from Paperform — a form-building software that integrates with your HubSpot account.
What we like: This simple template gets right to the point and prompts all the necessary details you need to make a reservation.
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.
Click here to download this contact form template from the HubSpot Marketplace.
What we like: This form template asks for all the necessary information from your reader while also providing them with the knowledge of your company’s hours of operation, and links to relevant social media.
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.
Click here to access this branding questionnaire form template from Typeform — a form-building software that integrates with your HubSpot account.
What we like: This beautiful design directs your attention to the signup button while also showcasing the potential of building your brand identity.
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.
Click here to download this lead generation form template from the HubSpot Marketplace.
What we like: This is a clean template that draws attention to the contact form and gives you plenty of room to tell the customer about your company.
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.
Click here to use this order form template from JotForm — a form-building software that integrates with your HubSpot account.
What we like: The ability to insert images really helps your customer visualize what product they’re bringing home through this form.
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.
Click here to access this customer feedback form template from Typeform — a form-building software thatintegrates with your HubSpot account
What we like: This is a welcoming design that encourages customer feedback with its friendly orange hue and simple background.
Entry Form and Request Form Templates and Examples
Entry forms and request forms gather information from customers and other members of your audience. These 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 other information in the mail.)
Click here to download this registration form template from the HubSpot Marketplace.
What we like: This simple design gives you the basics of a registration form with space to advertise your event as well.
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.
Click here to use this donation form template from JotForm — a form-building software that integrates with your HubSpot account.
What we like: This is an old-school design that collects all the information you need from visitors.
HTML Form Templates and Examples
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>
What we like: This template is simple and easy to customize for your website.
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.
Editor's note: This post was originally published in March 2020 and has been updated for comprehensiveness.
![HTML Form Templates [46 Best Examples]](https://www.hubspot.com/hubfs/html-form-template.webp)
![4 Free Lead Generation Form Templates [+ Tools]](https://53.fs1.hubspotusercontent-na1.net/hubfs/53/lead-generation-template.jpg)
