printer image Print Home / Share Forms / Adding a form to Facebook (Facebook Deve...
JotForm User Guide / Share Forms /

Adding a form to Facebook (Facebook Developer Method)

Adding a form to Facebook (Facebook Developer Method)

This method is deprecated. To view an updated version, click here.






This post outlines the 'Facebook Developer Method' of adding your form to a Facebook Page. I will begin by outlining the main pro's and con's of this method.

Pro's
  1. Professional look, can customise your Facebook tab icon.
  2. No 3rd party application providers required. 
Con's
  1. Can not provide different content for Fans and non-Fans.
  2. If you choose not to use an SSL version of your form, your form will not be viewable by people browsing Facebook on a secure connection. 
If you dont think this method suits your requirements, you can consider the Static HTML App Method or the TabPress App Method 
-----------------------------------------------------------------------------------------------------------------------------------------------------------

First, I have created a basic form that I want to put onto my Facebook Page, it's for a fictional Facebook competition.

NOTE: For better looking Facebook integration, you should set your form width to 520px.

1. Click on the a) Form Style tab, b) Click the Form Width icon, and c) Change the width to 520, then Click OK.


2.  We need to retrieve your Forms' ID. One way to do this is to Click on the Setup & Embed toolbar, Click Embed Form, Click Embed and copy that 11 digit Form ID number. You will need this later. My Form ID is: '13055750337'.


We are now ready to put our form on Facebook. 
NOTE: Facebook requires a developer to have their Facebook account verified. You can do this with a mobile phone number or by adding a credit card (just for verification purposes). If you haven't already verified your Facebook account, you will be prompted to do so when first visiting this link.

4. Click the Create New App button in the top right hand corner of this page.

5. You will be presented with a dialog box. Give your new App a Display Name. You dont need to fill out the App Namespace field. 


Complete the captcha in the next dialog box. 

You should now see a configuration page for your new App.

6. The first of the two fields we need to concern ourselves with are the App on Facebook field. Click on it. 

( Remember that 11 digit Form ID number, we retrieved in Step 2 above? We need it now. )

For Canvas URL, Enter in: https://www.jotform.com/form/FORM_ID/ 
For Secure Canvas URL, Enter: https://www.jotform.com/form/FORM_ID/

NOTE: the forward slashes at the end of the URL are important. Include them! FORM_ID is that 11 digit number you retrieved in Step 2. 

The configuration for my App for the App on Facebook field looks like this:


7. The next field we need to add some information to, is Page Tab.

For Page Tab URL, again enter: https://www.jotform.com/form/FORM_ID/ 
For Secure Page Tab URL, as before, https://www.jotform.com/form/FORM_ID/
( remember those forward slashes! FORM_ID is the 11 digit number from step 2 )

My configuration for the Page Tab field looks like this: 


7.a Make sure the Sandbox is disabled:

PLEASE NOTE: Even though you will be warned about it when saving your configuration, you dont have to enter anything for Secure Canvas URL or Secure Page Tab URL. However, anyone browsing Facebook on a secure connection, i.e with a web address starting https:// will not be able to see your form. They will get this message:

Please note 2 :

The site url set in yourfacebook should also be the same with the url provided by JotForm in your embedcode.

So if for example:  the form embed codeis http://jotform.me/form/20643463926456

then  http://jotform.me as the site url

and jotform.me as the app domain.



Remember: JotForm Secure(SSL) form submissions limits are counted seperately from standard non-secure submissions.

Click on Save Changes at the bottom of the App configuration page. 

Thats it. Your application is configured. Easy isnt it?
We just need to get your new App onto your Facebook Page. 

8. At the top of your App configuration page. You will see its App ID. Make a note of that number or copy it into a notepad document. . 



9.  With that App ID, you need to use it to visit a webpage:

https://www.facebook.com/dialog/pagetab?app_id=APPID&redirect_uri=http%3A%2F%2Fwww.facebook.com

where APPID is that string of numbers you gathered in Step 8.

e.g for my app above.




10.  On this webpage, from the dropdown menu, select which fan page you want to add your Form to and click the Add Page Tab button. 


Now, you can go to your Facebook Page. You should see a new Tab with the label you specified in step 7. Click on it, you will see your form. 


11. How about one last finishing touch? lets change that default application icon, to something more interesting. 

Back at https://developers.facebook.com/apps You should see your application listed, Click on it, then click Edit App. This takes you back into the Apps configuration page. 

Near the top, click on the edit icon link.


In the resulting dialog box, select Choose File, and find the image you want to use as your icon from your hard drive. 

Thats it. All done! You can inspect my finished form on Facebook 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:
Contact JotForm Support: https://www.jotform.com/contact/

Send Comment

26 Comments...

  • Collins Agbonghama

    Sadly, this method has been deprecated.

  • Modupe

    cant see the 11 digit from for embeded, this is what i see "Loading..."

  • Sophia John

    I had made some changes, but got error. After that I have connect through Cygnis Media United States Top Facebook App Developers and they suggest me to change the key and you know what, it solved my issue.

    I am glad to see same solution here :)

  • veethreemarketing

    Hi,

    Its giving me an error.

    It says 405 not allowed.

    Im using a Chrome Browser on a mac.

    Any reason why?

    This has been bothering me for days now.
    Please help.

  • EarsMiranda

    I cannot get this to work. I keep getting this... 405 not allowed nginx/1.2.3 Can someone tell me what's wrong?

  • je suis libre alons

    https://www.facebook.com/Rawassi24

  • militaryspouse

    Has this been fixed?? I'm getting 404 not found for http://form.jotformpro.com/form/23135184134951/

    when embedded in facebook page tab

  • vellvette

    I added my Jotform using Static Html here: https://www.facebook.com/vellvette/app_158105277647107

    But the form does not show up on IE!

  • iyep abdul rozak

    Thank you friends, this is very helpful.

  • mjmanning

    I just created a form and followed the steps to add it to our FB page, but I'm getting this message: Error
    Canvas URL must point to a directory (i.e., end with a '/' or a dynamic page (i.e., have a '?' somewhere).
    But here is my canvas URL which looks to be correct: http://www.jotform.com/form/21424626611143/ (though my number is more than 11 digits)
    Can you identify the problem for me?

  • Angela

    This site is really amazing and informative to me, i am impressed by this site.
    Facebook Development

  • jeanettebmz

    @ubtrueblue
    Could you please let us know what is your issue? please go ahead and leave your question in our Forum

    Jotform Support

  • ubtrueblue

    ismikhair - how did you get your form to work

  • ismikhair

    already applied these configuration, but it display Error 404 on facebook page...Help me..

    http://www.facebook.com/pages/Keropok-Cap-Pari/302319113156833?sk=app_276843545723312

  • volcano_oo

    Sorry to flood this thread, please disregard my last question about removing the app, I am still interested in the first one..

  • volcano_oo

    Oh and how do I remove the iframe app? :-) thanks

  • volcano_oo

    I had the same problem that my form did not appear (404:Not Found) so I used the other method you have suggested to another user (Static html app method) - would it be possible to change the icon in this case? Thanks!

  • fitzyount1

    I am not able to get this to work either. It just pops up 404: Not Found. Any advice?

  • zuheir

    Hi,

    ive made it all step by step but lastly on my page it says that form not found (has been deleted by the owner)

    how to solve these? thank you

  • ciara3103

    i've just create my apps..it's call ORDER FORM. however i couldn't use it! i can't even add tab to my page..pls help me..

  • welfareinfo

    Hi,

    I have tried following the steps above.... and have ended up with a rather strange result... the jotform page itself now shows up on the tab... please see the following.... http://www.facebook.com/pages/The-Poor-Cant-Pay/119751158060160?sk=app_332162856806354

    Any suggestions on what went wrong?

  • SaucybyNature

    I have gotten to the step where I need to "View App Profile Page". That option does not appear for me so I'm stuck. Any help please?

  • webadmin

    My form uses a custom thank you page rather than a thank you message, which allows me to measure conversions in Google Analytics. When a visitor completes the form from our FB fan page tab, they get redirected to the thank you page on our website, which I dont like. Is it possible to set up a conditional thank you where: 1) when the form is completed from Facebook the user sees a customized thank you message--staying in FB and 2)when the user completes the form on our website they user goes to a customized thank you page on our website? My FB app URL's do have additional characters (/?FB=true) that might be used for establishing a condition.

  • Melissa Beck

    This was a very helpful tutorial. Perfect and very easy to follow. I'm getting stuck at step #8, I don't have the option to view the app profile page. Is there some reason for this or some way to see it elsewhere?

    Thanks!

  • resco7

    Today, Dec 09 2012, I just added a form and it works great!! I struggled a little, because I was not following the steps, exactly as oulined here. Thank you very much. Here's the link to my form:

    http://www.facebook.com/pages/Ingl%C3%A9s-Sin-Barreras-Virtual/158156347534577?sk=app_262360437155203

  • white74

    I have created my app, but I do not get the option to 'add to my page' ..
    only 'add to my page's favourites'

    is this because I run a business facebook page?
    Any advice here?

    Thanks

Related Articles

Related Articles

JotForm
Marketplace
Support
Company
App Store Google Play
Terms & Conditions Privacy Policy Security

111 Pine St. Suite 1815, San Francisco, CA 94111

© JotForm Inc.