Header on form not showing up

  • Profile Image
    LYNNPINEDA
    Asked on February 15, 2011 at 06:43 PM

    Good evening. I had sent an email a few days ago regarding a problem that I was having with the form I created and I received an email back from you to let me know that it had been fixed and to resubmit embed code.  I did, and the form itself is fixed now - thank you, however, the Header is not showing up.

    Thank you

    Lynn Pineda

  • Profile Image
    abajan
    Answered on February 22, 2011 at 08:14 AM

    Hello, Lynn. Can you post a link to the page containing the form? We would like to have a look at it. Initially, I thought it was somewhere on the ImagineYourHouse.com site but the form I saw there is not the same as the one in your list.

    Looking forward to your reply so we can resolve this situation soon.

    Thanks.

  • Profile Image
    LYNNPINEDA
    Answered on February 22, 2011 at 11:58 AM

    Hi Abajan,

    The form is on my facebook business page for Imagine Your House. Here it is:

    Imagine Your House Form

    Thanks for your help

    Lynn Pineda

  • Profile Image
    abajan
    Answered on February 22, 2011 at 12:04 PM

    Aye! I think I've spotted the problem. If you look closely enough, the header is indeed there. It just needs to have a different background color. There's a way to adjust that via the Inject Custom Header feature in the Preferences for the form. I've done this for someone already. Let me search for the post and get back to you (hopefully, shortly).

    These are the colors as they appear in your preview. I'm assuming you want the header to look like this?

     

    Okay, there's no guarantee this will work (because I'm yet to test JotForm forms on FB). Nevertheless, open your form for editing in the form builder/editor canvas and navigate your way to the Inject Custom CSS section: Setup & Share tab > Preferences > Form Styles > Inject Custom CSS > insert the following rule set, click Close Settings and save your change:

    Now, click Embed Form and when the Embed Form Wizard pops up, click the Facebook button. Since you already have a form on Facebook (albeit a faulty one that needs to be replaced with the updated code), Static FBML (Facebook Markup Language) would have already been added to your page, so skip step 1. However, by all means, if you need a refresher on how to add a form to a Facebook page, read our User Guide, as suggested. As luck would have it, there's a link there to a video on how to add contact forms to real estate FB pages!

    Now, there's something about which you should be aware: Word on the street for some time now, has been that Facebook was planning to abandon Static FBML in favor of iFrames. Well, on March 11th that will come to past. (Just so you know.)

    P.S. It looks like some sections of the User Guide need updating. Part of that responsibility falls on me because by my calculation, if it's 3:54 p.m. here in Barbados, it's 9:54 p.m. in Turkey and everyone left the building several hours ago! Thankfully, others besides yours truly are in a different time zone to Turkey. I'll do my best.

    UPDATE: Lynn, don't use that code just yet. If used the code will reveal the header's text but it needs some tweaking. Plus, I just realized the entire form's width is wrong for Facebook. (A few months ago, FB reduced the width allowed for user content to just 520 pixels.) I'll get back to you shortly.

    UPDATE: This is proving to be more challenging than I initially thought because FB seems to be exhibiting a rather strange behavior of not really deleting FBML apps when you think they're gone! Weirdness. Somehow, I've always found FB awkward to work with. There's something downright "user-unfriendly" about its navigational setup that's hard to define, IMO.

    Anyway, eventually we'll get the form to look correct.