I just created a click to call button for mobile use. Here is my code that I want to share in case someone else needs to do this.
I assume the field name is called Phone.
1st, make a second instance of the Phone field. One will show for desktop and one will show on mobile and be clickable.
View as Custom for the one you want clickable.
return "<a class="
+ '"'
+ "btn btn-primary btn-xlg"
+ '"'
+ "href="
+ '"'
+ "tel:"
+data["Phone"].ToString()
+ '"'
+ "style="
+ '"'
+ "padding:10px;background-color:rgba(38, 90, 136, 1)"
+ '"'
+ ">"
+ "Click to Call <span class="
+ '"'
+ "glyphicon glyphicon-earphone"
+ '"' + "style="
+ '"'
+ "padding-left:5px; padding-right:5px;"
+ '"'
+ "></span>"
+ data["Phone"].ToString()
+ "</a>"
In the editor - HTML mode, add the following classes to each phone field. This will make the clickable version to show only on mobile devices and the other show on desktop.
Add hidden-lg hidden-sm hidden-md to class for the Phone field you want to show as clickable.
Add hidden-xs to class for the Phone field you want to show as text.
Example as to how it should look.
{BEGIN Phone_tabfieldblock}
<DIV class="container">
<DIV class="form-group in-tab hidden-lg hidden-sm hidden-md {$fielddispclass_Phone}" data-fieldname="Phone">
<LABEL class="col-md-3 text-right">
{$label dbo_ServiceProviders Phone}
</LABEL>
<DIV class="col-md-6 fieldvalue_Phone">
{$Phone_value}
</DIV>
</DIV>
</DIV>
{END Phone_tabfieldblock}
{BEGIN Phone1_tabfieldblock}
<DIV class="container">
<DIV class="form-group in-tab hidden-xs {$fielddispclass_Phone1}" data-fieldname="Phone1">
<LABEL class="col-md-3 text-right">
{$label dbo_ServiceProviders Phone1}
</LABEL>
<DIV class="col-md-6 fieldvalue_Phone1">
{$Phone1_value}
</DIV>
</DIV>
</DIV>
{END Phone1_tabfieldblock}