Add Buy Now button to each product

  • sappoutsource
    Asked on August 31, 2016 at 2:33 PM

    Hello.

    Just wondering if your form builder has the following features hiding somewhere or if we can tweak it to make it work...

    1- Is there away to add "Buy Now" button to each product on the form? Since we're going to add hundreds of products to the form, we are thinking of adding the "Buy Now" button to each products so that users/ buyers will not have to scroll all the way down to the bottom before finding the "Buy Now" button. Please check screenshot here http://prntscr.com/ccm0sg

    2- For the same reason of adding so many products to the form, we would like to have a search feature at least in the backend to be able to search for a product in case we want to edit that particular product.

    3- Is it also possible to have an alphabetical list of the products in the frontend for users/ buyers? Please check sample screenshot here http://prntscr.com/ccm4oh

    Thanks!

  • David JotForm Support Manager
    Replied on August 31, 2016 at 5:21 PM

    This could be possible buy adding a submit button next to each product, however, it would take some CSS coding to accomplish it. Also, each submit button will make the whole form to submit. For example, this is the code that took to place each button next to the two products: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #id_7, #id_8{

        margin-left: 550px;

        position: absolute;

         width: 150px !important;

    }

    #id_8{

        margin-top: 45px !important;

    }

     #id_7{

    margin-top: 0px !important;

    z-index: 1 !important;

    }

    .form-buttons-wrapper{

        margin-left: 0px !important;

    }

    .form-submit-button{

        font-size: 11px !important;

    }

    Result: https://www.jotformpro.com/form/62436001383952? 

    Add Buy Now button to each product Image 1 Screenshot 20

    So, I am not sure if this is exactly what you have in mind. Let us know if you need more help on this.

    On regards of the other two questions, the will be addressed in separate threads: 

    2) https://www.jotform.com/answers/921579 

    3) https://www.jotform.com/answers/921580 

  • David JotForm Support Manager
    Replied on August 31, 2016 at 5:42 PM

    Alternatively,  you could use just one submit button, which you can label "Buy Now", and place it in a fixed position of the screen, example:

    Add Buy Now button to each product Image 1 Screenshot 20  

    All this can be accomplished by injecting custom CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    So, let us know what option you would prefer, we will be glad to assist you.

  • sappoutsource
    Replied on September 4, 2016 at 8:23 AM

    Hi. Unfortunately, after adding the CSS, the "Buy Now" buttons are not showing on the right of each product as the result you sent me. Am I missing something? Screenshot here: http://prntscr.com/cdzp9x

    Thanks!

  • Elton Support Team Lead
    Replied on September 4, 2016 at 11:34 AM

    I think the second solution suggested by my colleague is the best one since the submit button stays on the screen whenever you scroll up and down the page. I think you don't need to add multiple submit buttons since they all work the same anyway.

    To do that, please remove the CSS codes provided by my colleague and inject the following.

    .form-submit-button {

        position: fixed;

        bottom: 0;

        right: 26%;

    }

    Feel free to adjust the 26% right value until you get the right position of the submit button.

    How does it work? Well, it is shown by my colleague on his second screenshot or you can check below.

    Add Buy Now button to each product Image 1 Screenshot 20

    If you have further questions, let us know.