0
162
2019-01-13

Contact From 7 Центрирование Google reCapcha v2 в форме

Приведу простые элементы верстки и стилей, для того что бы расположить Google ReCapcha v2 по центру формы
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Решение предложенное мной на данной странице будет Вам полезно если Вы используете Google reCapcha версии 2. HTML верстка и CSS стили помогу расположить блок с чек боксом капчи строго по центру формы, или же попап окна (в данном случае речь идет о попап окне созданном в плагине PopUps)

Для форм на странице (обычных форм)

Шорт рекапчи помещаем как-то так:

<label> Сообщение
    [textarea your-message] [recaptcha]</label>

В начало формы добавляем:

<style>
.wpcf7-form-control-wrap {
    width: 100%;
}
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
    margin-top: -28px;
    margin-left: auto;
    margin-right: auto;
    /* margin-right: 21px; */
    width: 300px;
}
</style>

Для форм встроеных в PopUps

Шорт рекапчи помещаем как-то так:

<label> Телефон (обязательно)
    [tel* tel-450] <div id="recapcha-popups">[recaptcha]</div></label>

<style>
.wpcf7-form-control-wrap {
    width: 100%;
}
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
    margin-top: -28px;
    margin-left: auto;
    margin-right: auto;
    /* margin-right: 21px; */
    width: 300px;
}
div#recapcha-popups .wpcf7-form-control-wrap {
    padding-top: 31px;
    margin-left: -11px;
}
</style>