Crear un formulario estándar

Aquí se recorre todo el formulario, en el orden en que lo presenta el editor.

1. Abre el editor Customize

   Ve a Quote settings. En la página Request a Quote, busca la tarjeta Customize y haz clic en Customize. El editor se abre a pantalla completa.

2. Abre la pestaña Quote form

   El editor tiene cuatro pestañas: Button & widget, Quote form, Quote cart page y Success message. Abre Quote form.

3. Empieza con una plantilla

   Form template muestra la plantilla en la que se basa tu formulario, con una breve descripción de a quién le conviene.

   Haz clic en Change. Se abre un selector con el encabezado Choose a form template y la nota “Select a starting point. The form fields will change only after you confirm.” Hay tres:

   Plantilla	Cómo la describe la aplicación	Etiqueta
   Simple quote form	"Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload."	Fast setup · 7 fields
   Detailed quote form	"For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance."	More details · 14 fields
   B2B customer form	"For wholesale or business buyers who need company, shipping, billing, and payment term information"	B2B

   Elige la que mejor se ajuste al trabajo que cotizas y haz clic en Use this template para confirmar. Cancel deja tu formulario actual como está. Hazlo ahora, antes de empezar a editar campos.

   

   Empieza con una plantilla en lugar de un formulario vacío.

   Precaución

   Elegir otra plantilla reemplaza la lista de campos actual. Las secciones y los campos que ves en pantalla se sustituyen por los de la nueva plantilla, así que cualquier sección que hayas agregado, cualquier campo al que hayas cambiado el nombre y cualquier cosa que hayas quitado desaparece con ellos. Elige primero la plantilla y personaliza después.

4. Decide si el formulario se muestra en las páginas de producto

   En Product page form display (“Show the quote form directly on product pages”), marca Enable product page form display si quieres que las personas rellenen el formulario sin salir del producto.

   Al marcarlo aparece Form position on product page, un menú desplegable con tres opciones:

   Posición	Dónde aparece el formulario
   Below Add to Cart button	En la parte alta de la página, justo debajo de los botones de compra: la opción más visible.
   Below product description	Después del texto de venta, para quien ya lo ha leído.
   Below product information	Al final del bloque de información del producto.

   

   Desactiva este ajuste si prefieres que las personas armen primero un carrito de cotización.

5. Recorre Form builder

   Form builder (“Manage sections, rows, fields, and validation with the visual form builder”) contiene tus preguntas, agrupadas en secciones. Qué secciones hay depende de la plantilla que acabas de elegir:

   Plantilla	Secciones en el generador
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   Tres cosas que puedes hacer con una sección:

   • Activarla o desactivarla. Abre los ajustes de la sección y marca o desmarca Enable. Una sección desactivada no se muestra a la persona, por muchos campos que tenga.
   • Cambiarle el nombre. El mismo panel de ajustes tiene un Label: cámbialo por como lo llamaría quien compra.
   • Moverla. Arrastra la sección por su asa para reordenar el formulario.

   Expande una sección con su flecha para ver los campos que contiene y usa Add element para añadir otro campo a esa sección.

   Los campos de contacto y dirección se explican en Campos de información del cliente; los de empresa, facturación y condiciones de pago, en Crear un formulario B2B.

   Nota

   Los controles del generador deshabilitados con una línea de candado que dice “🔐 This feature is available on …” significan que la función está en un plan superior. No hay nada roto: abre Pricing plans en la aplicación para ver qué incluye el tuyo.

6. Edita un campo

   Haz clic en cualquier campo del generador y se abren sus propios ajustes, con el nombre del campo y “Customize how this field appears on the form.” como encabezado.

   Ajuste	Qué hace
   Label	El texto que lee la persona. Es el ajuste que más se cambia.
   Hide label	Mantiene el campo pero quita la etiqueta que hay encima.
   Placeholder	El texto de ejemplo en gris dentro del cuadro vacío. Úsalo para indicar el formato que quieres: "e.g. 500 units" es mejor que un cuadro en blanco.
   Help text	Una línea bajo el campo, para lo que es demasiado largo para un texto de ejemplo.
   Type	Qué tipo de campo es y qué puede escribir en él la persona.
   Required	El formulario no se envía sin él. Pide el menor número posible de campos obligatorios.
   Options / Add option	Las opciones de una lista desplegable, un grupo de botones de opción o un grupo de casillas.
   Choose default value	Con qué valor empieza el campo cuando se carga el formulario.
   Limit characters	Activa Min characters y Max characters.
   Column width	Cuánto espacio de la fila ocupa el campo, para que dos campos cortos puedan ir uno al lado del otro.
   Custom HTML class	Un nombre de clase para tu propio CSS; consulta Agregar CSS personalizado.
   Remove	Elimina el campo. Solo está en tus propios campos: los campos integrados de contacto y dirección están protegidos y no tienen Remove.

   

   Haz clic en cada elemento y configúralo con más detalle (si hace falta)

   Termina con Save changes en el panel del campo, o con Cancel para descartar la edición.

   Precaución

   Limit characters se valida mientras escribes: Min characters y Max characters deben ser cada uno un número entero igual o mayor que 0, y el mínimo no puede ser mayor que el máximo. Si te equivocas, el editor bloquea el guardado.

7. Pon los campos en el orden que quieras

   Los campos se reordenan arrastrándolos. Toma un campo por el asa de arrastre del extremo izquierdo de su fila y suéltalo donde quieras. Las secciones tienen su propia asa y se mueven del mismo modo.

   El orden importa más de lo que parece: un formulario que pide el código postal de entrega antes que el nombre parece una base de datos, no una conversación.

   

   Arrastra y suelta el elemento para cambiar su posición u orden en el formulario de cotización

8. Agrega tus propias preguntas

   Extra info empieza con lo que tu plantilla ponga ahí, y eso varía según la plantilla. Simple quote form llega con Quantity y Upload files; Detailed quote form con Project detail y Delivery service; B2B customer form con Message.

   Usa Add element para añadir cualquier otra cosa que necesites: plazo de entrega, fecha de entrega, referencia del proyecto.

   Si un grupo de preguntas va junto y no encaja en una sección existente, usa Add section para crear una nueva.

   Peligro

   Un campo no es opcional: el formulario debe contener un elemento cuyo name contenga la palabra email. La aplicación bloquea el guardado y te lo dice: Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. Sin él, nada de lo que cotices llega nunca a la persona.

   

   Haz clic en Add element para añadir más campos personalizados al formulario de cotización

   

9. Da estilo al formulario

   Style muestra el estilo predefinido que usa tu formulario, con un botón Change que abre el resto. Los estilos son Material filled, Classic, Flat, Flat round, Classic round, Line, Line round y Material outlined, cada uno mostrado como una pequeña imagen del campo de entrada, así que elige a ojo y no por el nombre.

   A su lado está Match theme styling if possible. Márcalo y el formulario toma prestados las fuentes y los campos de tu tema, que suele ser el camino más corto para que el formulario no parezca un añadido. La aplicación indica que “Theme styling applies on your storefront and is not shown in this preview”, así que juzga este ajuste en tu tienda online, no aquí.

   Customize text define Font style, Title bar font size y Title bar font weight. Customize form color define los colores individuales: Title bar color, Title bar background, Color, Background color, Border color, Button color, Button background color, Button border y Quote popup primary color.

   

   Más detalles: Adaptar el estilo de tu tema.

10. Revisa el formulario en Preview

    El panel Preview está junto al editor y se actualiza mientras trabajas. Dos controles de su barra de herramientas conviene usarlos antes de guardar:

    • El botón de estado del cliente, que cambia la vista previa entre Guest y Logged-in: ven formularios distintos.
    • El conmutador de escritorio y móvil, porque un formulario largo es otra cosa en un teléfono.

11. Guarda y pruébalo tú mismo

    Al cambiar cualquier cosa aparece la barra de guardado de Shopify con Save y Discard changes. Haz clic en Save. Si algún campo aún tiene un error de validación, el editor lo rechaza y dice “Please resolve validation errors before saving.”; corrige el campo que indica y vuelve a guardar.

    Después ve a tu tienda online y envía una solicitud de prueba real. Comprueba que llega a Quote list con todo lo que esperabas.

    

    El formulario en la tienda online, con Quote form appearance definido como Multiple step.

Nota

La plantilla fija tu punto de partida, no tu límite. Todo lo que trae la plantilla se puede editar o quitar, y todo lo que deja fuera se puede añadir con Add element o Add section. Solo recuerda que cambiar de plantilla más adelante es empezar de nuevo y no una edición: reemplaza la lista de campos que has creado.

Precaución

Envía siempre una solicitud de prueba antes de publicar. Es la única forma de confirmar que los campos, el correo electrónico y el registro de la cotización coinciden.

Dónde están el resto de los ajustes

La pestaña Quote form solo contiene las preguntas. Varias cosas que se suelen buscar aquí están en las otras pestañas del mismo editor:

Lo que quieres	Pestaña	Lo que encontrarás
El formulario en una página o por pasos	Quote cart page	Quote form appearance ("Controls how the quote form looks on the quote cart page"), definido como Multiple step o Single page.
Qué muestran las filas de producto	Quote cart page	Product list columns ("The product details shown as columns in the customer's quote cart"); consulta Grupo de productos cotizados.
Permitir que las personas agrupen productos	Quote cart page	Enable Quote Sections ("Lets customers group the products in their quote cart into named sections"); consulta Grupo de productos cotizados.
El texto y la ubicación del botón	Button & widget	Texto del botón, acción al hacer clic, posición del botón y quién puede verlo.
Qué ocurre tras enviar	Success message	El texto de agradecimiento y Redirect to custom URL.

Nota

El propio editor te avisa de esto si intentas cambiar de pestaña a mitad de una edición: “Save your changes before switching tabs to avoid losing them.”

Siguientes pasos

• Campos de información del cliente: afina lo que pides
• Grupo de productos cotizados: columnas de producto y secciones de cotización en la página del carrito de cotización
• Agregar reCAPTCHA: protege el formulario del spam
• Crear un formulario B2B: la plantilla para compradores empresariales