{"id":2027,"date":"2024-11-28T13:16:36","date_gmt":"2024-11-28T13:16:36","guid":{"rendered":"https:\/\/blog.databyte.cl\/?p=2027"},"modified":"2025-08-14T16:06:23","modified_gmt":"2025-08-14T16:06:23","slug":"como-crear-y-personalizar-campos-para-formularios-en-tu-sitio-web","status":"publish","type":"post","link":"https:\/\/blog.qubia.databyte.cl\/index.php\/2024\/11\/28\/como-crear-y-personalizar-campos-para-formularios-en-tu-sitio-web\/","title":{"rendered":"C\u00f3mo Crear y Personalizar Campos para Formularios en Qubia"},"content":{"rendered":"\n

Los formularios son herramientas esenciales para la interacci\u00f3n con tus usuarios. Desde recolectar informaci\u00f3n hasta gestionar solicitudes, un formulario bien dise\u00f1ado puede marcar la diferencia. En este tutorial, aprender\u00e1s paso a paso c\u00f3mo crear y personalizar campos en tus formularios para adaptarlos a las necesidades de tu sitio web, manteniendo siempre la flexibilidad y el control sobre su apariencia y funcionalidad.<\/p>\n\n\n\n

\n\n\n\n

Paso 1: Crea o selecciona un men\u00fa de tipo formulario<\/h3>\n\n\n\n

Si a\u00fan no has creado un men\u00fa de tipo formulario, consulta nuestra gu\u00eda para crear men\u00fas<\/a> antes de continuar.<\/p>\n\n\n\n

Si ya tienes un men\u00fa de formulario creado, identif\u00edcalo en la lista de men\u00fas y selecciona su nombre o haz clic en el bot\u00f3n verde con un \u00edcono de barras y un s\u00edmbolo de m\u00e1s, ubicado en la fila correspondiente.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Paso 2: Accede a la pesta\u00f1a de edici\u00f3n del formulario<\/h3>\n\n\n\n

Tras seleccionar el men\u00fa de formulario, ser\u00e1s redirigido a la vista principal. Desde aqu\u00ed, busca la pesta\u00f1a llamada “Campos del formulario”<\/strong> en la parte superior del contenedor principal. Al hacer clic, ingresar\u00e1s a la secci\u00f3n donde podr\u00e1s gestionar los campos asociados al formulario.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Paso 3: Crea un nuevo campo de formulario<\/h3>\n\n\n\n

En la pesta\u00f1a “Campos del formulario<\/strong>“, se mostrar\u00e1n los campos existentes en la parte superior. Para a\u00f1adir un nuevo campo, utiliza el bot\u00f3n superior izquierdo o despl\u00e1zate hacia abajo hasta llegar al formulario de creaci\u00f3n. Completa la informaci\u00f3n requerida para configurar el nuevo campo de acuerdo con tus necesidades.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Paso 4: Configura los detalles de tu campo de formulario<\/h3>\n\n\n\n

Completa los campos requeridos para personalizar tu nuevo elemento. Aqu\u00ed tienes las opciones principales y avanzadas:<\/p>\n\n\n\n

Opciones B\u00e1sicas:<\/strong><\/h4>\n\n\n\n

Tipo:<\/strong> Selecciona el tipo de campo (por ejemplo: texto, selector, fecha, etc.). Si tienes dudas, consulta nuestro FAQ sobre tipos de campos para formularios<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Nombre del campo:<\/strong> Nombre visible asociado al campo. Este puede mostrarse arriba, al lado o no mostrarse, dependiendo de la configuraci\u00f3n seleccionada.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Marcador de posici\u00f3n (Placeholder):<\/strong> (Opcional) Texto dentro del campo que gu\u00eda al usuario sobre qu\u00e9 informaci\u00f3n debe ingresar.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Visible:<\/strong> Define si el campo ser\u00e1 visible o estar\u00e1 oculto temporalmente.<\/p>\n\n\n\n

Obligatorio:<\/strong> Indica si el campo debe ser llenado antes de enviar el formulario.<\/p>\n\n\n\n

Mostrar placeholder:<\/strong> Decide si el texto del marcador de posici\u00f3n ser\u00e1 visible dentro del campo.<\/p>\n\n\n\n

Mostrar nombre del campo:<\/strong> Controla si el nombre del campo aparece en el formulario.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Opciones Avanzadas:<\/h4>\n\n\n\n

Slug:<\/strong> (Opcional) Identificador \u00fanico del campo. Si no lo defines, el sistema generar\u00e1 uno autom\u00e1ticamente.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\n

Tama\u00f1o del campo seg\u00fan dispositivo:<\/strong> Ajusta el tama\u00f1o del campo en funci\u00f3n del dispositivo:<\/p>\n\n\n\n