User Guide

 

Adding Forms to Facebook (Static HTML App Method)

Adding Forms to Facebook (Static HTML App Method)

This post outlines how to use the 'Static HTML' application to add your form to a Facebook Page. I will begin by outlining the main pro's and con's of this method.


Pro's
  1. Able to show different content to Fans & non-Fans.
  2. This application is 'whitelabel' i.e the application doesn't watermark your Facebok canvas with its logo.
Con's
  1. Unable to customise the Facebook Tab icon.
  2. Use of a 3rd party application.
If you don't think this method suits your requirements, you can consider the TabPress App Method or the Facebook Developer Method.
----------------------------------------------------------------------------------------------------------------------------------------------------------

I have created my form in JotForm. It's for an imaginary Facebook competition that I want to host on my Facebook Page. This competition will only be open to Facebook users who have 'liked' my Facebook Page.

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

1. Click on the Form Designer icon and then Styles tab to change the form width to 520.



Now, we need to retrieve my Forms' Embed code

2. Click on the Publish tab and then choose Embed section from the left side to get the Form embed code.


3. Visit the Static HTML application page by clicking here

    From the dropdown menu, select the Facebook Page you wish to add your form to.

    Click the Add Static HTML: iframe tabs button.


You will now be brought back to your Facebook Pages' 'landing page', notice a new Tab has been created, 'Welcome' with a star icon alongside. 

Lets change the name of that tab. 

4. Near the top, on the right hand side of your Page, Click the Edit Page button.

 



5. From the left hand side menu, select Apps, then from the Static HTML: iframe tabs field, click Edit Settings.



6. Here, you can give your Tab any name of your choosing, I'm calling mine: 'Static HTML App Form'. Click Save, then Click OK

Now go back to your Facebook Page, by clicking the View Page button in the top right corner. You will see the renamed tab. Click on it. 

You will be presented with the configuration options for this application.

7. Since, I only want my form to be shown to 'Fans' of my Page. I will paste my form embed code, gathered back at Step 1, into the 'Fans Only Content' text area. In the top text area, I will add a message informing users who havent 'liked' my page that they can't enter my competition until they have 'liked' my Page


Click the Save and View tab... button to save your changes. You can use the links presented to inspect how your Pages' Tab looks to Fans and non-Fans

Thats' it! All done! You can inspect the results on Facebook here

Send Comment

13 Comments...

  • AshinagaAAI

    It works for mobile only using the link they give you under the "enable on mobile devices", which sends you to another page, not within facebook. Then what's the point? It's not integrated with facebook at all. Please solve this

  • sona binu

    good!!!!keep it up!!!!!!!!!!!!

  • Luckynumber32

    I am having issues trying to let the official facebook app display my jotform enquiry form, it seems to revert back to facebook everytime I click on the link. also, I don't think its possible to configure tabs in the facebook official app to show custom links/tabs.. or is This possible?

  • pbombeo76

    I tried this and it worked fine in my laptop but it didn't in iphone (5).
    It worked though in iPad but only in Safari and not in facebook app.
    Here's the URL of what I did:
    https://www.facebook.com/imgjapan?sk=app_190322544333196&app_data

    Did I do something wrong?

    Thanks in advance.

  • anonymous

    where will the form be sent after filling it up?

  • campusconnectt

    it does'nt work.Facebook not accepting the url

  • book joint

    what code should i write in static html in order to link my google form to it

  • mark

    Smartphones these days have the capability to do most of the things that the personal computer does. Smartphones allow you to search online and browse websites. writing services

  • kathryn

    Where does the forms go to after one has clicked on submit form? I tried a few times but was unable to receive any of them

  • reneewarren

    worked for me thank you!

  • redbeardmarketing

    If you use the 'Static IFrame Tab' app instead of 'Static HTML: iframe tabs' then you CAN customise the app icon, which is in my opinion the only 'con' of using third party applications.

  • dheuermann

    this does not seem to be working

  • homme

    If i have more than one form to put in my facebook page can I do it? Please advise

    Regards,