Styling button inside the Text tool

  • Profile Image
    teerawee
    Asked 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
    Jan
    Answered 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
    teerawee
    Answered on June 10, 2017 at 09:10 AM

    Issue resolved. Appreciated your help.

  • Profile Image
    teerawee
    Answered on August 30, 2017 at 02:55 AM

    ็Hi, 

    I'm having the same issue except this time it's a new text tool on the new form. 

    How can I find the text tool ID so I can replace 

    #text_177 

    to the correct ID for my custom css ?

     

    Here's the new form 

    https://form.jotform.me/72407540402446

     

    Thanks. 

  • Profile Image
    Jim_R
    Answered on August 30, 2017 at 03:22 AM

    The correct ID of that Text Field is #text_197.

    To get the ID of a field (or any DOM element for that matter), you have to inspect it through your browser console.

    Just right click on the field > Inspect > then look for the ID of the container where it resides:

  • Profile Image
    teerawee
    Answered on August 30, 2017 at 03:25 AM

    Thanks a lot for the help and very quick response.