1.- Datos de la persona que presenta el reclamo:

Menor de edad

2.- Información del bien contratado:

ServicioProducto

3.- Detalle de la reclamación

ReclamoQueja

Reclamo: Disconformidad relacionada a los productos o servicios.

Queja: Disconformidad no relacionada a los productos o servicios; o, malestar o descontento respecto a la atención al público.

(*) Campos obligatorios.

Términos del libro de reclamaciones

Al ser un reclamo virtual su caso será derivado al área de atención al cliente, a fin de dar una respuesta dentro del plazo establecido legalmente.
El proveedor deberá dar una respuesta al reclamo en un plazo no mayor de treinta (30) días calendario, pudiendo ampliar el plazo hasta por treinta (30) días más, previa comunicación con el consumidor.
El formulario del reclamo no impide acudir a otras vías de solución de controversias ni es requisito previo.
Las comunicaciones respecto al reclamo se realizaran a través de correo electrónico brindado.

Aceptar políticas de privacidad

Estoy conforme con los términos del reclamo mencionados en el apartado superior.

Se enviará un correo electrónico con una copia de sus respuestas a la dirección brindada. (Verificar spam)

Libro de reclamaciones

Contact Form 7

HTML y CSS para el libro de reclamaciones generico usando el plugin de Contact Form 7

CSS CODE

/* Contact Form 7 Styles */
.contactFormStyles .wpcf7 {
	padding: 0 20%;
}
.contactFormStyles ::placeholder {
	color: #676767;
}
.contactFormStyles label {
	font-size: 16px;
	font-weight: normal;
	line-height: 1.33;
	color: #000;
}
.contactFormStyles input[type="text"]  ,
.contactFormStyles input[type="email"],
.contactFormStyles select,
.contactFormStyles textarea {
	padding: 15px 20px;
	margin: 0 ;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.33;
	color: #000;
	width: 100%;
	height: auto; 
	border-radius: 8px;
	background-color: #eee;
	border: none;
	outline: none;
	box-sizing: border-box;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.contactFormStyles textarea{
    height: 150px;
}
.contactFormStyles input[type="checkbox"]{
	appearance: none;
	display: grid;
  	place-content: center;
	margin: 0 10px 0 0;
	width: 24px;
	height: 24px;
    border-radius: 5px;
  	background-color: #eee;
  	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.contactFormStyles input[type="checkbox"]:before {
	content: "";
	width: 14px;
	height: 14px;
	transform: scale(0);
	border-radius: 4px;
	transition: 120ms transform ease-in-out;
	background: #bd1d1dAA;
}
.contactFormStyles input[type="checkbox"]:checked:before {
	transform: scale(1);
}
.contactFormStyles input[type=radio] {
	accent-color: brown;
}
.contactFormStyles select {
	padding: 15px 30px 15px 20px;
	-moz-appearance:none; 
    -webkit-appearance:none;
    appearance:none;
}
.contactFormStyles select:invalid {
	color: #676767;
}
.contactFormStyles .selectField {
	position: relative;
}
.contactFormStyles .selectField:before {
	content: "\f0d7";
	position: absolute;
	top: 16px;
	right: 12px;
	font-family: "Font Awesome\ 6 Free";
    font-weight: 900;
    z-index: 10;
}
.contactFormStyles input[type="submit"]{
    width: auto;
    height: auto;
    padding: 8px 58px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background-color: #bd1d1d;
    text-align: center;
    text-transform: uppercase;
    border: none;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    cursor: pointer;
}
.contactFormStyles input[type="submit"]:hover {
	opacity: 0.9;
}
.contactFormStyles .formFieldsGroup {
	margin: 0 0 55px 0;
	padding: 35px 8%;
    border: solid 1px #d2d2d2;
}
.contactFormStyles h2 {
	margin: 0 0 18px 0;
	font-size: 22px;
	font-weight: normal;
	line-height: 1.2;
	color: #303030;
}
.contactFormStyles h3 {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.25;
	color: #303030;
}
.contactFormStyles p {
	font-size: 16px;
	font-weight: normal;
	line-height: 1.25;
	color: #303030;
}
.contactFormStyles .twoRows {
	display: flex;
    justify-content: space-between;
    gap: 5%;
}
.contactFormStyles .twoRows > p {
	flex-basis: 50%;
}
.contactFormStyles .generalText p,
.contactFormStyles .disclaimer p {
	margin: 0 0 8px 0;
}
.contactFormStyles .generalText p:last-child,
.contactFormStyles .disclaimer p:last-child {
	margin: 0;
}
.contactFormStyles .disclaimer .obligatoryText {
	margin: 0 0 25px 0;
}
.contactFormStyles ul {
	padding: 0 0 0 30px;
    list-style: square;
}
.contactFormStyles .wpcf7-not-valid-tip {
	padding: 8px 0 0 0;
}
.contactFormStyles form div {
	margin: 0 0 15px 0;
}
.contactFormStyles form div p{
	margin: 0;
}
.contactFormStyles form div label {
	display: inline-block;
	margin: 0 0 8px 0;
}
.contactFormStyles .wpcf7-list-item {
	margin: 0;
}
.contactFormStyles .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
    align-items: center;
}
.contactFormStyles .wpcf7-acceptance a {
	font-weight: normal;
	text-decoration: underline;
}
.contactFormStyles .wpcf7-acceptance a:hover {
	text-decoration: underline;
}
.contactFormStyles .wpcf7-checkbox .wpcf7-list-item {
	display: flex;
    align-items: center;
}
.contactFormStyles .wpcf7-radio .wpcf7-list-item {
     margin: 0 8% 0 0;
}
.contactFormStyles .submitButton {
	margin: 25px 0 0 0;
	text-align: center;
}

@media only screen and (max-width: 1024px) { 
/* Contact Form 7 styles */
	.contactFormStyles input[type="text"], 
	.contactFormStyles input[type="email"], 
	.contactFormStyles select, 
	.contactFormStyles textarea {
	    padding: 10px 12px;
	    font-size: 14px;
	}
	.contactFormStyles select {
		padding: 10px 26px 10px 12px;
	}
	.contactFormStyles .selectField:before {
		top: 13px;
		right: 9px;
		font-size: 12px;
	}
	.contactFormStyles input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
	.contactFormStyles input[type="checkbox"]:before {
		width: 12px;
		height: 12px;
	}
	.contactFormStyles h2 {
		font-size: 18px;
	}
	.contactFormStyles h3 {
		font-size: 16px;
	}
	.contactFormStyles p {
		font-size: 14px;
	}
	.contactFormStyles .wpcf7-list-item-label {
		font-size: 14px;
	}
}
@media only screen and (max-width: 767px) { 
/* Contact Form 7 styles */
	.contactFormStyles .wpcf7 {
	    padding: 0;
	}
	.contactFormStyles .formFieldsGroup {
	    margin: 0 0 25px 0;
	    padding: 0 0 25px 0;
	    border: none;
	    border-bottom: 1px solid #d2d2d2;
	}
	.contactFormStyles .formFieldsGroup.lastGroup {
		border: none;
	}
	.contactFormStyles .formFieldsGroup > div:last-child {
		margin: 0;
	}
	.contactFormStyles .twoRows {
		display: block;
	}
	.contactFormStyles .twoRows p {
		margin: 0 0 15px 0;
	}
	.contactFormStyles .twoRows p:last-child {
		margin: 0;
	}
	.contactFormStyles .submitButton {
		padding: 25px 0 0 0;
	}
}

HTML CODE

<div class="formFieldsGroup">
	<h2>1.- Datos de la persona que presenta el reclamo:</h2>
	<div><p>[text* your-name autocomplete:name placeholder "Nombres: *"]</p></div>
	<div class="twoRows">
		<p>[text* your-last-name-1 autocomplete:name placeholder "Apellido paterno: *"]</p>
		<p>[text* your-last-name-2 autocomplete:name placeholder "Apellido materno: *"]</p>
	</div>
	<div><p>[text* your-address placeholder "Dirección: *"]</p></div>
	<div><p>[text* your-departamento placeholder "Departamento: *"]</p></div>
	<div class="twoRows">
		<p>[text* your-city autocomplete:name placeholder "Ciudad: *"]</p>
		<p>[text* your-distrito autocomplete:name placeholder "Distrito: *"]</p>
	</div>
	<div class="twoRows">
		<p class="selectField">[select* your-document-type first_as_label "Tipo de documento de identidad: *|null" "DNI|DNI" "Pasaporte|Pasaporte"]</p>
		<p>[text* your-document-number autocomplete:name placeholder "Número de documento: *"]</p>
	</div>
	<div class="twoRows">
		<p>[email* your-email autocomplete:email placeholder "Correo electrónico: *"]</p>
		<p>[text* your-phone-number autocomplete:phone placeholder "Teléfono: *"]</p>
	</div>
	<div><p>[checkbox your-underage "Menor de edad"]</p></div>
</div>
<div class="formFieldsGroup">
	<h2>2.- Información del bien contratado:</h2>
	<div><p>[radio your-service-product default:1 "Servicio" "Producto"]</p></div>
	<div class="twoRows">
		<p>[text* your-order-number autocomplete:name placeholder "Número de pedido o de comprobante de pago: *"]</p>
		<p>[text* your-service-cost autocomplete:name placeholder "Monto reclamado: * S/"]</p>
	</div>
	<div><p>[textarea* your-service-description placeholder "Detalle: (Describir el producto o servicio) *"]</p></div>
</div>
<div class="formFieldsGroup lastGroup">
	<h2>3.- Detalle de la reclamación</h2>
	<div><p>[radio your-complaint-type default:1 "Reclamo" "Queja"]</p></div>
	<div class="generalText">
		<p><strong>Reclamo:</strong> Disconformidad relacionada a los productos o servicios.</p>
		<p><strong>Queja:</strong> Disconformidad no relacionada a los productos o servicios; o, malestar o descontento respecto a la atención al público.</p>
	</div>
	<div><p>[textarea* your-complaint-description placeholder "Detalle: (Describa su situación) *"]</p></div>
	<div><p>[textarea* your-complaint-request placeholder "Pedido: (Describa su solicitud) *"]</p></div>
	<div class="disclaimer">
		<p class="obligatoryText">(*) Campos obligatorios.</p>
		<h3>Términos del libro de reclamaciones</h3>
		<ul>
			<li>Al ser un reclamo virtual su caso será derivado al área de atención al cliente, a fin de dar una respuesta dentro del plazo establecido legalmente.</li>
			<li>El  proveedor deberá dar una respuesta al reclamo en un plazo no mayor de treinta (30) días calendario, pudiendo ampliar el plazo hasta por treinta (30) días más, previa comunicación con el consumidor.</li>
			<li>El formulario del reclamo no impide acudir a otras vías de solución de controversias ni es requisito previo.</li>
			<li>Las comunicaciones respecto al reclamo se realizaran a través de correo electrónico brindado.</li>
		</ul>
	</div>
	<div><p>[acceptance policies optional] Aceptar <a href="/politica-privacidad/" title="Políticas de privacidad" target="_blank">políticas de privacidad</a> [/acceptance]</p></div>
	<div><p>[acceptance warranty optional] Estoy conforme con los términos del reclamo mencionados en el apartado superior. [/acceptance]</p></div>
	<div><p>Se enviará un correo electrónico con una copia de sus respuestas a la dirección brindada. (Verificar spam)</p></div>
	<div class="submitButton"><p>[submit "ENVIAR"]</p></div>
</div>

Developer Comments

Add in the WP Bakery row class the following class "contactFormStyles"

Designer Comments

no comment