¿Qué es un formulario de contacto?
Un formulario de contacto es una herramienta que facilita la comunicación directa entre los lectores y el administrador del sitio web. Generalmente, se utiliza para propósitos de ventas, como recolectar correos electrónicos y nombres de clientes potenciales.
Añadir un gadget de formulario de contacto en Blogger
La manera más sencilla de agregar un formulario de contacto en Blogger es utilizando uno de los gadgets que la plataforma ofrece por defecto. Sigue estos pasos para incorporarlo:
1. En el panel de control de Blogger, selecciona la opción "Diseño".
2. En la barra lateral, haz clic en "Añadir un Gadget".
3. Elige el gadget titulado "Formulario de Contacto".
4. Guarde los cambios realizados.
Crear una Página de Contacto con Formulario en Blogger
En ciertas situaciones, puede ser más conveniente establecer una Página de Contacto en tu blog, donde puedas incluir todos tus perfiles de redes sociales y añadir un breve mensaje para tus lectores, junto con un formulario de contacto.
A continuación, te explico cómo hacerlo paso a paso:
Paso 1: Regístrate en Formspree.io
Formspree ofrece un servicio gratuito para crear formularios de contacto y recibir mensajes mediante código HTML. El registro es sencillo; solo necesitas una dirección de correo electrónico, preferentemente de Gmail.
Paso 2: Obtén tu ID en Formspree
Para obtener tu ID, crea un formulario de contacto en Formspree. Al hacerlo, recibirás una URL similar a esta: "https://formspree.io/f/TuIDAquí". Lo que necesitas es el código al final de la URL.
Paso 3: Crea tu Página de Contacto
Copia y pega el siguiente código HTML en tu página de Blogger. Asegúrate de reemplazar el ID en el código con el proporcionado por Formspree.
<?xml version="1.0" encoding="UTF-8"?>
<<form action="https://formspree.io/f/AquiVaTuID" class="sy-1.5 i-bold" method="POST">
<!-- Sección -->
<div class="form-section">
<label class="form-label">Nombre completo</label>
<input class="form-control" type="text" name="name" required>
</div>
<!-- Sección -->
<div class="form-section">
<label class="form-label">Correo electrónico</label>
<input class="form-control" type="email" name="email" required>
</div>
<!-- Sección -->
<div class="form-section">
<label class="form-label">Asunto del envio</label>
<input class="form-control" type="text" name="subject" required>
</div>
<!-- Sección -->
<div class="form-section">
<label class="form-label">Contenido del mensaje</label>
<textarea class="form-control form-big" name="Message" required></textarea>
</div>
<!-- Sección -->
<div class="form-section">
<label class="form-label">Política de privacidad</label>
<div class="form-check">
<input type="checkbox" name="RPGD" value="Acepté la política de datos" id="RPGD" required>
<label for="RPGD">
He leído y estoy de acuerdo con la
<a href="#TU_URL_LEGAL">política de datos</a>
</label>
</div>
</div>
<!-- Sección -->
<div class="form-section">
<button class="btn btn-primary" type="submit">
<svg class="i i-paper-plane" viewBox="0 0 24 24">
<path d="m22 2-7 20-4-9-9-4zm0 0L11 13"></path>
</svg> Enviar mensaje
</button>
</div>
</form>>Paso 4: Aplica estilos al formulario
<?xml version="1.0" encoding="UTF-8"?>
</* Estilos generales del formulario */
.form-section {
margin-bottom: 20px;
}
.form-label {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
.form-control {
width: 95%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background: #ebebeb;
}
.form-big {
height: 150px; /* Ajusta la altura del campo de texto grande según tus necesidades */
}
/* Estilos del botón */
.btn {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Estilos del checkbox y enlace */
.form-check {
margin-top: 10px;
display: flex;
align-items: center;
}
/* Estilos del enlace dentro del checkbox */
.form-check a {
text-decoration: none;
color: #007bff;
}
/* Estilos de los íconos (necesitas el archivo de íconos o biblioteca correspondiente) */
.i {
width: 24px;
height: 24px;
vertical-align: middle;
margin-right: 5px;
}
.i-paper-plane path {
fill: #ffffff; /* Cambia el color de relleno del icono a del botón */
}
/* Estilos específicos para el botón de envío */
.btn-primary {
background-color: #f57c00; /* Color original del botón */
transition: background-color 0.3s; /* Agrega una transición suave para el cambio de color */
}
.btn-primary:hover {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
color: #fff; /* Cambia el color del texto al mismo tiempo */
}
/* Estilos para hacer el formulario más responsivo */
@media (max-width: 768px) {
.form-control {
width: 94%; /* En pantallas más pequeñas, el ancho de los campos será del 100% para adaptarse al ancho de la pantalla. Puedes ajustar este valor según tus necesidades. */
}
.btn {
width: 100%; /* El botón también ocupará todo el ancho disponible en pantallas más pequeñas. */
}
}
/* Estilo específico para checkboxes en tu formulario */
.form-check input[type="checkbox"]:checked {
width: 1.25rem;
height: 1.25rem;
background-color: #c5c5c5;
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"%3e%3cpolyline points="20 6 9 17 4 12" stroke="%23000" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /%3e%3c/svg%3e');
background-repeat: no-repeat;
background-position: center;
}
.form-check input[type="checkbox"] {
width: 1.25rem;
height: 1.25rem;
background-color: #c5c5c5;
}
.form-check input:where([type=checkbox],[type=radio]) {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
flex: none;
}>
