Adding a Form to Facebook Using Custom Iframe App

December 7, 2023

There are multiple custom Facebook tab providers, but Static HTML from Thunderpenny stand best for this method. You can use the app to add a form to your Facebook page without needing technical skills and digging into Facebook’s developer page.

Youtube Embed Poster: DROl7-2Qqx4

Note

You can only add a custom tab if your Facebook page has 2 000 or more likes. Visit Facebook – Page Tabs for more details. If you meet this criterion, please proceed below.

Adding the Iframe App to Your Facebook Page

First, you must add the Custom Iframe App to your Facebook page to create the custom tab for your form. Here are the steps:

  1. Go to Static HTML: iframe tabs.
  2. Click the Add Static HTML to a Page button. The button will open a dialog tab.
Static HTML iframe tabs on Facebook showing tab with a button to add the custom tab
  1. Select the page where you want to add the custom tab from the dialog.
  2. Click the Add Page Tab button at the bottom to finish. The page will redirect you to the chosen page.
Add page tab dialog with dropdown to choose a Facebook page and a button to add the page tab

Adding Form to Your Facebook Page

Since you now have the app installed, let’s proceed with adding the form to your Facebook page through the custom tab added by Static HTML app. Here’s how:

  1. While viewing your Facebook page, click the More dropdown from the list of shown tabs.
  2. Click Static HTML [12] from the list. You can change this label later.
A screenshot of a Facebook page showing the Custom Iframe app
  1. Click the Setup tab button. The button will open the Static HTML website to set up the tab.
Facebook page showing the Static HTML app with a button to set up the tab
  1. Grab your form’s iframe embed codes.
  2. Paste the iframe codes to the index.html box.
  3. Click the Save and Publish button at the top part of the page. You should have the form added this time. Go back to the custom tab of your Facebook page to confirm.
Static HTML website showing the embed box and the save & publish button

Editing the Custom Tab Name

Facebook hides the option to edit the tab name from your page’s view and settings, but you can still do it with a single parameter added to the vanity URL of your Facebook page. This one’s a bit tricky, but as long as you follow the steps, you should be able to change the tab name or label. Let’s do it!

  1. Append the parameter settings/?tab=apps to your Facebook page URL. The URL should look like the following:
https://www.facebook.com/{your_page}/settings/?tab=apps
  1. Click Edit Settings from the Static HTML app. The link will open a small popup.
Facebook page settings showing an option to edit a custom tab name
  1. Enter your Custom Tab Name.
  2. Click the Save button. There is a small loading icon as an indicator. If it stops loading, that means Facebook saved the changes.
  3. Finally, click the Okay button to close the popup. Visit your page to confirm the changes.
A screenshot of a Facebook tab settings showing the custom tab name

Removing the Custom Tab

You can easily remove the custom tab by appending same URL parameter settings/?tab=apps to your Facebook page URL but this time, do the following:

  1. Click the X icon on the far right side of the custom tab.
  2. Click the Yes button to confirm. That’s it!
A screenshot of a Facebook apps with steps on how to remove an app

Adding a New Custom Tab

Facebook does not allow you to add the same iframe app twice on the same page, but Static HTML has reserved apps for doing this. Go to Thunderpenny – Add Tab to learn more.

Editing the Custom Tab

If you want to change the form, you must edit the custom tab. To edit:

  1. Access the custom tab added by the Static HTML app.
  2. As an admin of the page, you should see the Edit App button at the top of the form. Click it. The button will redirect you to Static HTML website, where you can update the tab settings and change the embed codes.
Adding a Form to Facebook Using Custom Iframe App Image-1

Below are also a great alternative of the Static HTML app:

If you are stuck with any of the steps above or have further questions about this guide, feel free to post them in the comment box below.

Push Notifications for Jotform Apps
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:

  • ZJ - Profile picture
  • ramrattan - Profile picture
  • Shakoure Charpentier - Profile picture
  • jh99 - Profile picture
  • Alan Lee - Profile picture
  • cihangir - Profile picture
  • sean.laf - Profile picture
  • Ayush jha - Profile picture
  • MichaelJohnAinslie - Profile picture
  • Riad Ahmed - Profile picture
  • Lekhraj Meena  - Profile picture
  • Ali - Profile picture
  • unamh - Profile picture
  • Mtr - Profile picture
  • cropina - Profile picture
  • Ovas - Profile picture
  • bzalphanav2015 - Profile picture
  • mainelostcatrecovery - Profile picture
  • OrthoOne - Profile picture
  • evelyn sanders - Profile picture
  • baysidejournal - Profile picture
  • abdallha - Profile picture
  • Romario0 - Profile picture
  • artistwebsite - Profile picture
  • alliphil - Profile picture