{"id":97,"date":"2025-04-22T15:49:36","date_gmt":"2025-04-22T15:49:36","guid":{"rendered":"https:\/\/demo.hulkplugins.com\/contactform7\/?page_id=97"},"modified":"2025-04-23T09:10:15","modified_gmt":"2025-04-23T09:10:15","slug":"demo-international-telephone-field","status":"publish","type":"page","link":"https:\/\/demo.hulkplugins.com\/contactform7\/demo-international-telephone-field\/","title":{"rendered":"Demo International Telephone Field"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-a5331a9e wp-block-columns-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-contact-form-7-contact-form-selector\">\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f96-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"96\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/contactform7\/wp-json\/wp\/v2\/pages\/97#wpcf7-f96-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"96\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f96-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><label> Your name<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span> <\/label>\n<\/p>\n<p><label> Your email<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span> <\/label>\n<\/p>\n<p><label> Phone 1 (Required, Auto country select, Full validation)<br \/>\n\n\t\t<span\n\t\t\tclass=\"wpcf7-form-control-wrap hulk-cf7-intltelfield\"\n\t\t    data-name=\"telephone-260\"\n\t\t    data-options='{\"attrs\":{\"class\":\"wpcf7-form-control wpcf7-telephone wpcf7-validates-as-required\",\"id\":\"\",\"tabindex\":\"\",\"readonly\":false,\"aria-required\":\"true\",\"aria-invalid\":\"false\",\"type\":\"text\",\"name\":\"telephone-260\",\"size\":\"30\",\"maxlength\":\"400\"},\"placeholder\":\"e.g.%20%7B%7Bcountry%7D%7D\",\"default\":\"us\",\"auto\":true,\"specify\":\"include\",\"only\":\"\",\"exclude\":\"\",\"order\":\"\",\"i18n\":\"\",\"flags\":true,\"dial\":false,\"national\":true,\"strict\":true,\"validation\":true,\"id\":\"\",\"value\":\"\",\"classes\":\"\"}'\n\t\t ><span\n\t\t class=\"hulk-cf7-intltelfield-wrap\"\n\t\t ><input class=\"wpcf7-form-control wpcf7-telephone wpcf7-validates-as-required\" id=\"\" tabindex=\"\" aria-required=\"true\" aria-invalid=\"false\" type=\"text\" name=\"telephone-260\" size=\"30\" maxlength=\"400\" \/><\/span><\/span><\/label><small>For the best user experience, International Telephone Input supports setting the initial selected country to the user\u2019s current country, using an IP lookup service. This means that when the user first sees the phone input, they already see the correct flag displayed, and they see a familiar placeholder number that is relevant to their country.<\/small>\n<\/p>\n<p><label> Phone 2 (Only 4 countries)<br \/>\n\n\t\t<span\n\t\t\tclass=\"wpcf7-form-control-wrap hulk-cf7-intltelfield\"\n\t\t    data-name=\"telephone-514\"\n\t\t    data-options='{\"attrs\":{\"class\":\"wpcf7-form-control wpcf7-telephone\",\"id\":\"\",\"tabindex\":\"\",\"readonly\":false,\"aria-invalid\":\"false\",\"type\":\"text\",\"name\":\"telephone-514\",\"size\":\"30\",\"maxlength\":\"400\"},\"placeholder\":\"\",\"default\":\"us\",\"auto\":false,\"specify\":\"include\",\"only\":\"au|ca|de|us\",\"exclude\":\"\",\"order\":\"\",\"i18n\":\"\",\"flags\":true,\"dial\":false,\"national\":true,\"strict\":true,\"validation\":true,\"id\":\"\",\"value\":\"\",\"classes\":\"\"}'\n\t\t ><span\n\t\t class=\"hulk-cf7-intltelfield-wrap\"\n\t\t ><input class=\"wpcf7-form-control wpcf7-telephone\" id=\"\" tabindex=\"\" aria-invalid=\"false\" type=\"text\" name=\"telephone-514\" size=\"30\" maxlength=\"400\" \/><\/span><\/span><\/label><small>In some cases, you may not want to show every single country in the dropdown (over 200 in total)<\/small>\n<\/p>\n<p><label> Phone 3 (Hide Flags)<br \/>\n\n\t\t<span\n\t\t\tclass=\"wpcf7-form-control-wrap hulk-cf7-intltelfield\"\n\t\t    data-name=\"telephone-515\"\n\t\t    data-options='{\"attrs\":{\"class\":\"wpcf7-form-control wpcf7-telephone\",\"id\":\"\",\"tabindex\":\"\",\"readonly\":false,\"aria-invalid\":\"false\",\"type\":\"text\",\"name\":\"telephone-515\",\"size\":\"30\",\"maxlength\":\"400\"},\"placeholder\":\"\",\"default\":\"us\",\"auto\":false,\"specify\":\"include\",\"only\":\"\",\"exclude\":\"\",\"order\":\"\",\"i18n\":\"\",\"flags\":false,\"dial\":false,\"national\":true,\"strict\":true,\"validation\":true,\"id\":\"\",\"value\":\"\",\"classes\":\"\"}'\n\t\t ><span\n\t\t class=\"hulk-cf7-intltelfield-wrap\"\n\t\t ><input class=\"wpcf7-form-control wpcf7-telephone\" id=\"\" tabindex=\"\" aria-invalid=\"false\" type=\"text\" name=\"telephone-515\" size=\"30\" maxlength=\"400\" \/><\/span><\/span><\/label>\n<\/p>\n<p><label> Phone 4 (Separate Dial Code)<br \/>\n\n\t\t<span\n\t\t\tclass=\"wpcf7-form-control-wrap hulk-cf7-intltelfield\"\n\t\t    data-name=\"telephone-516\"\n\t\t    data-options='{\"attrs\":{\"class\":\"wpcf7-form-control wpcf7-telephone\",\"id\":\"\",\"tabindex\":\"\",\"readonly\":false,\"aria-invalid\":\"false\",\"type\":\"text\",\"name\":\"telephone-516\",\"size\":\"30\",\"maxlength\":\"400\"},\"placeholder\":\"\",\"default\":\"de\",\"auto\":false,\"specify\":\"include\",\"only\":\"\",\"exclude\":\"\",\"order\":\"\",\"i18n\":\"\",\"flags\":true,\"dial\":true,\"national\":true,\"strict\":true,\"validation\":true,\"id\":\"\",\"value\":\"\",\"classes\":\"\"}'\n\t\t ><span\n\t\t class=\"hulk-cf7-intltelfield-wrap\"\n\t\t ><input class=\"wpcf7-form-control wpcf7-telephone\" id=\"\" tabindex=\"\" aria-invalid=\"false\" type=\"text\" name=\"telephone-516\" size=\"30\" maxlength=\"400\" \/><\/span><\/span><\/label><small>Display the selected country dial code next to the input, so it looks like it\u2019s part of the typed number.<\/small>\n<\/p>\n<p><label> Phone 5 (Internationalisation)<br \/>\n\n\t\t<span\n\t\t\tclass=\"wpcf7-form-control-wrap hulk-cf7-intltelfield\"\n\t\t    data-name=\"telephone-336\"\n\t\t    data-options='{\"attrs\":{\"class\":\"wpcf7-form-control wpcf7-telephone\",\"id\":\"\",\"tabindex\":\"\",\"readonly\":false,\"aria-invalid\":\"false\",\"type\":\"text\",\"name\":\"telephone-336\",\"size\":\"30\",\"maxlength\":\"400\"},\"placeholder\":\"\",\"default\":\"kp\",\"auto\":false,\"specify\":\"include\",\"only\":\"\",\"exclude\":\"\",\"order\":\"\",\"i18n\":\"ko\",\"flags\":true,\"dial\":false,\"national\":true,\"strict\":true,\"validation\":true,\"id\":\"\",\"value\":\"\",\"classes\":\"\"}'\n\t\t ><span\n\t\t class=\"hulk-cf7-intltelfield-wrap\"\n\t\t ><input class=\"wpcf7-form-control wpcf7-telephone\" id=\"\" tabindex=\"\" aria-invalid=\"false\" type=\"text\" name=\"telephone-336\" size=\"30\" maxlength=\"400\" \/><\/span><\/span><\/label>\n<\/p>\n<p><label> Phone 6 (Disabled Strict Mode, International format)<br \/>\n\n\t\t<span\n\t\t\tclass=\"wpcf7-form-control-wrap hulk-cf7-intltelfield\"\n\t\t    data-name=\"telephone-517\"\n\t\t    data-options='{\"attrs\":{\"class\":\"wpcf7-form-control wpcf7-telephone\",\"id\":\"\",\"tabindex\":\"\",\"readonly\":false,\"aria-invalid\":\"false\",\"type\":\"text\",\"name\":\"telephone-517\",\"size\":\"30\",\"maxlength\":\"400\"},\"placeholder\":\"\",\"default\":\"ca\",\"auto\":false,\"specify\":\"include\",\"only\":\"\",\"exclude\":\"\",\"order\":\"\",\"i18n\":\"\",\"flags\":true,\"dial\":false,\"national\":false,\"strict\":false,\"validation\":true,\"id\":\"\",\"value\":\"\",\"classes\":\"\"}'\n\t\t ><span\n\t\t class=\"hulk-cf7-intltelfield-wrap\"\n\t\t ><input class=\"wpcf7-form-control wpcf7-telephone\" id=\"\" tabindex=\"\" aria-invalid=\"false\" type=\"text\" name=\"telephone-517\" size=\"30\" maxlength=\"400\" \/><\/span><\/span><\/label><small>If strict mode is enabled, then As the user types in the input, ignore any irrelevant characters. Basically, the user can only enter numeric characters and an optional plus at the beginning. Cap the length at the maximum valid number length.<\/small>\n<\/p>\n<p><label> Your message (optional)<br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" name=\"your-message\"><\/textarea><\/span> <\/label>\n<\/p>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Submit\" \/>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Video Demo<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/files.gitbook.com\/v0\/b\/gitbook-x-prod.appspot.com\/o\/spaces%2FX0uiJvU9p2e35RCORQHy%2Fuploads%2FShOjxyBiipkqv0USdsCM%2Fdemo-phone-field-contact-form-7.mp4?alt=media&amp;token=78469b8a-9f74-43e5-bbb0-51650a61e3d0\"><\/video><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Video Demo<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-97","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.hulkplugins.com\/contactform7\/wp-json\/wp\/v2\/pages\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.hulkplugins.com\/contactform7\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.hulkplugins.com\/contactform7\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.hulkplugins.com\/contactform7\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.hulkplugins.com\/contactform7\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":0,"href":"https:\/\/demo.hulkplugins.com\/contactform7\/wp-json\/wp\/v2\/pages\/97\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.hulkplugins.com\/contactform7\/wp-json\/wp\/v2\/media?parent=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}