How can I customize a hyperlink button?

  • Profile Image
    kirstyconnect
    Asked on August 31, 2017 at 09: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 target="_blank" href="http://www.jotform.com" ><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!

  • Profile Image
    Nik_C
    Answered 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!

  • Profile Image
    Nik_C
    Answered on September 01, 2017 at 01:45 AM

    Thank you for your patience.

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

    And this is how the code from the Text field:

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

    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;

    }

    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!