User Guide

 

Adding a form to Facebook (Custom iFrame App)

Adding a form to Facebook (Custom iFrame App)

Adding forms to Facebook is quick and easy using JotForm. If you have already created your form in the form builder, follow the instructions below.

 

We use Static HTML: iframe tabs Facebook application on embedding the form to the Facebook page. You'll learn how to add this application soon, but let's first get our form iframe embed code for Facebook.

 
 

Getting Your Form Code


You have to use the iframe embed method. Please follow this guide: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

 
 

Adding Iframe App to your Facebook Page 


1. Go to your Facebook page and on the search bar enter "Static HTML: iframe tabs" or visit this link https://apps.facebook.com/static_html_plus.


2. Click the "Add Static HTML to a Page" button

3. Choose your Facebook page to add the iframe tab and click the add button


Adding Form to Your Facebook Page 


1. Go to your Facebook page and find the Custom Iframe App you just installed. It is usually found under More options named "Welcome" tab as seen on the screenshot below. See FAQ section below if you want to change the default page tab name.


2. Click "Edit Tab" to add content to the Page Tab



3. There are two options you can choose to display your form on your Facebook page. The first one (Public Content) makes it available to everyone while the second one (Fan Content) makes it available only to your Facebook fans, or users who liked your Facebook page. Make sure to publish your page afterwards. Check the following screenshot.

Adding Another Tab to your Facebook Page (Multiple Tabs).

1. After Saving & Publishing your first tab, click Done Editing Tab button.


2. While on the main page, click Tabs menu on the left and click "Add a new tab" orange button to add another tab to your Facebook page. If the page asks you to login to your Facebook account, please do so, it might need a switch to your main Facebook account before you can add another tab.


Frequently Asked Questions (FAQ)

1. The page tab does not appear on mobile devices?

- Page tab apps are not supported on mobile devices by Facebook's Platform. However, Static Iframe Tab App provides direct URL to your page tab that is viewable on mobile devices. To get your page direct URL, simply edit your Facebook tab and copy the link you see on the Tab URL box.


2. How to change the page tab name and tab image?

These can be changed on the tab settings. Go to your tab settings and look for the Facebook Settings section. Under it, you'll see Tab Name and Tab Image.

--------------------------------------------------------------------------------------------------------------------------------------

Note: 
Always use "Secure Form Embed Code" when embedding your form to Facebook. Make sure the form URL found on your form embed code starts with https://.


It's highly recommended to use "HTTPS" to avoid any security issues on the page since Facebook requires the secure protocol.



 

Alternative iFrame apps for your Facebook page 

1. iFrame Wrapper 

2. iFrame Apps 

3. Static iFrame Tab 

4. Woobox Static HTML Iframe Tab

 
If you are stuck with any of the steps above or if you have further questions about this guide, feel free to post it on the comments section below.

Send Comment

23 Comments...

  • Ovas

    The short URL provided the app is not opening on mobile devices but works fine on Desktop devices:
    http://bit.ly/2zF1euI

    Please help..

  • bzalphanav2015

    It is working, but i want my viewers on mobile to click on the button on my facebook page. (the sign up button) and fill it on mobile. can you help me on this?

  • mainelostcatrecovery

    Which method of adding a JotForm to Facebook page is easier to update the form? Static HTML iFrame or the other way?

    I need to add one field to our form and can't figure out how to update it. I don't seem to have the gear to update and when I look at my Facebook page (MaineLostCatRecovery) I don't see the Star iFrame Static HTML under Apps. Ginger

  • OrthoOne

    I could nt add the app to my fb page. Please help.

  • evelyn sanders

    My Mission America nonprofit page is not displaying the Paypal Donate Now Button. I added the HTML code? Also, the page is difficult to find. Thanks

  • raj

    I am creating one java survey application and i want to create one facebook app.so can anyone tell me how can i attach my jsp file to facebook apps?

  • janzaibbaloch

    reservation form of facebook

  • Crook

    Wow awesome and informational site to me, i am also gonna share this site to my friends.
    Facebook Application Developer

  • Angela

    Amazing and unique informational site to me, i was also thinking about this great and awesome site.

  • wrafter

    Can the name of the owner of the fan page be seen, or the name of the person who is using the API be seen? (I ask re retaining anonymity on a Facebook page.)

  • leaf4kids

    Now that the FB app is added, those who DONT USE FB cannot use my app. I need to take it off, but don't know how... thanks!

  • maivutan

    These are all old, the new one has been changed.
    So now I don't know how to add my form to Facebook App.

  • sudha

    mohanu . . .

  • ajardel

    the form with facebook integrator brings me no email. Why is that?

  • TFYogurtCanada

    This is great thank you! Is there a way to make this so that only Fans of your page can see it?

  • vivendoolouvor

    Gostaria de Saber se tem como eu pegar o código html e colocar na minha página?

  • swiftrui

    how can i create the App on Facebook,we be blocked when click setup new app?

  • sticklas

    This worked perfectly thanks!!

  • JotFormSupport

    Follow these steps in the tutorial
    http://www.jotform.com/help/22-Adding-Form-to-Facebook

  • essentialnetworks

    I did everything here but when I did the last step it doesn't go straight to the form. Am I missing something ?

  • inesmuller

    like this

  • Bruno Bros

    Bonjour,

    Le passage en https fait que les applications iframe non configurées https ne s'affichent pas sur les pages entreprises.
    iframe.apps permet de créer une iframe sans être développeur facebook et évite d'acheter et de configurer le certificat SSL.

    L'application iframe.apps (http://www.facebook.com/iframe.apps) propose :
    - d’ajouter dans un onglet iframe une page internet existante simplement en insérant son URL
    - ou de créer un nouvel onglet iframe grâce à l’éditeur HTML intégré
    (de la même manière qu’était géré Static FBML)

    N'hésitez pas à demander plus d'informations.
    Bruno B.

  • LionelMellsey

    This is Great!!! It's works on my fans page now.