Adding a Form to Tumblr

March 27, 2024

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 displaying the form requires a little trick. Read on to learn how to embed a form into Tumblr.

Youtube Embed Poster: TK2Xq98w-Q0

Getting the Embed Code for Tumblr

Tumblr uses the Iframe method. Here’s how to copy the embed code:

  1. In the Form Builder, go to the Publish tab.
  2. Go to the Platforms section.
  3. Search for Tumblr and click it.
Tumblr option in Platform embed in Jotform Form Builder
  1. Click the Copy Code button, and proceed to the next part below.
Copy Code button in Tumblr platform embed option

Adding a Form to Tumblr’s Custom Page

Tumblr supports HTML embedding to custom blog pages. You can embed your Jotform form to a new or existing page using this method. To begin:

  1. In your Tumblr dashboard, click the Account menu on the left panel.
  2. Click the specific blog where you want to display the form.
List of Blogs in Tumblr's website
  1. Click Blog Settings on the right sidebar.
Blog settings link in Tumblr's Blogs panel
  1. Under the Custom Theme option, click the Edit Theme button.
Edit Theme button in Tumblr's Custom Theme settings
  1. On the Theme Editor, navigate to the pages section. Click the existing page to add the form or the Add a Page button to create a new page for the form alone.
List of Page in Tumblr's edit theme section
  1. You can add the form either by Standard Layout or Custom Layout. The Standard Layout is the default. If you choose this, click the <HTML> icon and paste your form’s embed code.
Custom HTML option in Tumblr's Standard Layout editing of pages

If you choose the Custom Layout, you will be presented with the HTML editor. Paste the embed codes.

Custom Layout option in Tumblr's page editor
  1. 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.

Note

The Iframe embed method works with Tumblr without any issue while we update this article, but if you get any error when saving, we highly suggest contacting Tumblr’s support to enable Javascript/HTML for your blog.

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

Adding a Form to Tumblr Post (New Editor Method)

Tumblr no longer allows custom HTML in its new editor, so embedding is no longer possible. You can read more about this update here. At this rate, you can only post the form as a link. If Legacy Editor still works for your Tumblr account, scroll below for the steps to embed a form.

Now let’s start adding your form’s link to a Tumblr post:

  1. In your Tumblr dashboard, click the Text or Link option.
  2. Paste your form. You will automatically see the preview of the form in the post.
Tumblr Post with Jotform link
  1. Click the Post Now button to post your form.

Adding a Form to Tumblr Post (Legacy Editor Method)

In its Legacy Editor, Tumblr allows you to use an HTML editor when creating a post. With a little tweak in the iframe codes, you can embed and display your form in a post. 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://formjotform.claystructures.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://formjotform.claystructures.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.
Text option in Tumblr's add post window
  1. Click the Settings (gear icon) on the post modal.
  2. Choose HTML from the Text Editor options.
Adding a Form to Tumblr Image-1
  1. Paste the modified iframe codes.
  2. Click the Post button, and that’s it.
Adding a Form to Tumblr Image-2

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

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