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

    I'd Like to Show a "Buy Now" Button on My Website

    Asked by stevenkessler on March 24, 2016 at 12:26 AM

    I really like the forms I can make here and plan to use them to sell products and workshop registrations on my websites.  But of course, I want one improvement.

    On my website, I'd like to show a Buy Now button, but don't see how to generate a button, only a link.  

    I like the Submit button you have at the bottom of your forms, especially after I customize it.  Is there a way I can generate a similar button to put on my website to trigger your popup form?

    BTW, the Post Question button at the bottom of this page is very close to what I want.  Just want to change the background color.

    many thanks,

    Steven

    a Buy Now POST thanks and trigger
  • Profile Image
    JotForm Support

    Answered by Chriistian on March 24, 2016 at 01:37 AM

    Do you mean you want to add a button in your website that will display a pop-up form created in JotForm? If so, you can embed the form you created in JotForm by using the Lightbox embed code or Feedback Button embed code.

     

    For more information, you can check these articles: How to Create a Lightbox Form and Creating a Feedback Button.

    Sample Demo of Lightbox Form:

     

    Sample demo Feedback Button Form:

     

    Do let us know if you need further assistance.
    Regards.

     

  • Profile Image

    Answered by stevenkessler on March 25, 2016 at 12:03 AM

    Thank you, Christian.

     

    For some reason, the Lightbox solution only creates a line of hyperlinked text, not a button.  It should be creating a button, right?

     

    The Feedback Button solution does create a button, but it isn't anchored on the page.  Instead, it floats against one edge of the browser frame.

     

    Any sense of how to fix either of those problems to get what I want?

     

    Many thanks,

    Steven

  • Profile Image
    JotForm Support

    Answered by mert on March 25, 2016 at 04:31 AM

    Hi Steven,

    To change link into a button you need to add the "<button>" tag on your Lightbox embed code. Below, you can see the customized code and also, you can directly use it on your webpage:

     

     <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_60824339969167 = new JotformFeedback({ formId: '60824339969167', base: 'https://form.jotform.com/', windowTitle: 'EFT Level 1 Registration', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script>   <button type="button"><a class="btn lightbox-60824339969167" style="margin-top: 16px"> Buy Now </a></button>

     

    As it is seen from the above, I added the green parts on it. If you want we can add some rules to change the button's appearance. Please, don't forget to let us know the results.

     

    Regards.

  • Profile Image

    Answered by stevenkessler on March 25, 2016 at 11:11 AM

    Thanks very much.

    That does create a button on the page where I want it.  For some reason, I'm unable to affect the background or font colors by changing the hex codes  --  is there a new wrinkle preventing that?

    Also, I notice that you're using single quotes around each attribute, instead of double quotes.  Any significance to that?

    thanks,

    Steven

  • Profile Image
    JotForm Support

    Answered by mert on March 25, 2016 at 11:45 AM

    Steven, you are most welcome. First of all, using single or double quotes doesn't change a thing, so you don't need to take it seriously, it just a easier way to add quotes on my keyboard.

    If we come to the main question, you can style the button by adding rules into <button> HTML tag. Please, see it from the below:

     <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_60824339969167 = new JotformFeedback({ formId: "60824339969167", base: 'https://form.jotform.com/', windowTitle: 'EFT Level 1 Registration', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script>

    <button type="button" style="border: 5px solid grey; width:100px; height: 50px; background-color: #aea9a9; font-family: 'Arial Black'; font-weight: bold; font-size: 15px; color: white;"><a class="btn lightbox-60824339969167" style="margin-top: 16px"> Buy Now </a></button>

     

    As it is seen from the above, you can add the CSS rules between style="...". Also, you can see the results from the below:

     

    If you need any extra information, please do let us know.

    Regards

  • Profile Image

    Answered by stevenkessler on March 25, 2016 at 02:27 PM

    Gradually, I am getting the hang of HTML.  Your answer gave me the key I needed.  Plus a web search for the exact format of 'border-radius: 10px;'

    That did it.  Thanks so much for your help.

    I'm now here, and this also gives me confidence that I can convert to using JetForm on all my websites, because any future glitches will get resolved.

    Steven

  • Profile Image

    Answered by Huberson on March 25, 2016 at 03:16 PM

    We really happy to hear that! Whenever you need assistance feel free to contact us.