Como comercializador, sus clientes son su prioridad número uno. Sin embargo, para ponerlos en primer lugar, necesita saber mucho sobre ellos, incluida su información personal, preferencias de productos o servicios y comentarios honestos.
La mejor manera de conectarse con los clientes y analizarlos es utilizar un formulario web. Los formularios brindan una manera fácil, simple y estructurada de recopilar información de los visitantes del sitio, prospectos y clientes.
Lo que puede no ser tan simple es identificar las preguntas específicas que deben hacerse y el tipo de información que debe recopilarse de su audiencia. Aquí es donde las plantillas de formulario son útiles.
Esta guía lo guiará a través de nuestras plantillas recomendadas para los diversos formularios web que pueda necesitar.
Plantillas de formulario
Las plantillas de formulario son formularios web prediseñados que las empresas utilizan para recopilar datos de los visitantes y clientes del sitio web. Por lo general, se crean para obtener un conjunto específico de información que una empresa necesita de su audiencia.
Crear un formulario web desde cero no es difícil, especialmente si está trabajando con CMS inteligente o software de marketing – cómo Centro de marketing de HubSpot. (En realidad, HubSpot ofrece su propio creador de formularios gratuito.)
Hay muchas plantillas de formulario disponibles en línea para su compra o Descárgalo gratis. También puede crear sus propias plantillas de formulario en software gratuito como Google Forms. El principal beneficio de usar plantillas de formulario es que puede personalizarlas para que se adapten a su audiencia y objetivos comerciales.
Al considerar el valor y la relevancia de la información que está recopilando de los miembros de la audiencia, trabajar con una plantilla de formulario puede ayudar. Discutamos algunas razones clave.
Beneficios de una plantilla de formulario
Hay muchas razones para usar plantillas de formularios web: son convenientes para configurar y garantizar que está recopilando información relevante de visitantes, prospectos y clientes.
1. Se sistematizan formularios de formularios.
Si bien los formularios web varían según la organización y el sitio web, la mayoría de los tipos de formularios hacen preguntas similares. Las plantillas de formulario mantienen sus formularios web coherentes y estructurados al proporcionar la misma experiencia de usuario (UX) en todas las páginas web y formularios web.
Los formularios web estructurados también facilitan el análisis de formularios, una actividad que lo ayuda a maximizar el impacto de sus formularios a través de la optimización, el seguimiento y la información clave.
2. Las plantillas de formulario son convenientes.
A los especialistas en marketing les encanta ahorrar tiempo sin sacrificar la calidad, ¿verdad? Las plantillas de formulario también pueden hacer esto por usted. Ya sea que esté extrayendo una de esta guía, la herramienta de formularios gratuitos en HubSpot o algún HTML preescrito, una plantilla de formulario puede ayudarlo a recopilar información importante con solo unos pocos clics.
Las plantillas de formulario también lo ayudan a seguir las mejores prácticas de formularios web, como usar los campos de formulario correctos y el orden de las preguntas. Con una plantilla, no tienes que pensar en qué preguntar o cómo solicitarlo: estos detalles se encargan de usted.
Hablando de comodidad, incluso puedes ahorrar todavía tiempo y cree excelentes formularios web de arrastrar y soltar (¡y páginas de destino completas!) en el medio Complemento gratuito HubSpot WordPress.
3. Las plantillas de formulario son precisas.
Independientemente del tipo de formulario web que cree, le permitirá solicitar a los visitantes y clientes información importante para su negocio.
Ya sea que esté ampliando su lista de correo electrónico, aceptando pagos en línea, solicitando comentarios de los clientes o registrando nuevos elementos de patrocinio, las plantillas de formulario están listas para ayudarlo a hacer las preguntas correctas y recopilar toda la información que necesita.
Ahora echemos un vistazo a algunas plantillas de formulario que puede usar en su empresa u organización. Puede usar una o más de estas plantillas de formulario según sus necesidades, según sus preferencias y necesidades comerciales.
Plantillas de formulario comercial
Los formularios web comerciales se utilizan para conectarse con los visitantes del sitio, convertir clientes potenciales, aceptar compras y pagos, y recopilar comentarios de los clientes.
1. Plantilla de formulario de reserva
Los formularios de reserva son similares a los formularios de contacto (que analizaremos a continuación) en el sentido de que requieren información personal de los visitantes de su sitio, pero los visitantes generalmente completan estos formularios para programar una cita o una reserva con su empresa (por ejemplo, una reserva en un restaurante). Por este motivo, los formularios de reserva también contienen información sobre la fecha y la hora.

Haga clic aquí para descargar esta plantilla de formulario de reserva de Paperform – Software de creación de formularios que se integra con tu cuenta de HubSpot.
2. Plantilla de formulario de contacto
Los formularios de contacto brindan a los visitantes y clientes un espacio para hacer preguntas, expresar interés en su negocio o solicitar servicio al cliente. Recopilan datos, como el nombre del visitante, la información de contacto o el número de pedido, que puede utilizar para el seguimiento y para proporcionar información o asistencia. Los formularios de contacto generalmente se encuentran en el sitio web «Contacto».

Haz clic aquí para descargar esta plantilla de formulario de contacto de HubSpot Marketplace.
3. Plantilla de formulario de cuestionario de marca
Los formularios de cuestionarios de marca suelen ser proporcionados por agencias, comercializadores de marca y diseñadores que brindan servicios de marca a los clientes. Estos formularios contienen varias preguntas sobre la marca de la empresa, como un logotipo, un eslogan y otros activos visuales.

Haga clic aquí para acceder a esta plantilla de formulario de cuestionario de marca de Typeform – Software de creación de formularios que se integra con tu cuenta de HubSpot.
4. Plantilla de formulario de generación de prospectos
Los formularios de generación de leads tienen un propósito: convertir a los visitantes de su sitio web en clientes potenciales. Por lo general, se encuentran en las páginas de destino y se completan a cambio de una oferta de contenido o un descuento, pero los formularios de generación de prospectos también se pueden encontrar en cualquier parte del sitio.
Estos formularios hacen preguntas similares a las de los formularios de contacto, pero también pueden contener campos de formulario para el nombre de la empresa del visitante, el cargo u otra información que ayude al departamento de marketing y/o ventas a calificarlo como cliente potencial.

5. Plantilla de formulario de pedido
Los formularios de pedido permiten a los visitantes de su sitio web y a los clientes que regresan realizar pedidos y realizar compras en su sitio web. Por lo general, solicitan información de contacto, pagos, facturación y envío, lo que los convierte en candidatos ideales para el diseño de formularios de varios pasos.

Haga clic aquí para usar esta plantilla de formulario de pedido de JotForm – Software de creación de formularios que se integra con tu cuenta de HubSpot.
6. Plantilla de formulario de comentarios del cliente
Las plantillas de formulario de comentarios de los clientes se centran principalmente en la experiencia del cliente. Estas encuestas contienen una variedad de campos de formulario, incluidas preguntas de opción múltiple, listas desplegables y preguntas largas.

Haz clic aquí para acceder a esta plantilla de formulario de comentarios de clientes de Typeform.
Formularios de solicitud y formularios de solicitud
Los formularios de solicitud y los formularios de solicitud recopilan información de los clientes y otros miembros de su audiencia. Estos tipos de formularios no necesariamente tienen un impacto en su negocio; más bien, se utilizan como formularios de registro o registro que alientan a los visitantes a compartir información.
1. Modelo del formulario de registro
Los formularios de registro se utilizan cuando los clientes potenciales están interesados en registrarse para su servicio o evento. Estos formularios pueden requerir o no información de facturación y envío, según la naturaleza de su servicio o evento. (Por ejemplo, si los visitantes completan el formulario de registro para participar en el maratón, puede solicitar información de envío para enviarles boletos o más información por correo).

Haz clic aquí para descargar esta plantilla de formulario de registro de HubSpot Marketplace.
2. Plantilla de formulario de donación
Los formularios de donación son similares a los formularios de pedido en el sentido de que solicitan información de contacto e información de pago, pero se utilizan para recolectar donaciones de los visitantes. Por esta razón, normalmente no solicitan información de envío y permiten a los visitantes ingresar un monto de pago/donación personalizado.

Haga clic aquí para usar esta plantilla de formulario de donación de JotForm.
Plantillas de formulario HTML
Los formularios HTML no se aplican a un tipo particular de formulario web; más bien, se relacionan con la forma en que se diseñan las plantillas de formulario, utilizando HTML.
Marcador
.
Estos son algunos ejemplos de estos elementos de formulario especiales:
- que especifica el tipo de entrada
que coloca un botón en un campo de formulario que define la lista desplegable que define las opciones en la lista desplegable
Veamos algunos ejemplos de plantillas de formulario HTML donde funcionan estas etiquetas.
1. Plantilla de formulario de contacto
<!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="https://blog.hubspot.com/">
<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="https://blog.hubspot.com/">Submit</button>
</form>
</div>
</body>
</html>
Haga clic aquí para ver esta plantilla de formulario HTML en vivo.
2. Plantilla de formulario de reserva
<!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="https://blog.hubspot.com/">
<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="https://blog.hubspot.com/">SEND</button>
</div>
</form>
</div>
</body>
</html>
Haga clic aquí para ver esta plantilla de formulario HTML en vivo.
3. Modelo del formulario de registro
<!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="https://blog.hubspot.com/">
<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="https://blog.hubspot.com/">Submit</button>
</form>
</div>
</body>
</html>
Haga clic aquí para ver esta plantilla de formulario HTML en vivo.
4. Plantilla de formulario de comentarios del cliente
<!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="https://blog.hubspot.com/">
<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="https://blog.hubspot.com/">Send Feedback</button>
</div>
</form>
</div>
</body>
</html>
Haga clic aquí para ver esta plantilla de formulario HTML en vivo.
Utilice sus plantillas de formulario para el trabajo
Las plantillas de formulario facilitan mucho el procesamiento de formularios web. Ofrecen una experiencia de usuario fantástica a visitantes, clientes potenciales y clientes, y simplifican su vida al proporcionar un proceso estructurado y preciso para recopilar información crítica. Comience con una de las plantillas anteriores para que sus formularios web funcionen.









