Ajouter un formulaire à Tumblr

Tumblr est le moyen le plus simple de bloguer et de partager du contenu sur le web. Jotform est le moyen le plus simple de créer, concevoir et partager des formulaires web. Deux services avec la même mission : simplifier les choses. Mettons-les au travail ensemble.

Tumblr vous permet de créer une page personnalisée pour votre blog. Sur cette page, vous pouvez intégrer le formulaire. Vous pouvez également intégrer un formulaire dans vos publications, mais l’affichage du formulaire nécessite un petit truc. Lisez la suite pour savoir comment intégrer un formulaire sur Tumblr.

Watch on youtube

Obtenir le code d’intégration

Suivez ces étapes pour copier le code d’intégration pour votre blog ou publication sur Tumblr.

1. Dans Créateur de formulaires, cliquez sur Publier.
2. Ensuite, cliquez sur Plateformes.

3. Ensuite, sélectionnez Tumbr. Vous pouvez utiliser la barre de recherche pour le trouver facilement.

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

Intégration du 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 page nouvelle ou existante en utilisant cette méthode. Pour commencer :

1. Dans votre Tableau de bord Tumblr, cliquez sur l’onglet Compte à gauche de la page.
2. Ensuite, cliquez sur le blog où vous souhaitez afficher le formulaire.

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

4. Allez dans Thème personnalisé et cliquez sur Modifier le thème.

5. Dans l’Éditeur de thème, faites défiler le menu de gauche et cliquez sur une page où vous souhaitez intégrer votre formulaire. Si vous l’ajoutez à une nouvelle page, il vous suffit de cliquer sur Ajouter une page et de continuer depuis là.

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

Si vous choisissez d’utiliser une Mise en page personnalisée, collez le code d’intégration directement dans l’éditeur de code source.

7. Cliquez sur 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 avec un formulaire 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 permet 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 :

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 les codes restants ressemblent à ce qui suit :

<iframe id="JotFormIFrame-240890694020051" title="Formulaire de contact" 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. 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://formjotform.pro-bark.biz/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. Allez dans votre Tableau de bord Tumblr et 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à.