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

    Cant seem to align the Previous and Next buttons to the right? and cutting off.

    Asked by snaplash on September 11, 2014 at 03:41 PM

    My buttons keep getting cut off - I am using the iframe code in my muse site and it will not allow me to position the buttons at 600px from the top.  custom css is below:

    .form-pagebreak {

    background: transparent !important;

    }

    .form-pagebreak-next

    {

    box-shadow: none !important;

    border: none !important;

    display:block;

    position:fixed !important;

    top:550px !important;

    float:left;

    margin-left:20px;

    background:url("http://snaplashwebsite.com/snaplashassets/next.png") no-repeat  !important;

    width:178px !important;

    height:80px !important;

    }

    .form-pagebreak-back

    {

    box-shadow: none !important;

    border: none !important;

    display:block;

    position:fixed !important;

    top:575px !important;

    float:left;

    margin-left:20px;

    background:url("http://snaplashwebsite.com/snaplashassets/previous.png") no-repeat  !important;

    width:178px !important;

    height:80px !important;

    }

     

     .form-all input,select {

    border: 3px solid #c7c7c7;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 14px;

    width: 140px;

    }

    Please, any help you can provide is most appreciated.

     

    Thank you

     

    mark

    Page URL:
    http://snaplashwebsite.com/section2.html

    next and iframe code height float
  • Profile Image

    Answered by BaneD on September 11, 2014 at 04:29 PM

    Hi Mark

    I took a look at your page. From what I see you would need to add this to your CSS to position it at 600px

    .form-pagebreak-next, .form-pagebreak-back
    {
       top: 600px; !important;
    }

    I think that I would go with 400px instead as that would show them right under the last drop box, unless you will be adding more to it. Do add this line of CSS under the others, or together with the other parts of the code.

    When inspecting your code, I do see that you have already included this (I am marking it with bold) so you should try changing those numbers to see what works for you best, but there is one other thing that you can do (I am adding it after CSS code).

    .form-pagebreak
    {
    background: transparent !important;
    }

     

    .form-pagebreak-next
    {
    box-shadow: none !important;
    border: none !important;
    display:block;
    position:fixed !important;
    top:550px !important;
    float:left;
    margin-left:20px;
    background:url("http://snaplashwebsite.com/snaplashassets/next.png") no-repeat  !important;
    width:178px !important;
    height:80px !important;
    }

     

    .form-pagebreak-back
    {
    box-shadow: none !important;
    border: none !important;
    display:block;
    position:fixed !important;
    top:575px !important;
    float:left;
    margin-left:20px;
    background:url("http://snaplashwebsite.com/snaplashassets/previous.png") no-repeat  !important;
    width:178px !important;
    height:80px !important;
    }

     

     .form-all input,select
    {
    border: 3px solid #c7c7c7;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 14px;
    width: 140px;
    }

    OK, so this next solution would be to change the iframe size. So once you get the forms iFrame embed code (which would look similar to this one):

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/42526618364357" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no"></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>

    All you need to do is to change the height of the form (marked with bold above) to add few more pixels so that your buttons do not get cut off..

    You seem to know your way around based on the CSS that you have posted, so I think that you will know how to do this, but do let me know if you need any extra help.

    I would appreciate if you let me know if it works for you :)

  • Profile Image
    JotForm Support

    Answered by Kiran on September 11, 2014 at 06:54 PM

    I just cloned your form and see that there is a difference in CSS code that you provided here. It seems you were able to position the buttons from the top and you want it to align to the right position. Please change blue colored values from the below in your custom code.

    .form-pagebreak-next{

    box-shadow: none !important;border: none !important;

    display:block;

    position: absolute;

    right: 350px;

    background:url("http://snaplashwebsite.com/snaplashassets/next.png") no-repeat  !important;

    width:178px !important;

    height:51px !important;

    }

     

    .form-pagebreak-back{

    box-shadow: none !important;border: none !important;

    display:block;

    position: absolute;

    left: 350px;

    background:url("http://snaplashwebsite.com/snaplashassets/previous.png") no-repeat  !important;

    width:178px !important;

    height:51px !important;

    }

    You can change these values as per your requirement. You can take a look at the demo form here. If you are looking for something different, please get back to us. We are happy to assist you.

  • Profile Image

    Answered by snaplash on September 11, 2014 at 07:08 PM

    I am still having issues on it cutting off the button at the bottom. I cant figure what I am doing wrong?

     

    Thank you both so much for the help so far.

     

    Attached is the copy of the iframe code.

     

    Also, Its easier to see here:

     

    http://hanky.businesscatalyst.com/index.html

  • Profile Image

    Answered by snaplash on September 11, 2014 at 07:09 PM

    Also I will not mess with it right now :-)

  • Profile Image
    JotForm Support

    Answered by Kiran on September 11, 2014 at 07:35 PM

    Could you try embedding only iframe code omitting everything in <script></script> tags to see if that resolves the issue? 

    Also, I see that the changes to align are not reflecting on the form. Please make the changes from the injected Custom CSS code of the form. If the issue still persists, please reply to this post including a screenshot along with the embedded URL.

    Thank you.

  • Profile Image

    Answered by snaplash on September 11, 2014 at 10:34 PM

    it works, thank you! as always the jotform team business model works!

     

    thank you thank you thank you!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 12, 2014 at 02:27 AM

    Hello snaplash,

    On behalf of my colleagues, you are welcome.

    Do get back to us if you have any questions.

    Thank you!