Forums: Clickable Phone Number - Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Clickable Phone Number

#1 User is offline   jadach 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 421
  • Joined: 26-April 08

Posted 30 September 2018 - 07:32 PM

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}

-jerry
0

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic