Thursday, November 18, 2010

Facebook: How to Add a Contact Us Tab

So everyone has a "Contact Us" tab now and I wanted one too soooo I found out how to do it, successfully installed it, and now I want to share with you!

First you need to create a FBML page on your Facebook Fan Page.


2.  Click on "Add to My Page" under their profile picture.

3.  Choose which page you want to add it to.  Click "Add to Page", then close.  If you have multiple pages you won't think that anything happens but your page that you added it to will disappear from the list.  Becareful because I added it to my next page in line by accident.

4.  Now open up your fan page on Facebook and you should now see a tab called FBML 1.  Next you will need to create your contact us form using Jot Form and then we will come back to your FBML page to add the code and instructions will be below.


I found this tutorial but still had to figure a couple of things out so here is some clarification...

1.  Go to http://www.jotform.com/

2.  X out of the pop menu asking to start your new form.

3.  Scroll to the bottom of the page and click "Create an Account - It's Free"

4.  Once you create your account, click on "My Forms" on the top tool bar.

5.  Click on New Form
6.  In the new form wizard choose "Form Samples" and then from the drop down menu choose "Contact Us".

7.  The standard contact us form includes fields for first name, last name, email, message and submit.  At this point now you can edit your form and add additional elements such as drop down menus, radio buttons, etc.



8. Use the form style toolbar to change the font size, font color, background color, and other style changes.

9.  Your form is auto-saved but I would save it one more time.

10. Click on the Setup and Share tab


11. Choose Email Alerts to change the the email address where the submitted form will go to.  Just choose New email.  Here you can choose the email address to receive notifications and email address for an autoresponder email. 

12. Choose Notification if you want to change the subject of the email that is sent to you when someone completes the from and add additional fields.

13. Click "Reply to and Recipient Settings" to change the return address the is sent from.  It will default to a do-not-reply email address at Jotform.  I changed it to my email address so they can reply if they want.
14. You can also "Test Email" from here too.  I did test it to make sure it was coming across like I wanted.

15. You can choose what happens after someone submits your form.  It can go to a Thank You page (either one that you design or a default one from Jotform) or a URL you decide.  Just click the "Thank You" icon to set that.

15. After it is working, now you need to get the code.  Click "Share form" and choose "Advanced Options"


 16. Choose Social Networks from the menu on the left, then choose Facebook.  Click on the code, and press ctrl + a to select all, then ctrl + c to copy.

Now we are going to add this to your FBML application in Facebook!

1.  Go to your fan page on Facebook.

2.  Choose "Edit Page" below your profile picture.

3.  Click on "Applications" on the left menu.

4.  Scroll down until you see "FBML 1".  Choose "Go to Application".

5.  Click in the FBML box and press ctrl + v to paste your code.

6.  You change the wording on your tab in the "Box Title" field.  I just choose "Contact Us".

7.  Save changes and you are set!