Biblioteca de formularios: formularios HTML personalizados

Este es un concepto para usuarios avanzados.

Con un formulario HTML, tú proporcionas el HTML completo para el formulario: las etiquetas ‹form› ‹/form› y todo lo demás. (También puedes incluir contenido no editable fuera de las etiquetas ‹form› ‹/form›).

De forma predeterminada, las etiquetas ‹input› y ‹select› se guardarán con los nombres de sus ID’s, aunque puedes anularlas y asignarlas a los campos de recopilación de datos si lo prefieres al editar los campos de la página siguiente.

Las opciones para casillas de verificación, botones de opción, menús desplegables y cuadros de lista deben incluirse en su HTML. Sin embargo, puedes sustituir las opciones en los cuadros de lista y desplegables de ‹seleccionar› asignándoles un "Choice set" al editar los campos de la página siguiente. Ten en cuenta que actualmente todas las etiquetas ‹option› en tu HTML deben tener etiquetas ‹/option› de cierre.

Los datos recopilados en tu formulario HTML personalizado se guardarán en la base de datos de ion al enviar el formulario.

También puedes exportar los datos recopilados en un formulario HTML personalizado utilizando cualquier formato de exportación compatible con la plataforma ion.

¡Las reglas avanzadas de nivel de formulario también estarán disponibles para aprovechar!

Debes proporcionar tu propio botón para enviar el formulario.

También puedes incluir bloques ‹style› y ‹script›, por lo general delante de la etiqueta ‹form›, para influir en la apariencia y el comportamiento del formulario. (Ten cuidado de evitar conflictos de CSS y Javascript con las plantillas y temas de tu página maestra).

Custom Form

Comienza con estos pasos:

1. Navega a la librería 'Forms' y selecciona la categoría a la que te gustaría agregar tu formulario personalizado (o crear una nueva categoría). Agrega un nuevo formulario seleccionando el botón verde 'New form'.

 

rtaImage (17)

 

2. Ponle una "label" única, una "description" opcional y selecciona "HTML" en el menú desplegable "Form type". Coloca tu código de formulario (asegúrate de incluir las etiquetas ‹form› ‹/form›) dentro del campo 'Custom HTML'.

 

rtaImage (18)

 

NOTA: si tienes un script y estás usando el nombre del formulario como referencia, no funcionará porque la plataforma elimina el atributo de nombre del formulario. En su lugar, puedes utilizar el ID del formulario como referencia.

 

3. Asigna una clase personalizada (por defecto, la clase es: pf_field_row_bad) para manejar cualquier etiqueta ‹input› con errores (es decir, usada para validación).

 

rtaImage (19)

 

4. Haz clic en Save y serás llevado a la página Form Setting Page. Puedes obtener una vista previa del formulario haciendo clic en el botón "Preview" dentro del menú desplegable Form Actions. Para editar el formulario personalizado, haz clic en "Edit form" dentro del menú desplegable.

 

rtaImage (20)

 

NOTA: Si no ves los campos de tu formulario HTML, debes verificar tus campos de entrada. Estos deben tener un nombre o un atributo de identificación. Si especificas tanto el nombre del atributo como el ID, el ID aparecerá en "Field Name".

Es una buena práctica hacer que tu ID o nombre sea descriptivo para que se asigne fácilmente a tus campos.

Asignación de campos de formulario HTML personalizados

Mapear tus campos HTML a tus campos ion te permitirá dirigir los datos recopilados de su formulario HTML personalizado al campo ion al que desea que se exporten los datos. Esto luego se incluirá en tus datos exportados.

Deberás mapear tu formulario HTML personalizado para asegurarte de que los datos recopilados lleguen al lugar correcto dentro de tu base de datos de ion. Si tienes un campo del que no necesita realizar un seguimiento, está bien no asignarlo al campo de ion.

Sigue estos pasos para asignar su formulario a un campo de datos de ion:

1. Haz clic en el enlace *save as is * asociado con el campo que le gustaría mapear.

 

rtaImage (21)

 

2. Dentro de los campos del formulario de edición, selecciona la opción "Choose category", luego elige el campo de datos que deseas que mapee tu nombre de campo.

 

rtaImage (22)

 

3. Si estás mapeando un campo desplegable (‹select›), tienes la opción de usar lo que está en tu formulario HTML personalizado o un conjunto de opciones de ion. ¡Haz clic en "save" y ya está!

 

rtaImage (23)-2

Directrices adicionales:

Si tienes ‹H1›, ‹DIV› y otros elementos HTML dentro del código de formulario HTML personalizado, se recomienda que les agregues clases. Esto evitará la invalidación de estilos de elementos dentro del tema del marco


Si tiene alguna pregunta, póngase en contacto con nosotros en help@rockcontent.com. 😀