Question

My iframe code is set up as such

<iframe 
    src="
          https://www.facebook.com/plugins/registration
          ?client_id=
          &redirect_uri=
          &fields=
          [
            {'name':'name'},
            {'name':'email'}, 
            {'name':'phone', 'description':'Your Phone Number','type':'text'},
            {'name':'available','description':'When are you available?'}
          ]
        "

    scrolling="auto"
    frameborder="no"
    style="border:none;"
    allowTransparency="true"
    width="100%"
    height="400">
</iframe>

And it works great, no problems with functionality. My problem is that the input boxes are coming out the edge of the iframe, which I do not want.

I’m building my site responsively, so the container is resizing and on mobile browsers (portrait view) it looks like this

Is there any way to style this plugin so that instead of having it like this

I could have it

Name of Field
[input]

etcetc?

Or will it be easier to have an option to just go to a new page/load up a facebook popup with the registration form in it?

Answer 1

While the iFrame method does not offer clean resizing at widths narrower than ~340px, the XFBML integration should better handle narrow widths down to 260px, and will allow the labels and fields to be on separate lines as you described. See the XFBML section of the Registration Plugin Docs for more detail.

Sample code is included below, as well as a screenshot of this flow in FF13.

<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js#appId={YOUR_APP_ID}&xfbml=1"></script>
<fb:registration 
  fields="[{'name':'name'},{'name':'email'}, {'name':'phone', 'description':'Your Phone Number','type':'text'},{'name':'available','type':'text','description':'When are you available?'}]" 
  redirect-uri="https://developers.facebook.com/tools/echo/"
  width="260">
</fb:registration>