Создаю форму через плагин contact form 7. Добавляю её на страницу. Получается код:
<form action="/product/stoika-pribornaya-standart/#wpcf7-f2383-p438-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="2383">
<input type="hidden" name="_wpcf7_version" value="5.0.1">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2383-p438-o1">
<input type="hidden" name="_wpcf7_container_post" value="438">
</div>
<p><label class="label-kp"> Ваше имя<br>
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text your-name" id="your-name" aria-invalid="false" placeholder="Иммануил Кант"></span> </label></p>
<p><label class="label-kp"> Номер телефона<br>
<span class="wpcf7-form-control-wrap phone"><input type="tel" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel phone" id="phone" aria-invalid="false" placeholder="+7(___) ___-____"></span> </label></p>
<p><label class="label-kp"> Ваш e-mail<br>
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email your-email" id="your-email" aria-invalid="false" placeholder="supermail@mail.ru"></span> </label></p>
<div class="wpcf7-form-control-wrap"><div data-sitekey="6LfEY1IUAAAAAG5MMzzAC-cjMEqZrqICemxfp9oH" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha recaptcha-kp"><div style="width: 304px; height: 78px;"><div><iframe src="https://www.google.com/recaptcha/api2/anchor?k=6LfEY1IUAAAAAG5MMzzAC-cjMEqZrqICemxfp9oH&co=aHR0cDovL2VuZG8tbWVkaWNhbC5ydTo4MA..&hl=ru&v=v1522970272143&size=normal&cb=lufu46oat1e3" width="304" height="78" role="presentation" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; "></textarea></div></div>
<noscript>
<div style="width: 302px; height: 422px;">
<div style="width: 302px; height: 422px; position: relative;">
<div style="width: 302px; height: 422px; position: absolute;">
<iframe src="https://www.google.com/recaptcha/api/fallback?k=6LfEY1IUAAAAAG5MMzzAC-cjMEqZrqICemxfp9oH" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;">
</iframe>
</div>
<div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;">
</textarea>
</div>
</div>
</div>
</noscript>
</div>
<p><input type="submit" value="Запросить предложение" class="wpcf7-form-control wpcf7-submit round"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>
Далее при помощи плагина Inputmask добавляю маску к полям:
(function(jQuery){
jQuery(function(){
jQuery('.woocommerce-grouped-product-list-item__quantity').remove();
$('#phone').inputmask({"mask": "+7(999) 999-9999"});
$('#your-email').inputmask({
mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
greedy: false,
onBeforePaste: function (pastedValue, opts) {
pastedValue = pastedValue.toLowerCase();
return pastedValue.replace("mailto:", "");
},
definitions: {
'*': {
validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
cardinality: 1,
casing: "lower"
}
}
});
});
})(jQuery);
В поле емаил ничего не происходит. Может я что-то не понимаю. Подскажите пожалуйста.