Comment ajouter un formulaire à Tumblr

Tumblr facilite le blogging et le partage de contenu sur le web. Jotform simplifie la création, la personnalisation et le partage de formulaires en ligne. Deux services, une même mission : rendre les choses simples. Associés, ils deviennent encore plus puissants.

Tumblr vous permet de créer une page personnalisée pour votre blog, sur laquelle vous pouvez intégrer un formulaire. Il est également possible d’insérer un formulaire directement dans vos publications, bien qu’un petit ajustement soit nécessaire pour qu’il s’affiche correctement. Découvrez ci-dessous comment intégrer un formulaire sur Tumblr.

Watch on youtube

How to Add a Form to Tumblr [2024]

Récupérer le code d’intégration

Pour copier le code d’intégration pour votre blog ou publication sur Tumblr, procédez comme suit :

1. Accédez à votre formulaire dans le Générateur de formulaires Jotform et cliquez sur l’onglet Publier en haut dans la barre de navigation orange.
2. Puis, cliquez sur Plateformes dans le volet qui s’ouvre à gauche.

3. Recherchez et sélectionnez Tumblr. Vous pouvez utiliser la barre de recherche pour le trouver facilement.

4. Sur l’écran suivant, cliquez sur le bouton Copier le code.

Intégrer le formulaire sur des pages personnalisées

Tumblr prend en charge l’intégration HTML pour les pages de blog personnalisées. Vous pouvez intégrer votre formulaire Jotform à une nouvelle page ou à une page existante en utilisant cette méthode. Pour commencer :

1. Dans votre Tableau de bord Tumblr, cliquez sur Compte dans le volet à gauche de l’interface.
2. Ensuite, cliquez sur le blog dans lequel vous souhaitez afficher le formulaire.

3. Cliquez sur Paramètres du blog sur le côté droit de la page.

4. Faites défiler vers le bas jusqu’à la section Thème personnalisé, activez le bouton-curseur et cliquez sur Éditer le thème.

5. Dans l’Éditeur de thème, faites défiler vers le bas le menu du volet de gauche et cliquez sur la page sur laquelle vous souhaitez intégrer votre formulaire. Si vous souhaitez ajouter votre formulaire à une nouvelle page, il vous suffit de cliquer sur le bouton + Ajouter une page.

6. Sur l’écran suivant, choisissez une mise en page d’affichage pour votre page. Pour la mise en page par défaut Affichage Standard, cliquez sur le bouton HTML dans la barre d’outils d’édition, puis collez le code d’intégration de formulaire.

Si vous choisissez d’utiliser l’Affichage personnalisée, collez le code d’intégration directement dans l’éditeur de code source et cliquez sur Mettre à jour l’aperçu.

7. Cliquez sur le bouton Enregistrer en haut pour sauvegarder vos modifications. Si vous souhaitez voir comment le formulaire intégré rend avant de sauvegarder, cliquez sur le bouton Mettre à jour l’aperçu pour voir les changements d’abord à droite de l’Éditeur de thème.

Vous pouvez voir une page Tumblr de démonstration qui intègre un formulaire Jotform ici.

Ajouter le formulaire aux publications avec la nouvelle méthode d’édition

Tumblr n’autorise plus le HTML personnalisé dans son nouvel éditeur, donc l’intégration n’est plus possible. Vous pouvez en lire plus sur cette mise à jour ici. À ce stade, vous ne pouvez publier le formulaire qu’en tant que lien. Si l’éditeur ancien fonctionne encore pour votre compte Tumblr, faites défiler vers le bas pour les étapes d’intégration d’un formulaire.

Commençons maintenant à ajouter le lien de votre formulaire à une publication Tumblr :

1. Dans votre Tableau de bord Tumblr, cliquez sur l’option Texte ou Lien pour créer une publication.

1. Copiez le lien direct vers votre formulaire et collez-le dans votre publication.

3. Ensuite, cliquez sur le bouton Publier maintenant.

Ajouter le formulaire aux publications avec la méthode de l’ancien éditeur

Dans son ancien éditeur, Tumblr vous permettait d’utiliser un éditeur HTML lors de la création d’une publication. Avec un petit ajustement dans les codes iframe, vous pouvez intégrer et afficher votre formulaire dans une publication. Voici comment procéder :

1. Obtenez le code d’intégration iframe du formulaire que vous souhaitez intégrer à une publication.
2. Retirez la partie script du code d’intégration pour que le code restant ressemble à celui-ci :

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

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

3. Changez la valeur de la hauteur à la hauteur réelle du formulaire (voir le texte surligné ci-dessous). Le code iframe final devrait ressembler à ceci :

<iframe id="JotFormIFrame-240890694020051" title="Formulaire de contact" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/240890694020051" frameborder="0" style=" min-width: 100%; height:850px; border:none;" scrolling="no" > </iframe>

<iframe id="JotFormIFrame-240890694020051" title="Formulaire de contact" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/240890694020051" frameborder="0" style=" min-width: 100%; height:850px; border:none;" scrolling="no" > </iframe>

Si vous intégrez un formulaire long, nous vous suggérons de régler le paramètre de défilement sur « Yes ».

4. Dans votre Tableau de bord Tumblr, cliquez sur le bouton Créer pour créer une nouvelle publication.
5. Choisissez Texte dans la liste des options.

6. Cliquez sur les Paramètres de la fenêtre de publication.
7. Choisissez HTML dans les options de l’éditeur de texte.

8. Collez les codes iframe modifiés.
9. Cliquez sur le bouton Publier, et voilà.