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

    Add Buy Now button to each product

    Asked by sappoutsource on August 31, 2016 at 02: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!

    product Buy Now Form Builder check backend
  • Profile Image
    JotForm Support

    Answered by BDAVID on August 31, 2016 at 05: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? 

    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 

  • Profile Image
    JotForm Support

    Answered by BDAVID on August 31, 2016 at 05: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:

     

    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.

  • Profile Image

    Answered by sappoutsource on September 04, 2016 at 08: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!

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 04, 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.

    If you have further questions, let us know.