Pregunta sobre Calculated Fields Form de Wordpress:

Solo para dispositivos móviles o de escritorio

Un usuario preguntó 👇

Hola.

Quiero crear dos versiones de un formulario, una para escritorio y otra para dispositivos móviles. Los campos son los mismos, pero trabajaré en CSS para optimizarlos para ambos tipos de dispositivos.

Intenté aplicar CSS @mediascreen al campo «Personalizar diseño de formulario», pero definitivamente estoy equivocado en algo. Creo que son funciones fáciles, pero realmente soy un novato.

¿Podrías ayudarme con eso?

¡Gracias por adelantado!

(@upiria)

Hace 1 año, 10 meses

De acuerdo, en este momento, he resuelto para dispositivos móviles:

/ * Solo móvil * / @media una pantalla y (ancho máximo: 480px) {.cp_cff_clean #fbuilder {display: block; }}

@media solo pantalla y (ancho mínimo: 481px) {.cp_cff_clean #fbuilder {display: none; }}

Para computadoras de escritorio y tabletas, no puedo reutilizar el mismo resultado. Me siento un poco tonto, lo admito. ^^

(@codepeople)

Hace 1 año, 10 meses

Hola @upyria

Los estilos a aplicar dependen del resultado que se desee obtener. Los estilos de su ticket solo muestran / ocultan los formularios según el tamaño de la pantalla.

Describa en detalle las modificaciones que desea implementar.

Todo lo mejor.

(@upiria)

Hace 1 año, 10 meses

Hola Codepeople y gracias por la respuesta.

Es lo correcto que quiero. Creo un formulario, lo clono. Quiero que el primero aparezca en el móvil. Este último en una computadora de escritorio y una tableta.

Con el CSS explícito anterior, obtengo el móvil. Pero revirtiendo la condición de «bloqueo» / «no» no puedo lograr mi objetivo.

Donde me equivoco

(@codepeople)

Hace 1 año, 10 meses

Hola @upyria

No sé por qué necesita crear dos formularios diferentes para usarlos en teléfonos móviles y computadoras de escritorio, sin embargo, si ha creado dos formularios diferentes, la solución sería a nivel de página. Por ejemplo, asumiendo que los atajos correspondientes son:

[CP_CALCULATED_FIELDS id="123"]

y

[CP_CALCULATED_FIELDS id="987"]

Insértelos en su propia etiqueta div correspondiente con un nombre de clase diferente:


<div class="form-in-desktop">[CP_CALCULATED_FIELDS id="123"]</div>
<div class="form-in-mobile">[CP_CALCULATED_FIELDS id="987"]</div>

y luego puede definir los estilos para mostrar / ocultar el div del contenedor:


@media only screen and (max-width: 480px) {
  .form-in-mobile{display: block;}
  .form-in-desktop{display: none;}
}
@media only screen and (min-width: 480px) {
  .form-in-mobile{display: none;}
  .form-in-desktop{display: block;}
}

Todo lo mejor.

(@upiria)

Hace 1 año, 10 meses

Hola, @codepeople y gracias por la pista.

Puse el atajo en el «Elemento» del Bloque Gutenberg. ¿Tengo que usar Gutenberg Block “HTML” para insertar la etiqueta div?

Estoy un poco confundido.

(@codepeople)

Hace 1 año, 10 meses

Hola @upyria

Si está utilizando el editor de Gutenberg, es aún más fácil, en el atributo «Atributos adicionales» en el bloque, ingrese el atributo de clase con el nombre de la clase: class="form-in-desktop" y para la segunda forma: class="form-in-mobile"

y luego, defina ambos estilos como he descrito anteriormente.

Todo lo mejor.

(@upiria)

Hace 1 año, 10 meses

¡Guau … objetivo logrado!

¡¡¡Con el DIV funciona bien !!!

Muchas gracias. ^^

Excelente plugin !!!

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.