Secciones de Formularios de contacto en el editor de bloques de Waclis

En este tutorial aprenderás a insertar, editar y personalizar formularios de contacto utilizando los bloques prearmados del editor de bloques de Waclis.

Los formularios de contacto se utilizan para:

• recibir consultas desde el sitio web

• permitir que clientes potenciales envíen mensajes

• centralizar pedidos de información

• generar leads comerciales

Bloques de formularios disponibles

Actualmente, Waclis incluye los siguientes bloques de formularios:

• Formulario 007

• Formulario 006

• Formulario 005

• Formulario 004

• Formulario 003

• Formulario 002

Cada bloque puede variar en diseño (layout, columnas, estilos visuales), pero todos funcionan bajo el mismo concepto y se editan de la misma manera.

Cómo insertar un formulario de contacto

Acceso al editor de bloques

Ruta:

Configuraciones > Editar sitio > Menues

Luego, haz clic en el icono de la paleta de pintor para abrir el editor de bloques.

Insertar el bloque

1. Haz clic en el icono Sections.

2. Selecciona Sections.

3. Busca la categoría Formularios de contacto.

4. Despliega la categoría si está colapsada.

5. Selecciona el bloque de formulario deseado.

6. Haz clic en el botón “+”.

7. El formulario se insertará en la vista del sitio.

Cómo editar un formulario de contacto

Al igual que el resto de las categorías, existen tres formas de edición.

Forma 1: Edición directa desde la vista (visual)

Es la forma más simple y habitual.

1. Haz clic directamente sobre:

   • campos del formulario (Nombre, Email, Mensaje, etc.)

   • títulos o textos descriptivos

   • botón de envío

2. Se abre el panel Properties.

3. Desde allí puedes:

   • cambiar textos visibles

   • modificar placeholders

   • ajustar alineaciones

   • editar etiquetas (labels)

   • definir enlaces o acciones del botón

Forma 2: Edición desde el Navigator

Ideal cuando el formulario tiene muchos campos.

1. Haz clic en el icono Navigator.

2. Visualiza la estructura del formulario:

   • Section

   • Container

   • Form

   • Inputs

   • Textarea

   • Button

3. Selecciona el campo específico que deseas modificar.

4. Se abre automáticamente el panel Properties para ese elemento.

Esto evita modificar todos los campos por error cuando son similares.

Forma 3: Edición desde el Code editor (HTML)

Pensada para usuarios avanzados.

1. Abre el Code editor desde la parte inferior del editor.

2. Se mostrará el HTML del formulario.

3. Desde aquí puedes:

   • agregar o eliminar campos

   • cambiar el orden de los inputs

   • modificar atributos HTML

   • ajustar clases para estilos personalizados

Qué se puede editar en un formulario

• títulos y textos introductorios

• campos del formulario

• placeholders y labels

• botón de envío

• alineaciones

• clases e identificadores (Id / Class)

• estructura del formulario (con Code editor)

Funcionamiento del formulario

Los formularios de contacto:

• envían la información al sistema configurado en el sitio

• permiten recibir consultas desde el frontend

• funcionan como formularios estáticos de contacto

Limitaciones importantes

Los formularios de bloques:

• no son formularios dinámicos avanzados

• no aplican lógica condicional

• no validan flujos complejos

• no reemplazan integraciones externas específicas

Para flujos más avanzados, se requieren otras herramientas o desarrollos.

Buenas prácticas al usar formularios

• Usa solo los campos necesarios.

• Evita formularios demasiado largos.

• Deja claro qué va a pasar con la información enviada.

• Coloca el formulario en una sección visible y accesible.

• Acompaña el formulario con un texto claro de contexto.

Diferencia con otros tipos de formularios

Los formularios del editor de bloques:

• son visuales

• rápidos de implementar

• ideales para contacto general

No están pensados para:

• procesos de compra

• registro de usuarios

• flujos automáticos complejos