How can I customize a hyperlink button?

  • kirstyconnect
    Asked on August 31, 2017 at 9:57 AM

    Hello! I'm currently attempting to add a button with a hyperlink. I found a previous thread recomending inserting the following code: <a href="http://www.jotform.com" target="_blank"><button type="button"> Click here</button></a>

    When I select "ok" it shows up on my form as a button, however when I preview it comes up as an underlined word. I was also wondering how to customise this with different colours etc?

    Thanks for any help!

    Jotform Thread 1236945 Screenshot
  • Nik_C
    Replied on August 31, 2017 at 11:15 AM

    I'm afraid that this is not possible anymore, every code that is added will be stripped down by our builder (that is what is happening when you preview).

    I'll get back to you if I find the working solution.

    Thank you!

  • Nik_C
    Replied on September 1, 2017 at 1:45 AM

    Thank you for your patience.

    The closest I could get to but kept it working on preview as well is this:

    How can I customize a hyperlink button? Image 1 Screenshot 40

    And this is how the code from the Text field:

    <p style="text-align: center;"><a class="button1" href="https://www.jotform.com" target="_blank" rel="noopener noreferrer">Link Button</a></p>

    How can I customize a hyperlink button? Image 2 Screenshot 51

    And this is the code from the Custom CSS Field:

    a:hover{

     border:1px solid black;  

    }

    a{

      background-color: gray;

      color: white;

      border-color: 1px solid black;

      padding: 15px 32px;

    }

    How can I customize a hyperlink button? Image 3 Screenshot 62

    I put the hover effect but you can remove it of course. And the color of the button as well.

    Here is my test form: https://form.jotformpro.com/72431293351956

    Let us know if that could work for you.

    Thank you!