Browse Article by Topics

facebook form facebook developer method add form to facebook facebook canvas Adding Forms to Facebook

Related Articles

Related Forum Questions

Home / Share Forms / Adding forms to Facebook ( Facebook Deve... Print

Adding forms to Facebook ( Facebook Developer Method )

Last Update: April 4, 2012


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: http://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: http://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: 



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

You have already voted for this item. Your vote was: 1

17 Comments...
   
white74 (November 08, 2011 at 02:20 AM)

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

See Answer for This Question...

   
resco7 (December 09, 2011 at 04:18 PM)

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

See Answer for This Question...

   
Melissa Beck (January 02, 2012 at 01:11 AM)

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!

See Answer for This Question...

   
webadmin (January 04, 2012 at 02:37 PM)

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.

See Answer for This Question...

   
SaucybyNature (January 06, 2012 at 09:39 AM)

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?

See Answer for This Question...

   
fxr (January 09, 2012 at 03:29 AM)

Facebook have been making some changes to how developers configure their own apps.

I have made a few changes to this guide to try and keep up with that.

Please let me know if there is any problems.

   
welfareinfo (January 26, 2012 at 05:45 AM)

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?

See Answer for This Question...

   
ciara3103 (February 19, 2012 at 01:45 PM)

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..

See Answer for This Question...

   
zuheir (February 23, 2012 at 10:46 AM)

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

See Answer for This Question...

   
fitzyount1 (March 08, 2012 at 01:25 PM)

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

See Answer for This Question...

   
volcano_oo (March 09, 2012 at 11:09 AM)

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!

See Answer for This Question...

   
volcano_oo (March 09, 2012 at 11:11 AM)

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

   
volcano_oo (March 09, 2012 at 11:15 AM)

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

   
ismikhair (March 19, 2012 at 01:12 AM)

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

See Answer for This Question...

   
ubtrueblue (March 23, 2012 at 05:37 PM)

ismikhair - how did you get your form to work

See Answer for This Question...

   
jeanettebmz (March 23, 2012 at 06:00 PM)

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

Jotform Support

   
Angela (May 17, 2012 at 07:45 AM)

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

Send Comment