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

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

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.