How to add hyperlink in field labels?

  • Profile Image
    ankit_sharma
    Asked on October 23, 2020 at 09:13 PM

    can you tell me ... how to add hyperlink after as below * -- Click here


    I have shown the arrow please check i want hyper link click here option after that


    1603481320_5f932ee8308de_

  • Profile Image
    Jed_C
    Answered on October 23, 2020 at 09:25 PM

    You can't hyperlink field labels in Jotform, but there's a workaround. You can add a hyperlink using the paragraph field and just move the field closer to the label using CSS.

    You can check my sample screencast here http://shots.jotform.com/jed/vid/2652973.webm.

    You can inject this CSS if you want it added beside the field label of your very last field in the form.

    #id_65 {
      position: absolute;
      top: 1012px;
      left: 833px;
    }

    Just adjust the pixel position according to your preference.

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know if you have any questions or if you need further assistance.

  • Profile Image
    ankit_sharma
    Answered on October 24, 2020 at 03:14 PM

    i want to continue this with my other Dropdown lines. but what is 65 means, how did you get this?

    video which you have shared is not incomplete,, its half cutting video showing. can you record again and send..also show some example for other dropdown lines

  • Profile Image
    VincentJay
    Answered on October 24, 2020 at 06:19 PM

    Hello,

    I checked the video and I didn't see the number 65. Are you referring to the id_65?

    That is the field ID of the form field. Please check this guide on how to find the field ID: https://www.jotform.com/help/146-how-to-find-field-ids-and-names

    There's a chance that the format will not work with different devices (mobile or tablet) because of screen sizes. I suggest trying it to one drop-down menu and test it on different devices and see if there are any issues.

    Also, If you want we can create a feature request that will allow adding a hyperlink to the form labels and forward it to our developers.

    Will that work for you?

  • Profile Image
    ankit_sharma
    Answered on October 25, 2020 at 08:41 AM

    How would i know that, which id_ I need to put in CSS ...i dont see any id in the paragraph .. can you please show me how can we add click here option after this drop down as i have shown in screen, can you please upload video ..add 2 to 3 click here hyper link in dropdown option..

  • Profile Image
    Ariel_P
    Answered on October 25, 2020 at 12:26 PM

    Hi,

    Thank you for contacting Support.

    Sounds like you need to apply the tweak on multiple dropdowns fields. If that's the case, I suggest that you use the Hover Text option instead, to insert your hyperlink.

    16036424982020-10-26 00_10_03.jpg

    The link should appear when users hover on the related field.

    If you need to have the link be always displayed, you can inject this code into your form's CSS:

    .form-line[data-type="control_dropdown"]:not(.always-hidden){
        display: flex !important;
        flex-direction: column;
    }
    .form-line[data-type="control_dropdown"] label {
        order: 1;
    }
    .form-line[data-type="control_dropdown"] .form-description {
        order: 2;
        display: block !important;
        background: none !important;
        font-size: inherit !important;
        color: inherit !important;
        position: static !important;
        visibility: visible !important;
        max-width: unset !important;
        padding: 0px 0 10px 1px;
        margin-top: -5px;
    }
    .form-line[data-type="control_dropdown"] .form-input-wide {
        order: 3;
    }

    Note that the code above is limited to dropdown fields.

    Once applied, it should look something like so.

    16036428032020-10-26 00_10_36.jpg

    Because of the markup's structure, the easiest to place the hyperlink is on a new row after the label, or anywhere after the dropdown field.

    Give it a try and let us know how it goes.

    Related Guide: How to Inject Custom CSS Codes.

  • Profile Image
    ankit_sharma
    Answered on October 25, 2020 at 03:45 PM

    ok thanks, one more question, why we don't see the signature box in PDF format when exported

    why complete format changed after exporting to PDF

    Without PDF


    1603655032_5f95d5782beef_


    PDF Format


    1603655120_5f95d5d0e8e3a_

  • Profile Image
    VincentJay
    Answered on October 25, 2020 at 05:18 PM

    Unfortunately, the Signature field is not supported at the moment.

    1603660635_5f95eb5bc0aa0_vdvg3.png