Crear tu formulario

El creador es donde decides qué pregunta un formulario de solicitud. Añades campos, los agrupas en filas, divides el formulario en páginas y configuras cada campo. La vista previa del centro muestra el formulario tal como lo ven quienes compran en tu tienda.

Nota

Para abrir el creador, ve a Forms en Sami B2B Onboarding y haz clic en Edit junto a un formulario, o haz clic en el nombre del formulario. Solo el personal con el rol de administrador puede editar formularios.

El creador de un vistazo

Zona	Dónde	Para qué sirve
Section rail	Extremo izquierdo	Cambia entre Elements, Appearance, After submit, Email e Integrations. Collapse la reduce a iconos.
Panel Elements	Izquierda	El esquema del formulario: Header arriba, Content, cada página con sus campos y filas, Add page y Footer abajo.
Vista previa	Centro	El formulario tal como lo ve quien compra. Haz clic en un campo, en el encabezado de una página, en el encabezado del formulario o en los botones para seleccionarlo.
Panel de ajustes	Derecha	Se abre al seleccionar algo y muestra sus ajustes. Haz clic en × (Close) para cerrarlo.
Barra de herramientas	Sobre la vista previa	El cuadro Form name, la insignia Active o Draft, … (More actions), Language, los botones de vista previa de escritorio y móvil, el botón del inspector y Preview.

El panel Elements enumera todas las páginas, filas y campos en el orden en que los encuentra quien compra.

Las demás secciones de la columna tienen sus propias páginas:

Sección	Qué se configura ahí	Más información
Appearance	Disposición, ancho, fuente, estilo de campos y colores.	Diseñar el formulario
After submit	El mensaje de agradecimiento o una página a la que enviar a quien compra.	Después de que quien compra envíe el formulario
Email	Quién recibe aviso de este formulario y la versión propia de este formulario de cada correo.	Editar las plantillas de correo y Elegir quién recibe las notificaciones
Integrations	Adónde van las respuestas en Shopify, además de Klaviyo, webhooks, autocompletado de direcciones y captcha.	Asignar respuestas a Shopify

Añadir un campo

1. Abre la lista de campos

   Usa la opción que te quede más a mano:

   • En el panel Elements, haz clic en + (Add field) junto al nombre de la página o en Add field al final de la página. Dentro de una fila, haz clic en Add element para añadir el campo a esa fila.
   • En la vista previa, haz clic en Add a field al final de la página.
   • En la vista previa, apunta al borde de un campo y haz clic en el + que aparece. Su descripción emergente dice Add field above, Add field below, Add field to the left o Add field to the right. Izquierda y derecha colocan el campo nuevo junto a este en una fila.

2. Busca el campo

   Desplázate por la lista o escribe en Search fields para acotarla.

   

   Los campos se agrupan por tipo, y Add all en un bloque de dirección añade una dirección completa con un clic.

3. Añádelo

   Haz clic en el campo. Se añade a la página y queda seleccionado, y sus ajustes se abren a la derecha. Ponle una etiqueta y configúralo (consulta Ajustes de los campos).

Precaución

Todos los formularios conservan un campo Email y un campo guardado como el nombre de la empresa. El campo Email no se puede quitar ni ocultar, y Save se rechaza con Map a field to Company · Name. si ningún campo está guardado como el nombre de la empresa.

Campos que puedes añadir

Grupo	Campo	Lo que obtiene quien compra
Basic fields	Short text	Un cuadro de texto de una línea.
	Long text	Un cuadro de texto para varias líneas.
	Number	Un cuadro que solo admite números.
	Email	Un cuadro que comprueba que la respuesta parece una dirección de correo electrónico.
	Phone	Un cuadro de número de teléfono, con bandera del país, prefijo y comprobación del número opcionales.
	Country	Una lista de países.
	State / province	Una lista de los estados o provincias del país elegido en el campo Country que lo precede en la página. Se muestra cuando la persona elige un país que tiene estados y es un cuadro de texto simple cuando ningún campo Country lo precede.
	Dropdown	Una lista para elegir una opción, o varias con Allow multiple choices.
	Checkbox	Una única casilla, como “I agree to the terms”. Cuando es obligatoria, la persona debe marcarla.
	Checkboxes	Una lista de opciones de las que la persona puede marcar cualquier cantidad.
	Radio buttons	Una lista para elegir una opción, con una opción Other opcional que la persona escribe.
	Date and time	Un selector de fecha, una hora o ambos.
	File upload	Un cuadro de subida. Por defecto admite archivos PDF, JPG, JPEG y PNG de hasta 10 MB.
Company fields	Company name	Un cuadro de texto guardado como el nombre de la empresa.
	Tax ID	Un cuadro de texto para el número fiscal o de IVA de la empresa. Las comprobaciones de identificación fiscal de la aplicación leen este campo.
	Website	Un cuadro de texto para el sitio web de la empresa.
Document fields	Business license, Tax certificate, Tax registration, Reseller certificate	Un cuadro de subida. El archivo se conserva con la solicitud como ese tipo de documento. Consulta Documentos.
Static text	Heading	Un título con un pie de texto opcional debajo.
	Paragraph	Texto con formato, como instrucciones.
	HTML	Tu propio código HTML.
	Divider	Una línea horizontal.
Address blocks	Shipping address	Diez campos en una fila: Recipient / department, First name, Last name, Phone, Address line 1, Address line 2, City, Country, State / province y ZIP / postal code. Haz clic en Add all.
	Billing address	Una casilla Same as shipping address y luego diez campos de facturación (Department / attention, Billing first name, etc.) en una fila que se oculta mientras la casilla está marcada. Haz clic en Add all.
Layout	Row	Una fila vacía para colocar campos. Consulta Agrupar campos en filas.

Para añadir un solo campo de dirección en lugar de un bloque completo, haz clic en Show the individual address fields en Address blocks. Los campos que añade un bloque de dirección no se guardan en Shopify hasta que los asignas. Consulta Asignar respuestas a Shopify.

Ajustes de los campos

Haz clic en un campo en la vista previa o en el panel Elements. Sus ajustes se abren a la derecha en secciones. Solo ves las secciones que corresponden a ese tipo de campo.

Sección	Ajustes
Content	Label, la pregunta que lee quien compra. Placeholder, el texto tenue dentro de un cuadro vacío. Help text, que se muestra bajo el campo. Default, una respuesta rellenada cuando se abre el formulario (para una única Checkbox: Ticked by default).
Options	Para Dropdown, Checkboxes y Radio buttons. Haz clic en Add option o Change para editar las opciones: escribe la Label de cada opción, arrastra para reordenar, Add another option o Bulk add una opción por línea. Las Customer tags se añaden al cliente de Shopify cuando se aprueba a quien eligió esa opción (hasta 40 caracteres cada una). Desactiva Use the label as the value para guardar algo distinto de lo que lee quien compra. Un Dropdown también tiene Allow multiple choices. Los Radio buttons también tienen Other option, Other label y Other placeholder.
Upload	Para File upload y los campos de documento. Accepted: Only certain file types (y luego enuméralos en File types) o Any file type. Max size: de 1 a 20 MB. Allow more than one file.
Phone number	Show country flag and dial code. Con él activado: Check the number is valid y Default country (From the buyer’s browser salvo que elijas uno).
Date and time	Asks for: Date, Time o Date and time. Date format, Time format, Other language para el selector de fecha y Limit the range con Earliest y Latest.
Validation	Required. Con él activado, Error message, que se muestra cuando el campo se deja vacío; escribe {{ label }} para incluir la etiqueta del campo. Limit characters con Min characters y Max characters, para Short text, Long text, Email, Phone y Tax ID. Deja un límite en blanco para no tener límite.
Layout	Icon, dibujado al principio del cuadro (no para Checkbox, Checkboxes, Radio buttons ni subidas). Hide label, con Keep the label’s space y Still show the required mark. Column width, de 1 a 12. Number of options per line, de 1 a 5, para Checkboxes y Radio buttons.
Visibility	Conditional display: muestra, oculta, exige o desactiva el campo según respuestas anteriores. Consulta Mostrar, exigir o desactivar campos con reglas.
Custom CSS	Custom CSS class, un nombre de clase al que puedes dar estilo con el CSS de tu propio tema. Solo se conservan los nombres de clase simples.

Para Dropdown, Country y State / province, el texto de ejemplo es la primera línea de la lista, Select… por defecto. Si lo vacías, vuelve Select….

El texto estático tiene menos ajustes. Un Heading tiene su texto en Label, además de Caption y Heading tag (Heading 1 a Heading 6). Un Paragraph tiene Text y HTML tiene Markup. Su Label es solo el nombre que ves en el panel Elements. Todo el texto estático también tiene Column width, Visibility y Custom CSS.

Los ajustes de un campo se agrupan en secciones, desde lo que lee quien compra hasta cuándo se muestra el campo.

Organizar los campos

Mover un campo

• En el panel Elements: arrastra un campo por su asa. Suéltalo sobre otro campo para colocarlo encima o debajo, sobre el nombre de una página para moverlo al final de esa página o sobre el nombre de una fila para ponerlo en esa fila.
• En la vista previa: haz clic en un campo y arrástralo por el asa situada a la izquierda de su barra de herramientas (Drag to move this field). Suéltalo sobre el borde superior o inferior de otro campo para colocarlo encima o debajo. Suéltalo sobre el borde izquierdo o derecho para poner los dos uno al lado del otro en una fila.

Configurar el ancho de las columnas

Los anchos se cuentan sobre 12 columnas, y todos los campos nuevos empiezan en 12, el ancho completo. Los campos que se siguen comparten línea cuando sus anchos caben, así que dos campos de 6 quedan uno al lado del otro y tres de 4 forman tres columnas.

• Arrastra Layout › Column width en los ajustes del campo, o
• Haz clic en Change width en la barra de herramientas del campo seleccionado en la vista previa. Recorre un tercio, la mitad y el ancho completo.

Cuando el formulario mide menos de 480 píxeles, por ejemplo en un teléfono, cada campo ocupa toda la línea.

Agrupar campos en filas

Una fila mantiene los campos juntos y puede abrirlos con una cabecera: una etiqueta y una descripción sobre los campos. Puedes mostrar, ocultar o mover una fila entera de una vez.

Para crear una fila, haz una de estas cosas:

• Abre la lista de campos y haz clic en Row en Layout. Aparece una fila vacía en el panel Elements. Haz clic en Add element dentro de ella para añadir campos.
• Abre la lista de campos y haz clic en Select fields (se muestra cuando la página tiene dos o más campos fuera de filas). Marca los campos en el panel Elements y haz clic en Group into row.
• Añade un campo a la izquierda o a la derecha de otro, o suelta uno junto a otro en la vista previa.

Haz clic en el nombre de la fila en el panel Elements para abrir sus ajustes:

Ajuste	Qué hace
Label	El título de la fila. Quien compra lo ve sobre los campos de la fila.
Hide the heading block	Oculta la etiqueta y la descripción para quien compra. Se conservan y vuelven cuando lo desactivas.
Description	Texto que se muestra bajo la etiqueta.
Icon	Un icono junto a la etiqueta.
Conditional display	Muestra u oculta toda la fila según respuestas anteriores. Consulta Mostrar, exigir o desactivar campos con reglas.
Ungroup row	Deshace la fila. Sus campos permanecen en la página.

En el panel Elements, el icono del ojo de la fila oculta todos sus campos y Duplicate row la copia. Para sacar un campo de una fila, selecciona el campo y haz clic en Remove from row.

El formulario Wholesale application usa filas con su bloque de encabezado oculto, porque cada sección ya empieza con un campo Heading.

Usar varias páginas

1. Añade una página

   Haz clic en Add page en la parte inferior del panel Elements. Se añade una página llamada Untitled page 2 y se abren sus ajustes. Escribe un nuevo Page name y pulsa Enter.

2. Convierte las páginas en pasos

   Haz clic en Content en el panel Elements y activa Show step progress bar. Elige Step labels: Name and number, Name only o Number only.

   Quien compra ve ahora una página cada vez, con una barra de pasos arriba. Cada página termina con un botón Continue que comprueba las respuestas de la página antes de avanzar, y la última página termina con el botón de envío. Sin la barra de pasos, todas las páginas se muestran una tras otra en un único formulario.

3. Elige si quien compra puede volver atrás

   Todos los pasos después del primero tienen un botón Back, porque Let buyers go back a step está activado de inicio. Para cambiarlo, haz clic en Footer en el panel Elements. Desactiva Let buyers go back a step para quitar el botón o cambia Back label. Estos ajustes solo se muestran mientras la barra de pasos está activada y el formulario tiene dos o más páginas.

Haz clic en el nombre de una página en el panel Elements para ver sus ajustes:

Ajuste	Qué hace
Page name	El nombre de la página en el creador y en la barra de pasos.
Hide the heading block	Hace que la página empiece en su primer campo. El encabezado y la descripción se conservan para más adelante.
Heading y Description	Se muestran en la parte superior de la página.
Continue button label	El texto del botón Continue de la página. No se muestra en la última página.
Icon	Sustituye el número de este paso en la barra de pasos. Solo se muestra con la barra de pasos activada.
Header and footer	Use custom header y Use custom footer dan a este paso su propio texto de encabezado y su propia nota. Mientras quien compra puede volver atrás, el pie personalizado también tiene Show Back button on this step. Solo se muestra con la barra de pasos activada.
Visibility	Muestra u oculta toda la página según respuestas de páginas anteriores.
Delete page	Elimina la página y sus campos. Un formulario necesita al menos una página, y la página que contiene el campo Email no se puede eliminar hasta que muevas ese campo.

Encabezado y pie

Haz clic en Header en la parte superior del panel Elements o en el encabezado de la vista previa:

• Show store logo y luego Upload image: un archivo .jpg, .png o .svg de hasta 1 MB, de unos 200×60 píxeles.
• Heading y Subheading en la parte superior del formulario.
• Show this block para mostrar u ocultar todo el encabezado.

Haz clic en Footer en la parte inferior del panel Elements o en los botones de la vista previa:

• Submit label, el texto del botón de envío.
• Reset button y Reset label, un botón que vacía el formulario.
• Full-width buttons, o Alignment: Left, Center o Right.
• Note, texto que se muestra con los botones, y Put the note above the buttons.

Ocultar, copiar o quitar un campo

• Hide this block (el icono del ojo en el panel Elements o en la barra de herramientas del campo) retira el campo del formulario para quien compra pero lo conserva, con sus ajustes, en el creador. El campo desaparece de la vista previa y aparece atenuado en el panel Elements. Haz clic en su ojo allí para recuperarlo.
• Duplicate field coloca una copia justo después del campo y la selecciona.
• Remove field (en la barra de herramientas o en la parte inferior del panel de ajustes) elimina el campo al guardar.

Ver la vista previa del formulario

• Desktop preview y Mobile preview cambian el ancho de la vista previa.
• El botón del inspector (el icono de la diana) cambia entre editar y probar. El inspector está activado cuando se abre el creador y el botón dice Deactivate inspector: al hacer clic se seleccionan elementos para editarlos y las reglas no se ejecutan, así que un campo que una regla ocultaría se sigue mostrando. Haz clic para desactivar el inspector y rellenar la vista previa como quien compra: las reglas se ejecutan y Continue y el botón de envío comprueban tus respuestas. No se envía nada. Haz clic de nuevo (Activate inspector) para volver a editar. El atajo es ⌘ Shift I en Mac o Ctrl Shift I en Windows.
• Language muestra el formulario en un idioma al que lo hayas traducido. Las palabras sin traducir se muestran en inglés. Para traducir, elige Translate this form en … (More actions), que abre Traducir.
• Preview (el icono del ojo) abre la página del formulario en tu tienda en una pestaña nueva. Funciona cuando el formulario está guardado y publicado.

Guardar los cambios

Haz clic en Save en la barra de guardado. Aparece un mensaje Form saved y, si el formulario está Active, quienes compran obtienen la nueva versión de inmediato. Discard descarta todo lo hecho desde el último guardado.

Si hay algo que corregir, el guardado se rechaza y un aviso en la parte superior de la vista previa enumera cada problema, como Enter a form name o dos campos guardados en el mismo campo de Shopify. Cuando una línea termina con un botón de flecha, haz clic en él para ir directamente al campo o ajuste.

Siguientes pasos

• Mostrar, exigir o desactivar campos con reglas: haz una pregunta solo cuando una respuesta anterior lo requiera.
• Asignar respuestas a Shopify: elige dónde se guarda cada respuesta al aprobar.
• Diseñar el formulario: haz que el formulario combine con el aspecto de tu tienda.
• Crear y publicar un formulario: publica el formulario y compruébalo en tu tienda.