Formulario de Contacto en Blogger y Página de Contacto

Si quieres tener un blog Profesiones debes tener una página o formulario de contacto. En este artículo te mostrare como hacerlo 100% personalizado y lo mejor de todo es que no necesitas ser un experto en programación porque todos los códigos necesarios podrás copiarlos con solo un clic.

   

¿Qué es un Formulario de Contacto?

Es una herramientas que permite el contacto directo entre los lectores y el dueño de la web. Se usa generalmente con fines de ventas para conseguir el correo y los nombres de los posibles clientes.


Anadir Gadget Formulario de contacto en Blogger

La forma más fácil de conseguir un formulario de contacto en Blogger es añadiendo uno de los gadgets que la plataforma trae de forma predeterminada, el proceso para añadirlo es el siguiente:


  • Paso 1:  Busca en el panel de control de Blogger la opción Diseño.
  • Paso 2: En la barra lateral haz clic en Añadir un Gadget.
  • Paso 3: Selecciona el que dice Formulario de Contacto.
  • Paso 4: Guarda los cambios.




Crear Página con Formulario de Contacto en Blogger

En algunos casos es preferible crear una Página de Contacto en la cual podamos añadir todos nuestros perfiles de redes sociales y en ella incluir un pequeño mensaje para nuestros lectores acompañado de un formulario de contacto.


Ahora te voy a mostrar cómo hacerlo Paso a Paso:


Paso 1: Registrarte en formspree.io

Formspree nos ofrece un servicio gratuito para crear formularios de contacto y recibir mensaje simplemente utilizando codigo HTML. El registro es muy simple, solo necesitas un correo electrónico preferiblemente Gmal.

Paso 2: Consigue tu ID en Formspree

Para ello solo debes crear un formulario de contado en Formspree, al hacerlo te darán una URL similar a esta: "https://formspree.io/f/AquiVaTuID" a ti lo que te interesa es el código del final.

Paso 3: Crea tu pagina de Contacto

Copia y pega el siguiente código HTML en tu pagina de Blogger. Allí debes reemplazar el ID por el que te dieron en Formspree.

    <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>

    También debes agregar la URL de la pagina de políticas de tu blog en el apartado "#TU_URL_LEGAL"

    Paso 4: Dale estilos al Formulario

    Ahora tienes que copiar el sguiente codigo CSS y pegarlo justo arriba de la etiqueta ]]></b:skin> la cual encontraras en el codigo HTML de tu blog

    /* 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;
    }


    VIDEO TUTORAL: Como Poner Formulario de Contacto en Blogger


    ASÍ SE VERA LA PÁGINA DE CONTACTO SI HACES TODO BIEN

    VER DEMOSTRACIÓN


    ¿A qué correo llegan los mensajes del formulario de contacto?

    Los mensajes llegan al correo con el cual creaste el formulario de contacto en Formspree

    ¿Qué hago si el formulario de contacto deja de funcionar?

    Tendrás que esperar a que Formspree solucione los problema o en el peor de los casos cambiarte a otra plataforma.