Adding a Form to Tumblr

Last Update: 

Tumblr is the easiest way to blog and share stuff on the web. Jotform is the easiest way to create, design, and share web forms. Two services with the same mission: to make things easier. Let’s get them to work together.

Tumblr allows you to create a custom page for your blog. On the page, you can embed the form. You can also embed a form in your posts, but this requires a little trick to display the form. Read on to learn how to embed a form into Tumblr.

Adding a Form to Tumblr’s Custom Page

  1. In the Form Builder, go to the Publish tab.
  2. Go to the Platforms section.
  3. Search for Tumblr and click it.
Adding a Form to Tumblr Image-1
  1. Click the Copy Code button.
Adding a Form to Tumblr Image-2
  1. Edit your Tumblr page or create one if you don’t have one yet.
  2. In Tumblr’s page editor, click the <HTML> icon. You should see the HTML codes of the existing content of the page. You’ll also notice that the editor grays out the other icons.
  3. Paste your form’s embed codes.
  4. Finally, click the Save button to save the changes. You can also click the Update Preview button to display the changes, including the form on the right side.
Adding a Form to Tumblr Image-3

You can view a demo Tumblr page with a form here.

Adding a Form to Tumblr Post

Tumblr allows you to use an HTML editor when creating a post. However, Tumblr’s embed code won’t work for posts. In this case, you’ll have to use the iframe and tweak it a little. Here’s how:

  1. Get the iframe embed codes of the form you wish to embed to a post.
  2. Remove the script part of the iframe, so the remaining codes should look like the following:
<iframe id="JotFormIFrame-220705623938054" title="Contact Form" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/220705623938054" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>
  1. Change the height value to the actual height of the form (see highlighted text below). The final iframe code should be the following:
<iframe id="JotFormIFrame-220705623938054" title="Contact Form" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/220705623938054" frameborder="0" style=" min-width: 100%; height:850px; border:none;" scrolling="no" > </iframe>

If you’re embedding a lengthy form, we suggest setting the scrolling parameter to “yes“.

  1. Go to your Tumblr dashboard, and click the Pencil icon to create a new post.
  2. Choose Text from the list of options.
Adding a Form to Tumblr Image-4
  1. Click the Settings (gear icon) on the post modal.
  2. Choose HTML from the Text Editor options.
Adding a Form to Tumblr Image-5
  1. Paste the modified iframe codes.
  2. Click the Post button, and that’s it.
Adding a Form to Tumblr Image-6

You can view a demo Tumblr post with a form here.

Do you have any questions, suggestions, or feedback? Please post a comment below. You can also reach us by creating a support ticket.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Font Bots - Profile picture
  • Duane - Profile picture
  • tammydo - Profile picture
  • Adyatmaka - Profile picture
  • fferraro - Profile picture
  • ponyexpress - Profile picture
  • Aaron Winters - Profile picture
  • Pablo - Profile picture
  • mflanagan - Profile picture
  • sunningdenacres - Profile picture
  • leae - Profile picture
  • Ty - Profile picture
  • ventodancante - Profile picture
  • deliciousnm - Profile picture
  • totowaairsoft - Profile picture
  • Ed - Profile picture
  • ESIInternational - Profile picture
  • lieya - Profile picture
  • ccap - Profile picture
  • TheMasses - Profile picture
  • dmac - Profile picture
  • Mmc - Profile picture
  • falegado - Profile picture
  • Kisha - Profile picture
  • Terri - Profile picture
  • vinautomatic - Profile picture
  • theresaislo - Profile picture
  • otabo - Profile picture
  • Ang - Profile picture
  • berlyellis - Profile picture
  • ywammadison - Profile picture
  • sasiramalingam8 - Profile picture