Page Break: SUBMIT and BACK buttons not aligned

  • Profile Image
    antoniooi
    Asked on March 28, 2012 at 04:06 AM

    As the JotForm page break for last page has only the BACK button, we need to add the SUBMIT button mannually, but only above the BACK button instead of side-by-side. This is definitely not well presented to our clients. For example:

    Page 1:

    [ BACK ] [NEXT ]

    Page 2:

    [ FINISH ]
    [ BACK ]

    instead of:

    Page 2:

    [ BACK ] [ FINISH ] 

    Frankly speaking, I feel that this is a design problem as I noticed that JotForm is able to detect 'last page' by not showing the 'Next' button when the last page does not contain any page break. If this is the case, why don't you OPTIONALLY make the last-page NEXT button as SUBMIT button instead of hidding it? You can just allow the users to go to the page break properties and have the following options:

    1. Show BACK button at last page. (Y/N)

    2. Show SUBMIT button at last page. (Y/N)

    Meanwhile, as usual, the SUBMIT button text and style can still be further customized. Isn't this beautiful? Using CSS to hide the BACK button may not make sense all the time when we really need to allow the users to go back to the previous page before the final submission.

    I hope JotForm can provide this improvement in the very near future as I almost planned to go for the Premium Package of JotForm due to the launching of our upcoming new online service:

    http://www.malaysiatraining.net/2012/03/internet-marketing-training-providers.html

    Any response would be appreciated. Thank you.

    Antonio

  • Profile Image
    fxr
    Answered on March 28, 2012 at 04:24 AM

    Hello Antonio,

    Thanks for the new thread, it really does help. 

    Did the CSS I offerered in a different thread for the form http://www.jotform.me/form/20861896853467 not resolve this problem for you?

  • Profile Image
    antoniooi
    Answered on March 28, 2012 at 04:53 AM

    Wow! Looks cool now! Thanks a lot! :D

    But I still hope that JotForm can take my above suggestion into consideration to improve your product quality and services. Note that the workaround solution in my other post is not full-proof as everytime you change the content, which affects the height of the body, the button alignment will be out again and you'll need to recalculate the CSS top position again. Also, you need to repeat this unprecise calculation again on every other form that requires such feature, e.g. for my next Corporate Subscriber Sign-up Form.

    But again, thanks a lot for the workaround! :)

    Antonio

  • Profile Image
    abajan
    Answered on March 28, 2012 at 07:36 AM

     

    Thanks for that suggestion, Antonio. It makes perfect sense to have the Next button be shown on the last page and act as the submit button. As such, I will forward the idea to our development team.

    Now for the bad news: Although the workaround offered by my colleague looks super in Chrome 17, it doesn't in Firefox 11:

    Tests at BrowserStack.com showed that the misalignment occurs in some other browsers as well.

    The only surefire way I can think of to ensure proper alignment in every browser in every situation, would be to use the full source and insert a Next button (with the text "Sign Me Up Now!" and a type="submit" attribute) in line with the last Back button. The original submit button could always be either hidden or removed. However, upon viewing the form's source, it appears to me that this feat may be trickier to accomplish than it sounds. I'll have to do some experimentation and get back to you.

    Interestingly enough, initially I discovered that in Firefox 11 once the full source is used, the original buttons align themselves correctly without any need for alteration to the code, as shown below:


    Unfortunately, I later found out that this simple fix doesn't work for every browser.

  • Profile Image
    antoniooi
    Answered on March 28, 2012 at 08:51 AM

    Oh gosh.....really appreciate your proactive thinking and support!

    Well....in that case, can we make both the wrapper of BACK and SIGN ME UP! button with exact same absolute position through CSS? Any chance for me to find out the CSS class name of the last page BACK button?

    By the way, I just changed it to use absolute position rather than relative position just for the sign-up button and it works pretty well on my Firefox 12 Beta:

    .form-buttons-wrapper{

    position:absolute;

    top:40px;}

    Can you please test it at your side or perhaps you might have another concern about this implementation? Thanks again!

    Antonio

  • Profile Image
    abajan
    Answered on March 28, 2012 at 09:34 AM

    Yes, that works well in all browsers I've tested thus far.

  • Profile Image
    antoniooi
    Answered on March 28, 2012 at 09:41 AM

    Thanks abajan! I'll go ahead with this solution at the moment then.

  • Profile Image
    antoniooi
    Answered on March 30, 2012 at 09:43 AM

    After integrating with Facebook, however, the following issue appears:

    It seems like the Facebook login button was not being updated even though I have logged on to my FB. I suspected this because the form still allowed me to submit and my FB account info was still being submitted as well. This shows that the form is capable of detecting my FB logon but the login button still remain there.

    Another possibility could be that -- the sign-up button (SUBMIT) no longer covered by the FB login after applying my custom CSS shown in our earlier discussion. But since I have already logged on to FB, it should not be there anyway.

    Please let me know if there is any solution for that and whether I should move this topic to a new thread.

    Thanks.

    Antonio

  • Profile Image
    fxr
    Answered on March 31, 2012 at 03:16 PM

    Can you just experimenting with manipulating the css of the parent div?

    e.g 

    something like should get it close to how you want it to look regardless of what submit button is on the form. 

    #cid_94{position:absolute;top:35px!important;}

  • Profile Image
    antoniooi
    Answered on March 31, 2012 at 03:33 PM

    It's ok fxr because I don't have much time to experiment it as the date to launch this service is drawing near and I still have much to get it done. My current workaround to allow the faces to be shown, which is way better than confusing the users with the FB login button state. So now I can still keep the same CSS solution for the BACK and SUBMIT buttons alignment.

    I had tested the full cycle of this FB + PayPal integration and everything seemed work fine except that the 'Thank you' screen might be skipped if the users decided to close the PayPal window or do not aware that they can actually click on the 'Back to OTK Web Solutions' link on PayPal to go back to the 'Thank you' page.

    Thanks for the support!

    Antonio

  • Profile Image
    fxr
    Answered on March 31, 2012 at 03:40 PM

    Hi Antonio,

    OK, glad to hear you have managed to arrive and some kind of happy solution. 

    Just a quick note, you can enable something called 'auto return' on your paypal account. 

    Look it up on the forum or in google, instructions should be easy enough to find. 

    --

    In summary, your form user shouldnt need to click that link back to your site on Paypal if your paypal account is configured in the right way. If you can't work it out, post a new thread :) and we will dig out those instructions for you. 

    All the very best with your launch. 

  • Profile Image
    antoniooi
    Answered on April 01, 2012 at 02:40 AM

    Thanks for the tips man! I'll try it out later. If I can't make it work, I'll post another new thread.

    Thanks!

  • Profile Image
    kevinponeill
    Answered on July 02, 2012 at 04:18 AM

    Thanks for this thread. You guys are amazing! :)

  • Profile Image
    Anu
    Answered on February 14, 2013 at 03:00 AM

    How to align 2 buttons on the same line. I have use

    <div id="center"> but buttons are not getting aligned. so plz help me soon.....

  • Profile Image
    abajan
    Answered on February 14, 2013 at 07:00 AM

    Hi Anu,

    Could you please open a new thread titled How Do I Horizontally Align Buttons and in the body of the post provide the form's URL. If the form is embedded in a web page, provide that page's URL instead.

    Thanks.


    Wayne