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

    Styling button inside the Text tool

    Asked by teerawee on June 09, 2017 at 11:06 PM

    While the button style is successfully implemented on Thank You Page (with condition), I created another button using "text" tool with this same html:

    <p style="text-align: center;"><a target="_blank" href="http://www.thaibynature.com/export/index.php?route=account/login" rel="nofollow noopener" rel="nofollow" rel="noopener noreferrer"><button type="button"><span style="font-size: 18pt;">ล๊อคอิน เข้าสู่ระบบ !</span></button></a></p>

    But the button style is not applied. Actually the button is not even displayed, but only as a link. 

    So is it possible to apply the same button style I used for the Thank You Page for this button in Text tool, too. 

     

    Here's the caption as reference:  http://board.thaibynature.com/429033

    Here's the form in action: http://www.thaibynature.com/export/intro-form

     

    Thanks again.

  • Profile Image
    JotForm Support

    Answered by Jan on June 10, 2017 at 07:11 AM

    I believe this is the form you're referring to (http://www.jotform.me/form/71367893897479).

    Please take note that HTML button tags will not work in the Text tool. The solution here is to remove the button tags and use custom CSS to make the regular link looks like a button. 

    Please check this demo form: https://form.jotformpro.com/71602836977972. You can just clone it if you like.

    Follow this guide to resolve the issue:

    1. In the Form Builder, select the "Text" tool and then click the "Edit Text" button. In the Editor, click the "Source Code" button. Erase the button and span tags (opening and closing). Click "OK" and save the changes. Here's a screen capture:

    2. After that, please inject this CSS code. This CSS code targets that specific link only. It'll make the link look like a button.

    #text_177 p a {
     background-color: #C63702;
     background-image: linear-gradient(167deg, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0) 55%), linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0));
     border-radius: 6px;
     box-shadow: 0 0 0 1px #C63702 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #AD3002, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
     color: #FFF;
     display: inline-block;
     font-family: "Lucida Grande", Arial, sans-serif;
     font-size: 22px;
     font-weight: bold;
     height: 61px;
     letter-spacing: -1px;
     line-height: 61px;
     margin: 30px 0 10px;
     position: relative;
     text-align: center;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
     text-decoration: none !important;
     top: 0;
     -moz-transition: 0.15s;
     -o-transition: 0.15s;
     -webkit-transition: 0.15s;
     transition: 0.15s;
       outline:none;
       border:none;
       cursor:pointer;
    }

    #text_177 p a:hover, #text_177 p a:focus {
     background-color: #D13902;
     box-shadow: 0 0 0 1px #C63702 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 10px 0 0 #AD3002, 0 10px 0 1px rgba(0, 0, 0, 0.4), 0 10px 8px 1px rgba(0, 0, 0, 0.6);
     top: -2px;
    }

    #text_177 p a:active {
     box-shadow: 0 0 0 1px #AD3002 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 1px rgba(0, 0, 0, 0.4);
     -moz-transform: translateY(10px);
     -ms-transform: translateY(10px);
     -webkit-transform: translateY(10px);
     transform: translateY(10px);
    }

    3. Save the changes and verify the result:

    Hope that helps. If you have any questions, let us know. Thank you.

  • Profile Image

    Answered by teerawee on June 10, 2017 at 09:10 AM

    Issue resolved. Appreciated your help.