How do I align my form right in a Facebook landing page?

  • Profile Image
    socialdivas
    Asked on March 27, 2013 at 10:49 PM

    Hi there, I'm trying to position my form to the right of my Facebook landing page.

    The page is here - https://www.facebook.com/avocaconsultants?sk=app_208195102528120

    Here's the code for the form that I have:

     

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.co/form/30858290077864" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no" align="right"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    I've put in align="right" and thought that would do it, but it stayed the same, centred.

  • Profile Image
    socialdivas
    Answered on March 27, 2013 at 11:11 PM

    I just read an answer to another question where a mod said to add:

     

    .form-all {

    float: left;

    }

    (Obviously I change it to right)

     

    So add that code into the css bit in the preferences section of the form editor.

    I did that, now it seems the form is hidden?
    I can see a little bit of it on the maroon circle.

     

  • Profile Image
    EltonCris
    Answered on March 28, 2013 at 02:59 AM

    Hi,

    Re-embed your form using only the following iframe embed code.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.co/form/30858290077864" frameborder="0" style="width: 100%; height: 465px; border: none;" scrolling="no"></iframe>

    After that, replace your injected CSS codes to this.

    .form-all {

    margin-right: 30px !important;

    }

    Let us know if you want further adjustments. Thanks!