El formulario de contacto sirve como una herramienta crucial para facilitar la comunicación entre individuos o empresas. Proporciona una forma conveniente y organizada para que los usuarios se comuniquen y expresen sus consultas. También puede tomar aplicaciones, consultas de contacto y encuestas de opinión usándolo.
Puede crear fácilmente una página de contacto en su sitio web utilizando la sección Contacto.
En este artículo hablaremos de:
-
- Agregar sección de contacto a una página
- Gestionar formulario de contacto
- Contenido del formulario de contacto
- Managing Form Fields
- Tipos de campos
- Formulario en línea y formulario emergente
- Administrar diseño
- Formulario de contacto de estilo
- Configuración del formulario de contacto
- Redirigir formulario a otra página
- Exportar datos del formulario
- Notificaciones por correo electrónico
- Datos del formulario enviado
- Ejemplo en vivo
Agregar sección de contacto a una página
- En tu pagina, Haga clic en el azul + icono para agregar una nueva sección a su página.
- Ahora verá el Categorías de sección en el lado izquierdo.
- Elija el Forms (1) categoría y haga clic en el Contacto pestaña (2) donde puede elegir diferentes diseños de Contacto (3) sección.
- Elija cualquier diseño de sección y haga clic en él para agregarlo a su página.
Gestionar formulario de contacto
- Haga clic en Contenido editado Botón (1).
- Tendrás la opción de gestionar Contenido (2) Diseño (3) DE ESTILO RESORT (4) Configuración (5), y Notificaciones por correo electrónico (6).
- Cuando haya terminado, haga clic en Guardar (7) aplicar los cambios al formulario.
Contenido del formulario de contacto
Esta es una parte importante del formulario ya que carga o cambia la imagen, proporcione el título y la descripción aquí para que los usuarios tengan una idea sobre el propósito del formulario en sí. Al elaborar cuidadosamente un título descriptivo y conciso y una descripción convincente e informativa, puede mejorar la comunicación y establecer conexiones sólidas con los visitantes de su sitio web.
Administrar campos de formulario
En Administrar campos de formulario, puede especificar los campos que desea que los visitantes completen en este formulario.
- Haga clic en Agregar nuevo campo (1) botón para agregar más campos a su formulario.
- Editar o Eliminar (2) un campo ya agregado.
- Arrastrar y soltar (3) the fields to change their sequence in the form.
- Configure Call to Action Button Label (4) para el formulario.
El campo de correo electrónico es obligatorio en el formulario y no se puede eliminar.
Al hacer clic en el + Agregar campo Se abrirá una ventana emergente desde donde puede elegir los campos de su formulario.
- Capturar el nombre de tu cliente
- Capture cualquier pequeña información a través del Texto corto .
- Capture cualquier información/mensaje elaborado a través del Texto largo .
- Capturar el o enviar un email. de tu cliente
- capturar cualquier información numérica de tu cliente
- Agregue servicios para elegir en un desplegable .
- Selección única: Agrega una selección de radio para tus servicios.
- Selección múltiple: Agregue un campo de casilla de verificación para selecciones múltiples.
- Agregue un selector de fechas para que tus clientes puedan elegir fecha para cualquier evento.
- Agregue un línea entre los campos del formulario.
- Capturar el de facturación de tu cliente
- Capturar el sitio web de tu cliente
- Capturar el teléfono número de tu cliente
- Agregue un time para que sus clientes puedan especificar la hora del evento ellos mismos.
- Agregue un separador entre los campos del formulario.
- La campo de consentimiento La opción se puede usar para obtener permisos para los boletines, aceptando la privacidad y los términos de uso.
- Toma las reseñas de los clientes usando el estrella escala, escala numéricay el ámbito escala sonriente.
- Al agregar ciertos campos, tiene la opción de elegir el ancho entre Full, Half y One Third
- También puede optar por mostrar los campos uno al lado del otro eligiendo la opción Mitad o Un tercio
Estilo de formulario
- Show Form as Popup – Enable this to open the form in a popup window by clicking the call-to-action button.
- Call-to-action Button Label – Set the Call to Action Button Label para el formulario.
- Headline Popup – Specify the form Titular, Si alguna.
- Subir o Eliminar (1) the form image for the form.
- Agregue un Título (2)y Descripción (3) para el formulario. Antes de añadir la descripción, compruebe este vídeo .
Titular
- Titular – Especificar el Título de la sección (1) para la sección Formulario de Pago.
- Botones e iconos - Aprender más acerca de Botones e iconos (2).
Administrar el diseño
- Haga clic en Contenido editado Botón (1).
- Elija el Diseño (2) pestaña.
- Seleccione la Forma para diseño para su sección (3) y Guardar (4) los cambios.
Al cambiar el diseño, se aplicará el estilo predeterminado del formulario.
Formulario de contacto de estilo
Diseñar un formulario de contacto es un aspecto importante para crear una experiencia visualmente atractiva y fácil de usar.
Tendrá múltiples opciones de estilo para la sección:
- Campos de formulario
- Alineación
- Texto
- Espaciado
- Titular
- Imágenes
- borde de la imagen
- Botón emergente
- Botón de formulario
- Botones de título
- Íconos sociales de titulares
Campos de formulario
Pixpa permite piensa a fully personalizan las apariencia of su formulario campos. Estos estilo opciones aplicar a todos Las opciones de entrada campos in su Contacto Formulario además give piensa mayor control más del cómo su formulario miradas además se siente on su sitio web.
- Forma: Elija la forma de sus campos de entrada (como rectángulo, redondeado, píldora o texto) para que coincida con la estética de su sitio web.
- Llenar: Habilite este interruptor para aplicar un color de relleno de fondo a sus campos de formulario.
- Color de base:Establece el color de fondo de los campos cuando la opción de relleno está habilitada.
- Esquema: Activa o desactiva el borde (contorno) para cada campo.
- Color del contorno: Elija el color del borde del campo cuando el contorno esté habilitado.
- Color del texto del campo: Establezca el color del texto escrito por los usuarios dentro de los campos del formulario.
- Altura: Ajuste la altura de sus campos eligiendo entre: Pequeño, Mediano, Grande o Extra Grande.
- Etiquetas: Elija si las etiquetas de los campos de formulario aparecerán dentro o fuera del campo.
- Color de etiqueta:Define el color de las etiquetas cuando se colocan fuera del campo.
- Color interior de la etiqueta:Establezca el color para las etiquetas colocadas dentro del campo (útil para etiquetas de estilo marcador de posición).
- Espaciado entre campos: Utilice el control deslizante para establecer el espaciado vertical (en píxeles) entre cada campo del formulario.
Alineación
- Administre la alineación del contenido del formulario horizontalmente desde Alineación horizontal (1).
- Administre la alineación del contenido del formulario verticalmente desde Alineamiento vertical (2).
Texto
- Haga clic en el elemento Cambiar estilo de texto (1) botón para visitar el Diseño sección y administre sus tamaños y estilos de fuente.
- Especifica el Título (2) estilo de fuente del formulario.
- Especifica el Descripción (3) estilo de fuente del formulario.
Espaciado
- Especifica el Ancho de imagen (1) de la imagen en forma de Porcentaje.
- Especifica el Espacio entre imagen y texto (3) en porcentaje.
- Especifica el Espacio debajo del título (4) en porcentaje.
Titular
- Alinear horizontalmente El texto del título de la sección. Puede configurarlo a la izquierda, al centro o a la derecha.
- Habilitar/Deshabilitar el Divisor entre el título de la sección y el contenido de la sección.
- Configure Grosor del divisor (en píxeles).
- Especifica el Color del divisor del selector de color.
- Elija un Estilo divisor desde el desplegable.
- Configure Ancho del titular para definir qué tan ancho aparecerá el título de la sección, comenzando desde un mínimo del 50%.
- Especifica el Espacio debajo del título dentro de la sección (en px).
Imágenes
- Recorte de imagen: Elija el Icultivo de mago para los elementos de la lista. Puede configurar las imágenes como Cuadrado, Círculo, Horizontal, Retrato y Original.
- Radio de esquina: Elija tener un radio de esquina común o un radio de esquina diferente para cada lado de los elementos de la lista y establezca un número (en px) para el CRadio interior de las imágenes de elementos de la lista. Conozca más.
- Animación al pasar el cursor: Elija Animar la imagen de la sección al pasar el mouse, habilitando el interruptor. Verifique esta característica en una página en vivo.
- Estilo de animación: Elija una Estilo de animación para la imagen cuando el cursor pasa sobre ellas.
- Máscara de forma: Active este interruptor para aplicar una máscara de forma a las imágenes de la sección Lista de imágenes. Una vez activado, la forma seleccionada se ajustará visualmente a la imagen.
- Seleccionar forma: Elige entre varias formas predefinidas para aplicarlas a tus imágenes. Esto te permite estilizar tu contenido de forma creativa mostrando imágenes con formas únicas, como redondeadas, en forma de diamante, en forma de gota, etc.
Usando el radio de esquina campo, puede crear diferentes formas de imágenes de elementos de lista. En caso de que especifique 500 px aquí, las imágenes se mostrarán en forma de círculo.
- En caso de que haya elegido esquinas divididas, puede establecer un radio de esquina diferente para cada esquina.
borde de la imagen
- Activar/Desactivar borde alrededor de la imagen cambiando el interruptor.
- Elige tener un frontera común en todos los lados de la imagen o puede especificar el fronteras por separado para cada lado.
- Especifica el el ancho de la frontera. Si se establece en 0, el borde no aparecerá. También tiene la opción de establecer el ancho del borde individualmente para cada lado de la imagen.
- Seleccione la Forma para Color del borde del selector de color.
- Seleccione un preferido Estilo de Borde desde el desplegable.
- Determina el ancho de borde para movil dispositivos, alineándolo con el ancho elegido para escritorio.
Botón emergente
Estas opciones de estilo son para el botón emergente, donde se abrirá el formulario de contacto cuando se haga clic en el botón.
- Tamaño del botón – Seleccione el tamaño del botón entre opciones como pequeño, mediano o grande.
- Espacio encima del botón – Ajuste el espaciado vertical sobre el botón (en porcentaje).
- Estilo de botón – Elija el estilo del botón, como predeterminado o personalizado.
- Color del boton - Seleccione el estilo de color del botón. Las opciones son Predeterminado, Invertir o Personalizado.
- Texto del botón – Personaliza el color del texto del botón.
- Fondo del botón – Seleccione el color de fondo para el botón.
Botón de formulario
Estas configuraciones permiten personalizar el botón de envío de formulario para que coincida con el diseño y la disposición de la página.
- Tamaño del botón – Seleccione el tamaño del botón (Pequeño, Mediano o Grande).
- Espacio encima del botón – Ajuste el espaciado vertical sobre el botón (especificado en porcentaje).
- Estilo de botón – Elija el estilo general del botón, como Predeterminado o Personalizado.
- Color del boton - Establezca el estilo de color del botón. Las opciones son Predeterminado, Invertir o Personalizado.
- Texto del botón – Personaliza el color del texto que se muestra en el botón.
- Fondo del botón – Seleccione un color de fondo para el botón.
- Alineación de botones – Elija la alineación del botón (Izquierda, Centro o Derecha).
- Ancho del botón – Ajusta el ancho del botón. Las opciones son: Predeterminado, Grande, Extragrande o Ancho completo.
Botones de título
Estas configuraciones controlan la apariencia y el espaciado de los botones colocados con el título de la sección.
- Tamaño del botón – Seleccione el tamaño general de los botones (Pequeño, Mediano o Grande).
- Espacio entre botones – Ajuste el espacio entre varios botones (medido en vw).
- Espacio encima de los botones – Establezca el espaciado vertical sobre los botones (medido en porcentaje).
- Ancho del botón – Elige el ancho de los botones. Las opciones incluyen: Predeterminado, Grande, Extragrande y Ancho completo.
- Tamaño del enlace de texto – Especifique el tamaño de fuente de los enlaces de texto asociados con los botones (medido en px).
- Tamaño del botón de imagen – Ajusta el tamaño de los botones basados en imágenes (medido en px).
Íconos sociales de titulares
Muestra y personaliza los íconos para compartir en redes sociales en el formulario.
- Tamaño del icono – Ajusta el tamaño de los íconos sociales (medido en px).
- Tipo de icono – Elija el estilo de los íconos, como las opciones Clásico, Sólido o Contorno.
- Color del icono – Selecciona el color de los íconos. Las opciones incluyen Texto del enlace, Personalizado o Color de la marca (color original de la red social).
- Color de fondo del icono – Establezca un color de fondo personalizado para los íconos para mejorar la visibilidad y el estilo.
Configuración del formulario de contacto
- Haga clic en el elemento Contenido editado Botón (1).
- Customize the form settings from Configuración (2) tab and Guardar (3) sus cambios.
Nombre del formulario
- Enter a name to identify the Contact form in Pixpa Studio. This name is not visible to website visitors.
Acción posterior al envío
Como acción posterior al envío, puede optar por Show Success Message (1) o Redirigir a URL (2).
En caso de Show Success Message (1):
- Especifica el Success Message (2) that displays after the user submits the form.
- También puede agregar cualquier script en el HTML de éxito posterior al pago (3) .
- En caso de Rredirigir a URL, you can specify any internal/external page by clicking on the settings (⚙️) icon. Conozca más.
Redirigir formulario a otra página
Redirigir a los usuarios a una página específica después de enviar un formulario puede mejorar la experiencia general del usuario y sirve para varios propósitos, como evitar envíos duplicados, análisis y seguimiento, retener a los usuarios en el sitio web durante un período de tiempo más largo, etc.
La redirección se puede crear fácilmente usando el Acción posterior al envío opción en la pestaña Configuración.
- Puede crear una redirección dentro de su sitio web desde Contenido del sitio web (1) opción. Puede ser una página, galería, blog, galería de comercio electrónico, carpeta, etc. Debe ingresar el nombre del elemento en el campo como se muestra en la captura de pantalla a continuación y obtendrá sugerencias relacionadas con él.
- Usa Enlace externo (2) opción para crear una redirección fuera de su sitio web. Deberá ingresar la URL en el campo donde desea que los usuarios sean redirigidos después del envío del formulario.
Más información sobre cómo utilizar Linkbuilder.
Sync and Export form data
- Push Form Data to Make.com. Más información.
- Push Form Data to Zapier.com. Más información.
- Export form data as a CSV file. Más información.
Notificaciones por correo electrónico
Desde aquí, puede personalizar el asunto del correo electrónico para las notificaciones que recibe como propietario de un sitio web cuando envía un formulario correctamente. Además, puede personalizar el correo electrónico de confirmación que se envía a los usuarios o clientes después de que envían el formulario. Esta función se puede aprovechar para la creación de marca, el marketing y la ejecución eficaz de campañas.
- Correo electrónico al propietario del sitio web: Habilite o deshabilite las notificaciones por correo electrónico para el envío de formularios. Al habilitar esta opción, las notificaciones se enviarán a las direcciones de correo electrónico especificadas.
- Título: Personaliza el asunto del correo electrónico. Usa el {SITIO WEB} Variable para incluir dinámicamente el nombre del sitio web en el asunto. Esto es útil cuando tienes varios sitios web.
- Correo electrónico: Especifique hasta 3 direcciones de correo electrónico para recibir notificaciones cuando se envíe el formulario.
- Especifica el Asunto del correo electrónico de envío del formulario de contacto. También puede incluir {SITIO WEB} variable para incluir el nombre del sitio web.
Correo electrónico al cliente
- Puedes habilitar Correo electrónico al cliente (1) para enviar un correo electrónico sobre el éxito del envío del Formulario.
- Especifica el Asunto (2) del correo.
- Especifique el contenido dentro del correo de Mensaje de éxito (3).
- El correo electrónico al cliente es una función premium disponible solo en Profesional y Avanzado planes. Más información.
- Personalice cuidadosamente el contenido del correo electrónico para garantizar una experiencia de comunicación uniforme y profesional con sus clientes.
Datos del formulario enviado
Los datos del formulario enviado en un formulario de contacto incluyen la información que un usuario ingresa en los campos del formulario cuando lo envía.
- Todos los datos del formulario se almacenan y son accesibles desde el Envíos de Formularios página del estudio. Más información.
- Todos los datos enviados a través del formulario de contacto también se reenviarán al ID de correo electrónico especificado en la configuración del formulario de contacto. Su cuenta de correo electronico se toma como predeterminado.
También verifique: Cambiar la dirección de correo electrónico de la cuenta.
Puede elige la frecuencia con la que quieres recibir notificaciones a través de correo electrónico.
Ejemplo en vivo
Aquí hay un formulario de contacto emergente en vivo:
Ver un sitio de demostración en vivo.
Aquí hay un formulario de contacto en línea en vivo:
Ver un sitio de demostración en vivo.
Para reducir los spammers en el formulario, la seguridad captcha de Google se habilita automáticamente en su formulario.