Guía Marte CMS
¿Cómo añadir un Formulario?
Con Marte CMS, puedes agregar fácilmente dos tipos de formularios a tu sitio web: el formulario Contact, ideal para mensajes generales, y el formulario Form, que ofrece opciones más personalizables para recopilar datos específicos. En esta guía te explicaremos cómo crear y personalizar un formulario de tipo Form para que puedas adaptarlo a las necesidades de tu página.
Paso 1: Crear formulario
- Accede a la lista de páginas de tu sitio web desde la opción "Pages" en el menú lateral.
- Selecciona la página en la que quieras añadir el formulario.
- Accederás al editor de la página. **Haz clic en el círculo azul con el símbolo de "+" **que se encuentra en el apartado “Sections”.
- Busca en la lista el bloque Form y haz clic en él.
- Aparecerá tu formulario “Form -Title“ en “Sections”. Sigue el ejemplo para cambiarlo de posición a tu gusto.
Paso 2: Editar formulario
- Haz clic en en el formulario en la vista de la página. También puedes seleccionarlo desde la lista “Sections“ del editor de la página.
- Para cambiar el título y la descripción, escribe en las cajas de texto de “Heading“ y “Description“.
- En el apartado “Email (required)” escribe la dirección de correo electrónico donde quieres que se envíe el formulario.
- Para cambiar el texto del botón para enviar, escribe en "Text Button".
- Además puedes redirigir al usuario a la dirección que tu quieras añadiendo una URL en "Callback URL".
- Haz clic en el círculo azul con el símbolo de "+" que se encuentra en el apartado “Inputs”.
- Se creará un nuevo input “No label (Short Text)“ en la lista del apartado Inptus. Para acceder a sus opciones, haz clic en él.
- En el apartado "Field Type" del editor de input, selecciona el tipo de dato que aceptará el input. Esto permite que la web valide automáticamente si el dato ingresado es correcto; por ejemplo, si en un campo diseñado para una dirección de correo se ingresan solo números, el sistema notificará al usuario para que lo corrija si has seleccionado el tipo Email.
- En el apartado “Label“ escribe el texto que aparecerá encima del input. Este texto es muy importante porque ayuda al usuario a entender que tiene que introducir en el input. En el ejemplo se a escrito “Correo electrónico“:
- En el apartado **Placeholder **puedes añadir un texto de ayuda, que sirve para mostrar un ejemplo dentro del campo y guiar al usuario sobre qué información debe ingresar. Siguiendo el ejemplo, se añade “correodeejemplo123@ejemplo.com“.
- Activa el switch en el apartado “Required“ para asegurar que el usuario complete el input antes de enviar el formulario. Por defecto estará desactivado. En la imagen de ejemplo está activo:
- Puedes elegir si el input ocupará la mitad o todo el espacio disponible en la fila en el apartado “Full Width“.
- Puedes añadir los inputs que necesites repitiendo este proceso.
- Recuerda guardar los cambios pinchando en el botón azul "Save".
- Recuerda que puedes estilizar el formulario (añadirle color, imagen de fondo) pinchando en “🖌️Block General Styles: Form“ en las opciones generales del formulario.