Cuál es la función de el pequeño cuadrado que hay en las imágenes?

  • Profile Image
    soycarlobot
    Fecha de consulta 15 de agosto de 2023, 18:32

    En las imágenes que aparecen de los productos, hay un pequeño cuadradito arriba a la izquierda que si uno lo clica, queda tildado o seleccionado, pero para qué?

    Cuál es la función de el pequeño cuadrado que hay en las imágenes? Image 1 Screenshot 20

    No encuentro la función que cumple o su utilidad, pero lo más importante es que no sabemos cómo quitarlo.

    Me dicen que sólo complica en la navegación y no encuentro la forma de quitarlo de cada imagen que mostramos.

    Espero nos puedan ayudar. Gracias

  • Profile Image
    Gilbert Enterprise Support
    Fecha de respuesta 16 de agosto de 2023, 2:07

    Hi Carlos,

    Thanks for using Jotform. Unfortunately, our Spanish Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Spanish, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    Now, let me help you with your question. The small square you're seeing on the top-left part of the product image is the checkbox to select that product item. When you view your live form on a desktop, those small squares/checkboxes are placed on the left of the product item. They indicate if a product item has been selected or not.

    Cuál es la función de el pequeño cuadrado que hay en las imágenes? Image 1 Screenshot 30

    Since the mobile view is different since the screen is much narrower than the desktop view, the form's layout is changed as well to fit all the elements despite the different screen dimensions. This is why the checkbox for the product item is placed on the top-left part of the product image. Here's a screencast as well demonstrating this:

    Cuál es la función de el pequeño cuadrado que hay en las imágenes? Image 2 Screenshot 41

    Let us know if you have any other questions.


  • Profile Image
    soycarlobot
    Fecha de respuesta 16 de agosto de 2023, 8:16

    Hola! Gracias por responder!

    Entiendo que sirve para seleccionar un producto de la lista de imágenes presentadas. Por ejemplo en la categoría camisas, podría elegir si la blanca o la rayada. Pero en mi caso, todas las imágenes son exclusivamente para mostrar el mismo producto desde varios ángulos y distancias, por lo cual ese selector confunde al navegador por nuestra tienda y no cumple ninguna función que nos sirva para algo. Cómo se puede quitar?

    Cuál sería la forma de poder mostrar nuestras fotos sin que ese cuadrado selector esté presente en ninguna de ellas?

    Muchas gracias

  • Profile Image
    Gilbert Enterprise Support
    Fecha de respuesta 16 de agosto de 2023, 9:12

    Hi Carlos,

    If you want to hide the checkbox for the product items, you can do it by injecting this CSS code into your form:

    .p_checkbox {
     visibility: hidden;
    }


    1. In the Form Builder, open the Form Designer by selecting the paint roller icon in the upper-right corner.

    Cuál es la función de el pequeño cuadrado que hay en las imágenes? Image 1 Screenshot 50

    2. In the Form Designer pane on the right, go to Styles at the top.

    Cuál es la función de el pequeño cuadrado que hay en las imágenes? Image 2 Screenshot 61

    3. Scroll down to Inject Custom CSS and enter your CSS code in the textarea.

    4. Once you’re done, click Save at the bottom.

    Cuál es la función de el pequeño cuadrado que hay en las imágenes? Image 3 Screenshot 72

    5. View your form in Preview or Live mode to check how your form fillers see your form.

    Here's what the Product Field would look like after adding the CSS code:

    Cuál es la función de el pequeño cuadrado que hay en las imágenes? Image 4 Screenshot 83

    Give it a try and let us know if you have any other questions.

  • Profile Image
    soycarlobot
    Fecha de respuesta 16 de agosto de 2023, 10:20

    Hola Gracias! el código funcionó muy bien, pero solo en la versión web. Nuestros clientes operan, como todo el mundo hoy en día, desde su móvil. Es fundamental que esto suceda en la versión para teléfonos celulares. Podrás ayudarme?

  • Profile Image
    Gilbert Enterprise Support
    Fecha de respuesta 16 de agosto de 2023, 11:12

    Hi Carlos,

    The CSS code is applied on all views including mobile view. Here's what my cloned form looks like in mobile view after adding the CSS code:

    Cuál es la función de el pequeño cuadrado que hay en las imágenes? Image 1 Screenshot 20

    I checked your form and it seems you didn't put the correct CSS code. I fixed it now so you shouldn't see the checkbox anymore on the product items even on mobile view. Try refreshing the form page on your phone and check it again.

    Let us know if you have any other questions.