how to add phone hyperlink to form to enable call function

  • mercapix
    Asked on December 12, 2017 at 1:32 PM

    Olá!

    Como faço para criar um link em meu formulário para fazer chamadas telefônicas? Ou seja quando o usuário clicar no link ele automaticamente abre a ferramenta de ligação do aparelho celular?

  • TREVON
    Replied on December 12, 2017 at 2:25 PM

    Unfortunately at the moment you can not be able to add the  <a href="tel:1234567">Call 123-4567 which enables one to add the html call function to a hyperlink which can be detected by phone.

    However other hyperlink types are able to work like for instance you can add the Test which will redirect the page gmail in this example.

  • mercapix
    Replied on December 13, 2017 at 10:29 AM

    Essa é uma função tão simples... Porque isso não esta disponível pra mim?

    Porque sua resposta aparece de forma oculta aqui no Fórum?

  • TREVON
    Replied on December 13, 2017 at 12:20 PM

    Apologies for any inconveniences caused. I have done further research and noted that you can be able to apply the call function only if you are going to make modification on source code which you can use to embed to your website. Kindly note that if you make the changes using the Jotform form builder the tags will be stripped out and will not show at all.

    Below is a source code of a form I have created and added the call function. Kindly check code highlighted in red. Also below is how you can get the source code of your form.

    https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

    <script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
    <script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.3373" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init(function(){
          JotForm.alterTexts({"alphabetic":"This field can only contain letters","alphanumeric":"This field can only contain letters and numbers.","ccDonationMinLimitError":"Minimum amount is {minAmount} {currency}","ccInvalidCVC":"CVC number is invalid.","ccInvalidExpireDate":"Expire date is invalid.","ccInvalidNumber":"Credit Card Number is invalid.","ccMissingDetails":"Please fill up the Credit Card details.","ccMissingDonation":"Please enter numeric values for donation amount.","ccMissingProduct":"Please select at least one product.","characterLimitError":"Too many Characters.  The limit is","characterMinLimitError":"Too few characters. The minimum is","confirmClearForm":"Are you sure you want to clear the form?","confirmEmail":"E-mail does not match","currency":"This field can only contain currency values.","cyrillic":"This field can only contain cyrillic characters","dateInvalid":"This date is not valid. The date format is {format}","dateInvalidSeparate":"This date is not valid. Enter a valid {element}.","dateLimited":"This date is unavailable.","disallowDecimals":"Please enter a whole number.","email":"Enter a valid e-mail address","fillMask":"Field value must fill mask.","freeEmailError":"Free email accounts are not allowed","generalError":"There are errors on the form. Please fix them before continuing.","generalPageError":"There are errors on this page. Please fix them before continuing.","gradingScoreError":"Score total should only be less than or equal to","incompleteFields":"There are incomplete required fields. Please complete them.","inputCarretErrorA":"Input should not be less than the minimum value:","inputCarretErrorB":"Input should not be greater than the maximum value:","lessThan":"Your score should be less than or equal to","maxDigitsError":"The maximum digits allowed is","maxSelectionsError":"The maximum number of selections allowed is","minSelectionsError":"The minimum required number of selections is","multipleFileUploads_emptyError":"{file} is empty, please select files again without it.","multipleFileUploads_fileLimitError":"Only {fileLimit} file uploads allowed.","multipleFileUploads_minSizeError":"{file} is too small, minimum file size is {minSizeLimit}.","multipleFileUploads_onLeave":"The files are being uploaded, if you leave now the upload will be cancelled.","multipleFileUploads_sizeError":"{file} is too large, maximum file size is {sizeLimit}.","multipleFileUploads_typeError":"{file} has invalid extension. Only {extensions} are allowed.","nextButtonText":"Next","numeric":"This field can only contain numeric values","pastDatesDisallowed":"Date must not be in the past.","pleaseWait":"Please wait...","prevButtonText":"Previous","progressMiddleText":"of","required":"This field is required.","requireEveryCell":"Every cell is required.","requireEveryRow":"Every row is required.","requireOne":"At least one field required.","reviewBackText":"Back to Form","reviewSubmitText":"Review and Submit","seeAllText":"See All","submissionLimit":"Sorry! Only one entry is allowed.  Multiple submissions are disabled for this form.","submitButtonText":"Submit","uploadExtensions":"You can only upload following files:","uploadFilesize":"File size cannot be bigger than:","uploadFilesizemin":"File size cannot be smaller than:","url":"This field can only contain a valid URL","wordLimitError":"Too many words. The limit is","wordMinLimitError":"Too few words.  The minimum is"});
        JotForm.clearFieldOnHide="disable";
        JotForm.submitError="jumpToFirstError";
        /*INIT-END*/
    });

       JotForm.prepareCalculationsOnTheFly([null,{"name":"heading","qid":"1","text":"Heading","type":"control_head"},{"name":"submit2","qid":"2","text":"Submit","type":"control_button"},{"name":"name","qid":"3","text":"Name","type":"control_fullname"},{"name":"email","qid":"4","text":"Email","type":"control_email"},{"name":"clickTo","qid":"5","text":"Call 123-4567","type":"control_text"}]);
       setTimeout(function() {
    JotForm.paymentExtrasOnTheFly([null,{"name":"heading","qid":"1","text":"Heading","type":"control_head"},{"name":"submit2","qid":"2","text":"Submit","type":"control_button"},{"name":"name","qid":"3","text":"Name","type":"control_fullname"},{"name":"email","qid":"4","text":"Email","type":"control_email"},{"name":"clickTo","qid":"5","text":"Call 123-4567","type":"control_text"}]);}, 20);
    </script>
    <link href="https://cdn.jotfor.ms/static/formCss.css?3.3.3373" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.3373" />
    <link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.3373" />
    <link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/566a91c2977cdfcd478b4567.css?themeRevisionID=59fb4852cf3bfe589c6c6f21"/>
    <style type="text/css">
        .form-label-left{
            width:150px;
        }
        .form-line{
            padding-top:12px;
            padding-bottom:12px;
        }
        .form-label-right{
            width:150px;
        }
        .form-all{
            width:690px;
            color:#555 !important;
            font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
            font-size:14px;
        }
    </style>

    <form class="jotform-form" action="https://submit.jotformpro.com/submit/73464333481962/" method="post" name="form_73464333481962" id="73464333481962" accept-charset="utf-8">
      <input type="hidden" name="formID" value="73464333481962" />
      <div class="form-all">
        <ul class="form-section page-section">
          <li id="cid_1" class="form-input-wide" data-type="control_head">
            <div class="form-header-group ">
              <div class="header-text httal htvam">
                <h2 id="header_1" class="form-header" data-component="header">
                  Heading
                </h2>
              </div>
            </div>
          </li>
          <li class="form-line" data-type="control_fullname" id="id_3">
            <label class="form-label form-label-top form-label-auto" id="label_3" for="first_3"> Name </label>
            <div id="cid_3" class="form-input-wide">
              <div data-wrapper-react="true">
                <span class="form-sub-label-container" style="vertical-align:top;">
                  <input type="text" id="first_3" name="q3_name[first]" class="form-textbox" size="10" value="" data-component="first" />
                  <label class="form-sub-label" for="first_3" id="sublabel_first" style="min-height:13px;"> First Name </label>
                </span>
                <span class="form-sub-label-container" style="vertical-align:top;">
                  <input type="text" id="last_3" name="q3_name[last]" class="form-textbox" size="15" value="" data-component="last" />
                  <label class="form-sub-label" for="last_3" id="sublabel_last" style="min-height:13px;"> Last Name </label>
                </span>
              </div>
            </div>
          </li>
          <li class="form-line" data-type="control_email" id="id_4">
            <label class="form-label form-label-top form-label-auto" id="label_4" for="input_4"> Email </label>
            <div id="cid_4" class="form-input-wide">
              <span class="form-sub-label-container" style="vertical-align:top;">
                <input type="email" id="input_4" name="q4_email" class="form-textbox validate[Email]" size="30" value="" data-component="email" />
                <label class="form-sub-label" for="input_4" style="min-height:13px;"> example@example.com </label>
              </span>
            </div>
          </li>
          <li class="form-line" data-type="control_text" id="id_5">
            <div id="cid_5" class="form-input-wide">
              <div id="text_5" class="form-html" data-component="text">
                <p><a href="tel:1234567">Call</a></p>
              </div>
            </div>
          </li>
          <li class="form-line" data-type="control_button" id="id_2">
            <div id="cid_2" class="form-input-wide">
              <div style="margin-left:156px;" class="form-buttons-wrapper">
                <button id="input_2" type="submit" class="form-submit-button" data-component="button">
                  Submit
                </button>
              </div>
            </div>
          </li>
          <li style="display:none">
            Should be Empty:
            <input type="text" name="website" value="" />
          </li>
        </ul>
      </div>
      <script>
      JotForm.showJotFormPowered = "0";
      </script>
      <input type="hidden" id="simple_spc" name="simple_spc" value="73464333481962" />
      <script type="text/javascript">
      document.getElementById("si" + "mple" + "_spc").value = "73464333481962-73464333481962";
      </script>
    </form>
    <script type="text/javascript">JotForm.ownerView=true;</script><div id="form-toolbar" style="position:fixed; background:lightyellow; border-bottom:1px solid #ccc; top:0px; left:0px; width:100%; font-family:verdana; opacity:0.5; text-align:right;padding:8px 0;"><button id="fill-form" style="font-size:12px; cursor: pointer; margin-left: 12px;float:left; background:#FC7C01; height: initial; color: white; line-height: 16px; text-decoration:none; padding: 6px 12px; border: none;box-shadow: 0px 0px 4px black!important;">Fill Form</button><span id="close-bar" style="font-weight: bold; float: right; display: block; margin-left: 8px; margin-right: 8px; cursor: pointer;">x</span><a id="clone-form" target="_blank" href="https://support.jotform.com/admn/cloneform.php?formID=73464333481962" style="font-size:12px; margin-left: 12px;float:right; background:#FC7C01; color: white; line-height: 16px; text-decoration:none; padding: 6px 12px; border: none;box-shadow: 0px 0px 4px black;">Clone Form</a><a id="open-admin" target="_blank" href="https://support.jotform.com/admn?keyword=73464333481962"style="font-size:12px; margin-left: 12px;float:right; background:#FC7C01; color: white; line-height: 16px; text-decoration:none; padding: 6px 12px; border: none;box-shadow: 0px 0px 4px black;">Admin</a><a id="open-v4" target="_blank" href="https://jotform.com/build/73464333481962"style="font-size:12px; margin-left: 12px;float:right; background:#FC7C01; color: white; line-height: 16px; text-decoration:none; padding: 6px 12px; border: none;box-shadow: 0px 0px 4px black;">Open in V4</a><div class="embed-dropdown" style="margin-top:0px">
                                        <label for="embed-dropdown-1" class="btn btn-dropdown">Test Form</label>
                                        <input class="embed-dropdown-open" type="checkbox" id="embed-dropdown-1" aria-hidden="true" hidden />

                                        <label for="embed-dropdown-1" class="embed-dropdown-overlay"></label>
                                        <ul class="embed-dropdown-inner">
                                            <li><a class="embedLink" target="_blank" href="/viewer/?formID=73464333481962&theme=wordpress2">Wordpress Theme</a></li>
                                            <li><a class="embedLink" target="_blank" href="/viewer/?formID=73464333481962&theme=wordpress3">Wordpress Theme 2</a></li>
                                            <li><a class="embedLink" target="_blank" href="/viewer/?formID=73464333481962&theme=wordpress4">Wordpress Theme 3</a></li>
                                            <li><a class="embedLink" target="_blank" href="/viewer/?formID=73464333481962&theme=wordpress5">Wordpress Theme 4</a></li>
                                            <li><a id="openAllEmbed">Open All</a></li>
                                        </ul>
                                    </div></div> <div style='margin-top: 12px;' /><link type='text/css' rel='stylesheet' href='https://cdn.jotfor.ms/css/styles/adminToolbar.css'><script type="text/javascript">$("fill-form").observe("click", function(e){var s = document.createElement("script");s.src = "/js/form-tester.js?3.3.3373";document.body.appendChild(s);});$("close-bar").observe("click", function(e){$("form-toolbar").remove();});$("openAllEmbed").observe("click", function(e){$$("a.embedLink").each(function(item) {window.open(item.getAttribute("href"), "_blank");});});</script>