Añadir un formulario a Tumblr

Tumblr es la manera más sencilla de bloggear y compartir cosas en la web. Jotform es la manera más sencilla de crear, diseñar y compartir formularios web. Dos servicios con la misma misión: hacer las cosas más fáciles. Vamos a hacer que trabajen juntos.

Tumblr te permite crear una página personalizada para tu blog. En la página, puedes incrustar el formulario. También puedes incrustar un formulario en tus publicaciones, pero mostrar el formulario requiere un pequeño truco. Sigue leyendo para aprender cómo incrustar un formulario en Tumblr.

Watch on youtube

Obtener el código de incrustación

Sigue estos pasos para copiar el código de incrustación para tu blog o publicación en Tumblr.

1. En Form Builder, haz clic en Publicar.
2. Luego, haz clic en Plataformas.

“““html

“““html

3. Luego, selecciona Tumblr. Puedes usar la barra de búsqueda para encontrarlo fácilmente.

“““html

4. En la siguiente pantalla, haz clic en Copiar código.

“““html

“““html

Incrustación del formulario en páginas personalizadas

Tumblr admite la incrustación de HTML en páginas personalizadas del blog. Puedes incrustar tu formulario de Jotform en una página nueva o existente utilizando este método. Para comenzar:

1. En tu Panel de Tumblr, haz clic en la pestaña Cuenta a la izquierda de la página.
2. A continuación, haz clic en el blog donde deseas mostrar el formulario.

“““html

3. Luego, haz clic en Configuración de Blog en el lado derecho de la página.

“““html

“““html

4. Ve a Tema personalizado y haz clic en Editar tema.

“““html

5. En el Editor de temas, desplázate por el menú de la izquierda y haz clic en una página donde te gustaría incrustar tu formulario. Si lo estás añadiendo a una nueva página, simplemente haz clic en Añadir una página y sigue desde allí.

“““html

“““html

6. En la siguiente pantalla, elige un diseño para tu página. Para el Diseño Estándar por defecto, haz clic en el botón HTML en la barra de herramientas de edición, luego pega tu código de incrustación del formulario.

“““html

“““html

Si decides usar un Diseño Personalizado, pega el código de incrustación directamente en el editor de código fuente.

“““html

“““html

7. Haz clic en Guardar en la parte superior para mantener tus cambios. Si deseas ver cómo se ve el formulario incrustado antes de guardar, haz clic en el botón Actualizar vista previa para ver primero los cambios en el lado derecho del Editor de temas.

“““html

Puedes ver una página de ejemplo de Tumblr con un formulario aquí.

Añadir el formulario a publicaciones con el nuevo método del editor

Tumblr ya no permite HTML personalizado en su nuevo editor, por lo que la incrustación ya no es posible. Puedes leer más sobre esta actualización aquí. A este ritmo, solo puedes publicar el formulario como un enlace. Si el Editor Legacy todavía funciona para tu cuenta de Tumblr, desplázate hacia abajo para ver los pasos para incrustar un formulario.

Ahora, comencemos a añadir el enlace de tu formulario a una publicación de Tumblr:

“““html

1. En tu Panel de Tumblr, haz clic en la opción Texto o Enlace para crear una publicación.

1. Copia el enlace directo a tu formulario y pégalo en tu publicación.

“““html

3. Luego, haz clic en el botón Publicar ahora.

“““html

“““html

Añadir el formulario a publicaciones con el método del Editor Legacy

En su Editor Legacy, Tumblr te permite usar un editor HTML al crear una publicación. Con un pequeño ajuste en los códigos iframe, puedes incrustar y mostrar tu formulario en una publicación. Así es como se hace:

1. Obtén el código de incrustación iframe del formulario que deseas incrustar en una publicación.
2. Elimina la parte del script del código de incrustación para que los códigos restantes se vean como sigue:

<iframe id="JotFormIFrame-240890694020051" title="Formulario de Contacto" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://formjotform.pro-bark.biz/240890694020051" frameborder="0" style="min-width: 100%; height:539px; border:none;" scrolling="no" ></iframe>

3. Cambia el valor de altura al valor real de la altura del formulario (ver el texto resaltado a continuación). El código final del iframe debería ser el siguiente:

<iframe id="JotFormIFrame-240890694020051" title="Formulario de Contacto" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://formjotform.pro-bark.biz/240890694020051" frameborder="0" style="min-width: 100%;
``````html
height:850px; border:none;" scrolling="no" ></iframe>

Si estás incrustando un formulario extenso, te sugerimos establecer el parámetro de desplazamiento en “sí“.

4. Ve a tu Panel de Tumblr y haz clic en el botón Crear para crear una nueva publicación.
5. Elige Texto de la lista de opciones.

“““html

6. Haz clic en Configuración en el modal de publicación.
7. Elige
   “““html
   HTML de las opciones del Editor de Texto.

“““html

8. Pega los códigos iframe modificados.
9. Haz clic en el botón Publicar, y eso es todo.

“““html