JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
I'd Like to Show a "Buy Now" Button on My WebsiteAsked 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.
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.
Sample Demo of Lightbox Form:
Sample demo Feedback Button Form:
Do let us know if you need further assistance.
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?
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:
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.
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?
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:
<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.
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.
We really happy to hear that! Whenever you need assistance feel free to contact us.