What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Alignment of buttons for Facebook

    Asked by miskiswap on September 02, 2012 at 04:37 PM

    Hi,

    Previously you helped me with alignment of the buttons for my document for the website.  and IT LOOKS GREAT!!!!  You also gave me the CSS for Facebook.  Both the codes were the same.  So the button (Print Form") on the facebook page hangs off the page.

    Can you take a look at the code.  I tried to adjust the numbers but nothing changed.

    #cid_53 .form-label-left {

    width:0 !important;

    }

    .form-pagebreak > .form-button-error {

    position: relative;

    top: 30px;

    left: -50px;

    }

    .form-button-error{

    display:block !important;

    }

    .form-buttons-wrapper{

    margin-left: 255px !important;

    position: absolute;

    margin-top: 20px;

    width: 400px;

    text-align: right;

    }

    Page URL:
    http://form.jotform.us/form/22395670814155

    Screenshot
  • Profile Image
    JotForm Support

    Answered by jonathan on September 02, 2012 at 06:26 PM

    Hi,

    You can use this value instead for the .form-buttons-wrapper class... the buttons are actually #cid_33

    #cid_33 {

    margin-left: 105px !important;

    position: absolute;

    margin-top: 20px;

    width: 400px;

    text-align: right;

    }

     

    I tried it on a clone of your form here.

    Please inform us if this work.

    Thanks.

  • Profile Image

    Answered by miskiswap on September 03, 2012 at 01:18 AM

    I exchanged your CSS with what I had.  the buttons stack now. 

    I cloned your form and copy and pasted your CSS.  on my form it still stacks.  I can't figure it out.  I even changed "cid_53" to "cid_33" and the buttons still stack.  I'm stumped.  I cannot figure out why your buttons on the cloned form do not stack.

    do you have any ideas?

  • Profile Image
    JotForm Support

    Answered by jonathan on September 03, 2012 at 02:46 AM

    It seems the difference was in the alignment of the button. You can see this in the property(on top). In my form, the submit buttons group was set to Right... yours was Auto.

    I cloned again you latest form here. (see it does not stack now). 

    Also due to the fix height you coded in the CSS(the very 1st code).. this one.

    .form-all {

    height:2200px

    }

    You might have problem getting to buttons when in edit mode...

    What you can do is, comment out that code first...

    /*.form-all {

    height:2200px

    }*/

    .form-matrix-values {

    padding-left: 8px;

    padding-right: 8px;

    }

    then, the buttons, should now occupy the form editor and you can now change its align property.
    After doing that, just uncomment the CSS code again and save your form. Then test.
    Hope this help. Please inform us if you still encounter difficulty on this.
    Thanks.

     

  • Profile Image

    Answered by miskiswap on September 03, 2012 at 03:06 AM

    I used the ".form-all {height:2200px} to try to get rid of the white space on the webpage.  I forgot to delete it from the facebook form.  I will do that now.

    The "Next" button now does not appear on the facebook form on Pages 1 and 2.

    I also have to say I am TOTALLY amazed at how quickly you responded. I've been telling a lot of people about your customer service and OBVIOUSLY about JotForm. 

     

  • Profile Image
    JotForm Support

    Answered by jonathan on September 03, 2012 at 03:26 AM

    Hi,

    I am not sure if I understand you correctly... but I can see the Next button on your page.

    Please inform us if still not resolve.

    Thanks.

  • Profile Image

    Answered by miskiswap on September 03, 2012 at 03:43 AM

    http://www.facebook.com/pages/MI-Ski-Swap/271165326325979?sk=app_190322544333196

    on the website, it does appear.  but on facebook, it does not.

  • Profile Image
    JotForm Support

    Answered by jonathan on September 03, 2012 at 03:51 AM

    It seems they are not the same form..

     

    The one in facebook still behave like the previous form. You may have to re-embed the fixed form to your facebook page again.

    Thanks.

  • Profile Image

    Answered by miskiswap on September 08, 2012 at 02:45 AM

    I went in and exchanged the iframe code in facebook.  the "Next" button shows up under the "submit" button or it peaks out from under the "submit" button on the facebook page.  can you help?

     

     

     

  • Profile Image

    Answered by miskiswap on September 08, 2012 at 02:52 AM

     

  • Profile Image

    Answered by ItalyTech on September 08, 2012 at 03:14 AM

    Hi miskiswap, unfortunately your screenshot is in your local side (localhost). Please upload this screenshot on Imageshack.us or similar images hosting and share with us direct image link. Thanks. Alessandro

  • Profile Image

    Answered by miskiswap on September 08, 2012 at 03:34 AM

    http://img585.imageshack.us/img585/987/screenshot20120908at123.png

    i just signed up for imageshack.us.  

  • Profile Image
    JotForm Support

    Answered by idarktech on September 08, 2012 at 06:40 AM

    @miskiswap

    Add this CSS codes to your form so pagebreak buttons would move slightly to the left.

    #cid_53 .form-label-left{

    width:0 !important;

    }

    Result should be like this:

    Thanks!

  • Profile Image

    Answered by miskiswap on September 10, 2012 at 02:37 PM

    This worked!  Thank you!