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

    What's the best way to add a responsive image with "href=tel" to my form?

    Asked by MaidCrew on November 22, 2016 at 03:31 PM

    Is it possible to apply css to allow for "tap to call" on an image element?

    I know you can apply a link but I've not been successful in applying href telephone code (html)

    I also know this can be done using a text field but here's my problem....

    Whether I use an image or text field, I'm hiding the element (through css) for anything over 415px wide. So, it's hidden on tablets & desktops but shows up on phones to allow viewers to tap image to dial our number..... but again, I can't apply html to the image through the image settings.  I like using image because it automatically scales the image down to the appropriate viewport regardless of what phone their on.... so it's the auto-scaling I'm after for media less than 415px wide.

    If I use an image within a text field/element, I can apply the href telephone coding but I don't know if I should then be trying to use html or css for making the image scale based on viewport for anything under 415px width.

    Which direction should I go & can you help?

    1. Do I go with image element & hope you have css rules for allowing me to apply an href telephone# tag

    or

    2. Do I go text field, apply href tag to image src and then use CSS to ensure image scales to proper viewport / dimensions for everything under 415px width?

    Thanks

     

    Page URL:
    https://form.jotform.com/61794097469170

    telephone href text field CSS image element format
  • Profile Image
    JotForm Support

    Answered by Kevin_G on November 22, 2016 at 06:11 PM

    When using the image field you will not be able to add the telephone number, it will only alloy you to add a link to the image in the "href" property. 

    What you will need to do is to use the Text field, and to achieve what you want, have the image responsive and show it only when viewing the form on a mobile device then you could inject this CSS code: 

    #id_10 img{

        width: 100%;

        height: auto;

    }

     

    #id_10{

        display: none;

    }

     

    @media screen and (max-width: 480px){

        #id_10{

            display: block;

        }

    }

    "#id_10" is the ID of the <li> element where the image field has been added, the ID will change depending on the field you have added, in the case of the form you shared it is the shown in my code, but if you want to find it just right click on the field and select the option "Inspect", once there go to the <li> element and copy the field's ID: 

    This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    Here's also the link to my testing form where I have applied the given code, you can take a look on the result: https://form.jotform.com/63266817880971 

    Please do let us know if you have any question.