Contact Form 7 & WPForms

<form id="contact" class="demo" novalidate>
  <div class="demo-field">
    <label class="demo-label" for="name">Your name</label>
    <input id="name" class="demo-input" value="Lab" autocomplete="off">
  </div>
  <div class="demo-field">
    <label class="demo-label" for="your-phone">Your phone <span class="demo-hint">· [phone* your-phone country:pk]</span></label>
    <input id="your-phone" class="demo-input" autocomplete="off">
    <p id="tip" class="demo-error" role="alert"></p>
  </div>
  <div class="demo-row">
    <button class="demo-btn" type="submit">Send</button>
    <span id="posted" class="demo-kv" hidden></span>
  </div>
</form>

import { createPhoneInput } from 'https://www.devix.pk/cdn/oss/phone-field-for-woocommerce@1.0.0/assets/vendor/phone-input/index.js';

const input = document.getElementById('your-phone');
const tip = document.getElementById('tip');
const posted = document.getElementById('posted');
const phone = createPhoneInput(input, { initialCountry: 'pk', layout: 'overlay' });

document.getElementById('contact').addEventListener('submit', (event) => {
  event.preventDefault();
  // The same rules run again in PHP, so a rejected number never reaches the mail tag.
  tip.textContent = phone.isValid() ? '' : phone.getValidationMessage() || 'Enter a phone number.';
  posted.hidden = !phone.isValid();
  posted.textContent = `[your-phone] posts ${phone.getNumber('INTERNATIONAL')}`;
});

@import url('https://www.devix.pk/cdn/oss/phone-field-for-woocommerce@1.0.0/assets/vendor/phone-input/phone-input.min.css');