Усі поля (теги) форми. Усі поля (теги) форми Плагіни для contact form 7 wordpress

Доброго дня, дорогі читачі блогу. Продовжуємо тему форм зворотного зв'язку WordPress. І якщо мова зайшла про них, пропоную сьогодні поговорити про плагін WP Contact Form 7. Далі я розповім вам покрокове налаштування плагіна, а також коротко опишу доповнення для цього плагіна.

Навігація по сторінці:

Опис WordPress Contact Form 7

2) Активувати плагін Contact Form 7 в адмінці WordPress.

3) Перейти на нову створену вкладку, як показано на малюнку:

4) Натиснути вкладку "Додати нову" та вказати мову форми за замовчуванням, або вибрати потрібну

5) Вказуємо ім'я контактної форми та натискаємо зберегти.

6) Тепер у нас з'явився шорткод, який вже можна скопіювати та вставити в пост або сайдбар для того, щоб вивести форму - contact-form-7 id="1252" title="(!LANG:Форма номер 1" (надо взять в квадратные скобки как на рисунке).!}

7) Ось як так виглядає наша форма:

Звичайно, не дуже красиво, але ніхто не заважає створити свої стилі або зробити свою форму і туди вносити вставки.

Як вивести Contact Form 7 у довільне місце шаблону

У п.6 покрокового налаштування я показував вам, як можна взяти шорткод коду CF7 і далі описав що цей код можна виводити у віджет або пост, сторінку. На додачу, хочу сказати, що ви можете вивести Contact form 7 у будь-яке довільне місце шаблону. Для цього слід вставити такий нескладний код:

Ось і все, якщо ви все зробили правильно, отримаєте висновок Contact Form 7 в довільне місце шаблону WordPress.

Налаштування полів введення Contact Form 7

Завдяки йому у вас додатково з'являться такі бокси як:

Налаштування відповіді reply-to для contact form 7

У новій версії плагіна CF7 4.4 і вище розробник рекомендує вводити в поле from (ось воно на скіні нижче)

правильна адреса, яка відповідає вашому домену. Видно зі скіна, і ця рекомендація створює проблему:

Як відповісти користувачеві з поштовика?

Якщо просто натиснути відповісти, то відповідатимемо на свою пошту, по суті, відповімо самі собі. Це дуже не зручно, адже нам потрібно руками копіювати адресу користувача вставляти у поштовик і лише потім відповідати.

Вирішення цієї проблеми є і як завжди просте. Вам потрібно у полі Additional Headersдодати код:

Reply-To:

Зрозуміло, your-email-sh потрібно замінити на свій шорткод пошти. Дивіться скін нижче:

Тепер, коли вам прийде лист із зворотного зв'язку вордпрес, ви зможете натиснути у поштовці відповісти і ваша відповідь буде надіслана на правильний e-mail.

Якщо після цих дій ви зіткнулися з проблемою - варто прочитати пост, перейшовши за посиланням. Там описані основні проблеми та причини траблів у плагіні Contact Form 7.

На цьому все. Сподіваюся вам стало зрозуміло як робиться настройка плагіна та його макетів.

Привіт всім. Як, то у мене дуже багато енергії і я вирішив сьогодні написати ще одну статейку, яка буде присвячена одному з плагінів WordPress. Цікавий і функціональний плагін, зі своїми обов'язками справляється на всі 100% і краще я поки не знайшов, щоб оформити зворотний зв'язок.

Не хочу довго Вас нудити, я думаю Ви і так вже зрозуміли, що йтиметься у статті. І так, сьогодні розбиратимемося і налаштовуватимемо плагін Contact Form 7 для WordPress, А саме створювати форму зворотного зв'язку.

Довго сидів і думав, які є мінуси в плагіні і в голову так нічого і не спало, а ось плюсів у цього творіння дуже багато.

Плюси плагіна Contact Form 7.

1. Зрозумілість та простота налаштування. Людина, яка вперше стикається з цим плагіном, без проблем зможе розібратися.
2. Створення великої кількості різних форм та інтеграція їх на сайт.
3. Форма вставляється за допомогою шорткоду на сторінку та в будь-яке місце сайту. Це дуже зручно.
4. Підтримка російської та інших мов.
5. Підтримка Ajax запитів.
6. Захист від спаму за допомогою текстового питання чи капчі. Для капчі необхідно додатково встановити Really Simple CAPTCHA.
7. Налаштування зовнішнього вигляду форми за допомогою CSS стилів.
8. Інтеграція із сервісом Akismet, для захисту від спаму.

У нас на сайті Ви можете побачити та поюзати таку форму, якщо натиснете на пункт меню “Зв'язатися з нами”, випаде вікно, де можна побачити наочний приклад.

Дайте починати!

Для початку нам необхідно завантажити цей плагін. Можна з нашого сервера ось посилання ->або з офіційного сайту ось посилання -> Завантажити з офіційного сайту .

Після того, як завантажили, необхідно його встановити на . Як встановлювати, я не описуватиму, думаю Ви повинні цей процес знати від А до Я. Завантажили, встановили, тепер безпосередньо переходимо в сам, щоб розібратися і налаштувати його.

Налаштування плагіна Contact Form 7 та створення форми зворотного зв'язку.

Тепер коли ви завантажили та встановили все як потрібно, переходимо в адміністративну панель WordPress та знаходимо пункт Contact Form 7, натискаємо на нього і ми потрапляємо на сторінку додавання нової форми.

Створення форми.

Для того, щоб створити нову форму необхідно натиснути на “ Додати нову”, далі вибираємо мову (російською за замовчуванням) і натискаємо “Додати нову”. Після всіх зроблених кроків у Вас має бути така картина:

Форма створена, тепер її налаштовуватимемо, під ваші потреби і для початку даємо їй назву. У моєму випадку я назву “ Тест форма”, ви називайте як хочете і після цього натискайте “Зберегти”. Тепер ви можете побачити, шорткод, який необхідно буде вставляти в код сайту, де буде виводиться дана форма.

Знадобиться код нам трохи згодом, тому що необхідно спочатку налаштувати форму. Переходимо до шаблону форми та налаштовуємо його.

Праворуч випадаючий список “ Згенерувати тег”, якщо його розкрити можна побачити багато полів, які додаються у форму.

Поле "Сгенерувати тег"

Зліва можна побачити поля, які вже додані у форму.

Давайте для прикладу, зробимо просту форму в якій буде ім'я, пошта, телефон, текстове питання для захисту від спаму, повідомлення та кнопка надіслати.

Приступає.

Робимо текстове поле імені. У списку “Сгенерувати тег” вибираємо “ Текстове поле”. Ставимо галочку обов'язкове поле, даємо йому назву в моєму випадку "NAME" і привласнюємо id, щоб можна було поле оформити за допомогою css стилів. В мене вийшло id=”name”. Внизу можна побачити текст “ Скопіюйте цей код і вставте його шаблон форми ліворуч”. Беремо цей код і копіюємо шаблон форми, як на картинці:

Для пошти (e-mail) аналогічно робимо, для телефону вибираємо зі списку "Сгенерувати тег", поле " Номер телефону” І теж за аналогією робимо.

Для налаштування повідомлення вибираємо “ Текстове поле” і робимо також за аналогією з усім вище описаним.

Тепер додаємо поле « Питання“. Для цього у списку вибираємо пункт “ Питання”, задаємо йому назву. У полі Вопрос|Ответ, можна ставити різні запитання та відповіді, під полем наведено приклад логічного питання, можна ставити текстовий, наприклад “3 за рахунком місяць року?| Березень” тощо. Код вставляємо як і раніше.

поле «Питання»

І останнє, що нам необхідно, це кнопка “ Відправити”, можна залишити ту, що у шаблоні чи списку “Сгенерувати тег” вибираємо “Кнопка відправки”. Шаблон готовий, натискаємо кнопку “ Зберегти”.

Давайте перевіримо, що у нас вийшло, копіюємо шорткод і вставляємо його на сторінку або будь-яку частину коду куди необхідно. Я вставлю на тестову сторінку.

Ось що в мене вийшло:

У вас має бути щось схоже.

Налаштування адресата форми та повідомлень

Опускаємось трохи нижче шаблону форми і бачимо налаштування адресата.

1. Поле адресат. Вводимо пошту, з якої надходитимуть листи відвідувачам, які заповнять форму.
2. Відправник поле. Замість<>, підставляємо свої шорткоди (назви, які давали полям). Подивитися їх можна вище. У моєму випадку буде<>.
3. Поле теми. Я завжди пишу Форма зворотнього зв'язку та вказую сайт.
4. Поле шаблон листа. Тут можна виводити, що душа забажає. Для нашого прикладу роблю поле Від:<>та дані Телефон: , Повідомлення ..
5. Інші поля порожні.

В кінці не забуваємо збережуться.

Якщо опуститися ще нижче, можна побачити налаштування повідомлень. Тут все російською, тому можете правити під свої потреби, як бажаєте. Тут думаю самі розберетеся

Форма готова, можна переходити тестувати і дивитися, чи надходить повідомлення на пошту, яку Ви вказали.

У мене все працює відмінно, після натискання кнопки “Надіслати”, бачу повідомлення “ Повідомлення було успішно надіслано. спасибі. ” Можете тестувати і дивитися які помилки форма видаватиме якщо не правильно ввести дані.

Що стосується css стилів, їх можна додати до головного css файлу style.css. За допомогою firebag, можете подивитися id та класи полів та привласнити їм відповідні стилі.

Плагін Contact Form 7 для WordPressдуже функціональний, можна зробити форму будь-якої складності, я впевнений, Ви в цьому переконалися. На цьому я закінчуватиму, якщо якісь моменти не до кінця зрозумілі, пишіть у коментарі намагатимуся допомогти розібратися. Спасибі.

Контактна форма – невід'ємний атрибут більшості сайтів. Саме тому у каталозі WordPress так багато плагінів для контактних форм. Один з найпопулярніших – це Contact Form 7. Плагін дозволяє створювати форми будь-яких видів; дуже гнучкий і зручний у налаштуванні; розвивається вже багато років та містить багато напрацювань.

Створення та показ контактних форм

Створення форм в адмінці

Після встановлення плагіна з'явиться пункт меню "Contact Form 7", через який можна створювати та видаляти форми.

Форма на зображенні створена при активації плагіна автоматично.

Використовуємо форму за замовчуванням, для цього створимо сторінку "Зв'язатись зі мною" і вставимо туди шорткод форми.

Лицьова частина сайту

А тепер збережемо статтю та подивимося, як виглядає наша форма (використовується тема Twenty Sixteen):

На малюнку вид форми після надісланого листа (про це свідчить повідомлення внизу форми).

Налаштування форми (створення складних форм)

Приклад вище показує, як вставити готову і дуже просту форму контактів. А тепер давайте розглянемо, як створити форму складніше. Для цього повернемося в адмінку, менеджер форм і зайдемо в редагування форми за замовчуванням.

У верхньому полі - назва форми (його видно тільки в адмінці), вказуємо зрозумілу собі назву, наприклад: "Відгук про сайт", "Форма заявки на роботу", "Форма зворотного зв'язку" і т.п.

Під заголовком – шорткод. Його використовуємо у записах, для виведення форми.

І нижче – чотири вкладки:

1. Шаблон форми
2. Лист
3. Додаткові налаштування

Розглянемо кожну вкладку окремо.

Шаблон форми

У цій вкладці можна настроїти поля та зовнішній вигляд форми. Робочою областю є HTML редактор WP. Тільки замість звичних кнопок бачимо кнопки вставки різних полів форми.

Верстка форми

Для верстки можна використовувати html-теги та шорткоди плагіна. Шорткод додають поля форми, а html теги дозволяють створити довільну HTML структуру. Наприклад, наша дефолтна форма виглядає так:

Ваше ім'я (обов'язково) Ваш e-mail (обов'язково) Тема Повідомлення

А при відображенні в записі вона перетвориться на такий HTML:

Синтаксис шорткодів

Давайте клікнемо на кнопку «Текст». Відкривається вікно, де ми можемо вказати атрибути текстового поля. Вказуємо та тиснемо "Вставити тег".

Тег згодом буде перетворено на текстове поле з html кодом:

Шорткод можна зручно створювати через конструктор шорткод.

Але конструктор не дозволяє змінити шорткод (там можна тільки створити шорткод). Змінити шорткод можна двома способами:

1. видалити та створити за допомогою конструктора новий.
2. вивчити синтаксис та виправити шорткод поля вручну.

З конструктором ви самі розберетеся.

А тут ми розберемо синтаксис шорткоду.

Наприклад розглянемо тег текстового поля з додатковими опціями:

Text (обов'язковий)Тип поля: text, select, password, number тощо. (В даному випадку поле текстове). Визначає, який елемент форми буде перетворено наш тег, отже який вид даних він приймати. * Зірочка робить поле обов'язковим для заповнення (форма не буде надіслана та відобразиться повідомлення про те, що поле треба заповнити). client-name (обов'язковий)Ім'я поля, використовується як атрибут name в input, а також використовується при формуванні шаблону листа, що відправляється. id:my-id Атрибут id input зі значенням my-id. Використовується для оформлення. class:my-class Атрибут class input зі значенням my-class. Використовується для оформлення. placeholder "(!LANG:Введіть ім'я" Использовать текст "Введите имя" как placeholder. !}

Дотримуйтесь порядку атрибутів тега: спочатку йде тип поля, потім його ім'я і потім додаткові опції.

Типи полів

• Текстові поля: text, email, tel, url, textarea
• Числові поля: number , range
• Поля з датою: date
• Чекбокси, радіо, списки: checkbox, radio, select
• Поле із завантаженням файлу: file
• CAPTCHA: captchac та captchar
• Опитування: quiz
• Поле "Прийняти": aceptance
• Кнопка "Надіслати": submit
• Довільний тип поля

Шаблон листа

У другому вкладі можна тонко налаштувати шаблон (верстку) та властивості надісланого листа. У полях даної вкладки можна використовувати спеціальні теги полів форми – це дає можливість передавати у листі зазначені у формі дані.

Теги складаються з імен полів із шаблону форми. Наприклад, ми створили текстове поле під назвою: . Тепер у шаблоні листа можна використовувати тег. У листі замість цього тега буде підставлено значення поля, введене користувачем (ПІБ).

Заголовки листа:

Кому - електронна скринька, куди буде надіслано листа. Можна вказати скільки завгодно ящиків через кому.

Від кого - ім'я та електронна скринька, від кого надійшов лист. Зазвичай тут вказується пошта сервера (наприклад [email protected]).

Можна вказати будь-яку пошту, але якщо домен пошти відрізнятиметься від домену сайту - форма не пройде перевірку і «лаятиметься» на цей параметр, хоча листи все одно надсилатимуться.

Тема - Заголовок листа. По ньому буде зрозуміло з якої форми були надіслані дані. Наприклад, тема листа "Помилка на сайті", "Замовлення зворотного дзвінка" тощо. Вибираєте такий заголовок, щоб легше було працювати з отриманими листами.

• Додаткові заголовки - За замовчуванням прописано Reply-To: . Заголовок Reply-To говорить нам, що на цю електронну скриньку можна відповісти, натиснувши кнопку "Відповісти" у поштовій програмі, а тег форми - це ім'я поля з шаблону. Зазначений користувачем email буде вставлений натомість тега. Вийде щось типу Reply-To: [email protected].

Тіло листа

Це така важлива частина цієї вкладки. Тут вказується текст листа. У тексті використовуємо ті самі теги форми (імена полів із шаблону форми).

Розберемо дефолтного листа:

Від:<>Тема: Повідомлення: -- Відправлено з сайту Вивчаємо плагін Contact Form 7 (http://test-wp.ru)

Ми мали 4 поля, які заповнював користувач. Після надсилання листа теги перетворяться на значення і ми отримаємо такий лист:

Від: Дмитро Тема: Питання про Contact Form 7 Повідомлення: Привіт! У мене виникло питання щодо плагіна Contact Form 7. Як його налаштувати? -- Відправлено з сайту Вивчаємо плагін Contact Form 7 (http://test-wp.ru)

Не обов'язкові поля в тілі листи

Якщо користувач не заповнить полі, а воно використовується в тілі листа, то тіло листа буде неповним. Наприклад у тілі написано Людина з міста, але користувач не заповнив поле, а значить у листі ми отримаємо Людину з міста... Такий рядок у листі зайвий. Щоб прибрати цей рядок із листа, поставте галочку на пункті "Виключити виведення рядків із порожніми тегами повідомлення". Зверніть увагу, що це спрацює тільки тоді, коли текст і шоткод поля знаходяться в тому самому рядку.

Опція "Використовувати HTML-формат листа". Дозволяє використовувати в тілі листи HTML теги. При цьому можна використовувати обмежений список HTML тегів, тому що не всі поштові клієнти або послуги вміють правильно обробляти складну HTML розмітку. Можна використовувати: таблиці, марковані списки, жирність, абзаци тощо. Докладніше шукайте в мережі.

Contact Form 7 дозволяє надсилати листа на дві адреси, причому налаштування для кожного листа різні. Це може стати в нагоді, коли треба відправити адміністратору сайту лист з повною інформацією та дублікат менеджеру, де міститься тільки дані про замовлення.

Повідомлення при надсиланні форми

У цій вкладці ви можете відредагувати повідомлення, які виводить форма в тій чи іншій ситуації: при вдалому або невдалому надсиланні листа, або при помилках.

Теги шаблон листа не працюють у цих полях.

Додаткові налаштування

Ця вкладка призначена для просунутих користувачів і дає можливість за допомогою JS-коду розширювати можливості форми. Наприклад, вішати події для аналітики.

Про використання цього функціоналу я розповім окремою статті.

Плагін Contact Form 7 допоможе організувати зворотний зв'язок на вашому сайті.

Завантажити плагін Contact Form 7 можна на офіційному сайті WordPress

Завантажити плагін Really Simple CAPTCHA можна на офіційному сайті WordPress

Як встановити та підключити цей плагін ми розглянули в уроці «, зараз розберемося з додатковими функціями плагіна Contact Form 7. Форма коректно працює на моніторах, планшетах, телефонах та ноутбуках. До речі якщо у вас зламався ноут, тобто сервіс де роблять ремонт ноутбуків HP.

Після того як ви завантажили та активували плагін зайдіть в налаштування плагіна, перейшовши в новий розділ панелі керування «Контакти».

Наведіть мишкою на назву форми та виберіть «Редагувати»

Відкриється вікно зміни параметрів форми

Так як на сайті може використовуватися не одна, а кілька форм (форма відправлення повідомлення, форма замовлення дзвінка, форма з анкетними даними), то щоб не виникало плутанини, яка форма за що відповідає, потрібно змінити ім'я форми. Для цього натисніть на назву форми 1 .

У блоці №2 відображається те, що виводиться на сторінці у формі. Спочатку йде текст, назва поля, після коду цього поля. Ви можете змінити текст на який вам потрібен.

Для додавання нових полів у форму натисніть на список №3, що випадає, — «Сгенерувати тег» і зі списку виберіть необхідний елемент.

• Текстове поле
• E-mail
• Номер телефону
• Число (spinbox)
• Число (slider)
• Текстове поле
• Випадаюче меню
• Checkboxes
• Radio buttons
• Acceptance
• Питання
• CAPTCHA
• Надсилання файлу
• Кнопка відправлення

Підказки та поля форми за замовчуванням розташовуються так: зверху підказка, внизу елемент. Якщо хочете розмістити опис і елемент в один рядок - заберіть після тексту тег

. Весь блок з описом та елементів повинен бути в один рядок і знаходитись усередині тега

Текстове поле

З списку виберемо елемент «Текстове поле»

Якщо будь-яка функція, яку додаєте, обов'язкова — поставте галочку 1 і не забудьте від цього написати в описі.

Можна додати додаткову інформацію в полі введення, щоб зробити зрозумілішим заповнення форми. Позначте галочкою пункт 2 "Використовувати як заповнювач (placeholder)?" і поряд у полі впишіть підказку. Під час заповнення цього поля у формі текст підказки зникне. Далі слідуйте підказкам плагіна. В результаті вийде таке ось поле у ​​готовій формі:

Обов'язково вставте код шаблон листа, інакше дані з цього поля не передадуть на пошту! Це стосується не лише текстових полів, але й будь-яких інших елементів.

E-mail

Використовується для передачі у форму адреси поштової скриньки відправника

URL

Дозволяє додати до форми адресу сайту.

Номер телефону

У цьому полі можна вписати тільки цифри

Число (spinbox)

Поле, в якому можна встановити кількість чогось, наприклад товару. Кількість встановлюється стрілками вгору/вниз.

Дата

Вставляє у форму календар із можливістю вибору дати. Наприклад, використовується для резервації номерів в готелі. Дата прибуття, дата відбуття.

Текстове поле

Так, не дивуйтесь 🙂 Ще одне текстове поле. На цей раз це поле має великі розміри і дозволяє писати в нього багато тексту. Наприклад, відгуки, коментарі.

Випадаюче меню

Коли багато варіантів чогось і необхідно вибрати якийсь пункт з великого списку, наприклад список міст, вулиць, товарів.

Список необхідно розмістити в полі Вибір, кожен пункт нового рядка.

Checkboxes

Прапорцем або на жаргоні розробників чекбоксом називається елемент, який створює поле для проставлення галочки. Це поле має два стани – відзначена галочка чи ні. Можливий множинний вибір. Розташовуються тільки в ряд, якщо відзначити галочкою "Зробити чек-бокси взаємовиключними?" то буде можливий вибір лише одного параметра.

Radio buttons

Перемикачі (жарг. радіокнопки) використовують, коли необхідно вибрати один варіант з декількох запропонованих. Позначивши галочкою пункт » Розмістити спочатку мітку, а потім чек-бокс?» змінюється розташування мітки та поля вибору, за замовчуванням спочатку вибір, потім мітка.

Acceptance

Підтвердження чогось. Допустимо угоду про прийняття умов описаних вище.

Питання

Це перша лінія оборони від спаму, найпростіша. У налаштування пишіть якесь питання, можна цифрами, можна літерами або й так і так, і вказуєте правильну відповідь. Якщо відповідь при заповненні форми буде правильною, форма відправиться. Зеленим зазначено, яка частина цієї формули відображатиметься на сайті перед полем введення відповіді, червоним – відповідь. Правильна відповідь у формулі пишеться після знака (Вертикальній риси)

Додає у форму захист від спаму.

Для роботи цієї функції необхідний ще один плагін. Завантажуйте, встановлюєте, активуйте плагін.

Налаштування можна не змінювати, копіюєте та вставляєте 2 рядки перед кнопкою відправити.

Надсилання файлу

До форми надсилання повідомлення можна прикріпити файл. У налаштуваннях можна вказати максимальний розмір у байтах, і дозволені формати для завантаження, наприклад.jpg .tiff .doc

Кнопка відправлення

Надсилання форми. У налаштуваннях у розділі «Ярлик» можна дати назву кнопки (Надіслати, відповісти, надіслати 🙂)

Налаштування зовнішнього вигляду Contact Form 7

Оскільки плагіни мають властивості оновлюватися, зміни зовнішнього вигляду форми будемо виробляти у файлі стилів теми сайту style.css

За відображення форми, її полів та інших елементів відповідає код:

Wpcf7 ( background-color:#ddd; ) /*колір фону форми */ .wpcf7 input, .wpcf7 textarea( padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size: 16px, line-height: 20px, border: 1px solid #C7C7C7;box-shadow: inset 2px 2px 8px #F9F9F9; : all 0.2s ease; transition: all 0.2s ease; ) .wpcf7 .wpcf7-list-item( padding-left: 0; input( border: none; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( background: #FDFDFD;

Що тут є що.

.wpcf7 input, .wpcf7 textarea стиль поля введення (текстового поля)

1. padding- Задає відступ від вмісту до межі елемента. Тут - відступ від тексту, що вводиться в поле, до межі поля. Встановлюється значення в пікселях Xpx, де кількість X пікселів. Приклад: padding: 5px 3px 6px 8px;
2. color- Колір тексту.
3. font-family- шрифт полів уведення.
4. font-size- розмір шрифту
5. line-height- Висота рядка
6. border- рамка навколо поля введення
7. box-shadow- Тінь блоку. insetсвідчить про те, що тінь внутрішня. Якщо потрібна зовнішня тінь, пропустіть це значення. Друге та третє значення 2px 2px вказують на змішування тіні по горизонталі та вертикалі відповідно. Четверте значення 8px визначає радіус розмиття тіні. П'яте – #F9F9F9 – колір тіні.

Налаштування кнопки Contact Form 7

.buttons_form ( padding: 0px; height: 30px; width: 150px !important; border: none !important; cursor: pointer; color: #fff; -webkit-border-radius: .5em; -moz-border-radius: . 5em; border-radius: .5em; color: #faddde; border: solid 1px #980c10; background: #d81b21; background: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317");

Стиль повідомлень Contact Form 7

Він відповідає за повідомлення про помилки або успішне відправлення

Wpcf7 .wpcf7-validation-errors( border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( border:none; background-color:#7ad33f; margin:0; padding:20px; -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; -moz-border-radius: 10px; border-radius: 10px; color: white; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; left: 5px; padding-right: 5px; border-radius: 10px; width: 290px; color: white; /* Drop shadow */ -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);box-shadow: 3px 3px 3px rgba(0,0,0,0.3);

А тепер для зручності весь код повністю з коментарями:

Wpcf7 ( background-color:#ddd; ) /*колір фону форми */ .wpcf7 input, .wpcf7 textarea( /* Ця частина коду відповідає за стиль полів введення, текстові області */ padding:5px; /* Встановлює відступ від полів елемента до його вмісту, можна поставити будь-яке значення, наприклад 10px */ color:#1D1D1D;/* Колір тексту в полях введення */ font-family:Arial, Helvetica, sans-serif; -size:16px;/* Розмір тексту в полях вводу */ line-height: 20px; - стиль рамки, третє - її колір */ box-shadow: inset 2px 2px 8px #F9F9F9;/* Тінь від полів введення. - колір тіні */ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .w pcf7 .wpcf7-list-item input( border: none; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) hover, .wpcf7 textarea:focus,. : none; /* Зовнішня межа поля введення тексту */ . o-transition: 0; transition: 0; border: none; /* Рамка навколо кнопки */ position: relative; color: #fff; /* Колір тексту */ text-transform: uppercase; що текст на кнопці буде відображатися великими літерами) */ /* Скруглення кутів кнопки. 6px; /* Заокруглення кутів для Chrome */ -moz-border-radius: 6px; /* Заокруглення кутів для Mozilla FireFox */ border-radius: 6px; /* Скруглення кутів для решти браузерів, у тому числі мобільних */ font-size: 14px; /* Розмір тексту кнопки */ font-weight: bold; /* Стиль тексту (bold означає жирний) */ padding-top: 11px; /* Відступ зверху від краю елемента до вмісту */ padding-bottom: 10px; /* Відступ знизу від краю елемента до його вмісту */ padding-left: 35px; /* Відступ ліворуч від краю елемента до його вмісту */ padding-right: 35px; /* Відступ праворуч від краю елемента до його вмісту */ /* Gradient background - Градієнтне тло кнопки */ background-color: #000000; /* Колір фону кнопки, якщо градієнт не підтримується браузером */ /*У наступних властивостях кольору повинні бути вказані однаково, так як це те саме, тільки для різних браузерів. Розберемо першу властивість. Частина from(#676767), to(#3B3B3B) означає, що треба відобразити градієнт, де від кольору #676767) йде перехід до кольору #3B3B3B */ background: -webkit-gradient(linear, left top, left bottom, from( # 676767), to (# 3B3B3B)); background: -moz-linear-gradient(top, #349622, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow – Тінь кнопки. Колір тіні вказаний у RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); box-shadow: 0 2px 5px rgba(0,0,0,0.3); ) /* On hover - Стиль кнопки при наведенні покажчика миші. Все майже те саме, що і в попередньому блоці */ .wpcf7 input.wpcf7-submit:hover( cursor: pointer; text-decoration: none; top, left bottom, from(#246416), to(#349622)), background: -moz-linear-gradient(top, #246416, #349622); 246416", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; майже те саме, що й у попередньому блоці */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* Колір тексту кнопки при натисканні на неї */ background-color: #000000; background : -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#246416)), background: -moz-linear-gradient(top, #FF0000, #246416); .Microsoft.gradient(startColorstr="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImag eTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; ) /* CF7 Messages - Стиль повідомлень про успішне відправлення, помилки і т.д. */ .wpcf7 .wpcf7-validation-errors( /* Стиль повідомлень при помилках валідації */ border:none; /* Рамка блоку повідомлення */ background-color:#246416; /* Фон */ color:#fff; /* Колір тексту */ margin:0;/* Зовнішній відступ */ padding:20px; -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Стиль повідомлень про успішне відправлення */ border:none; /* Рамка блоку повідомлення */ background-color:#7ad33f; /* Фон */ margin:0; /* Зовнішній відступ */ padding:20px; border-radius: 10px; border-radius: 10px;) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px; color: white; ). nd-color: #349622; padding:5px; padding-left: 5px; padding-right: 5px; border-radius:10px; width: 290px; color: white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( float: left; ) .wpcf7-form .mright20( margin-right: 20px; ) .wpcf7-form .mright40( margin-right: 40px; ) .wpcf7-form . both;

Contact Form 7 може керувати численними контактними формами, де ви можете гнучко налаштовувати вміст форм та пошти з досить простою розміткою. Форми мають вбудовану підтримку Ajax відправки, CAPTCHA, спам фільтру Akismet і не тільки.

Документація та підтримка

Скріншоти

Встановлення

1. Завантажте всю папку contact-form-7 у каталог /wp-content/plugins/ .
2. Активуйте плагін на сторінці «Плагіни» на панелі керування WordPress.

У меню консолі WordPress ви знайдете вкладку 'Зворотній зв'язок'.

Щоб дізнатися, як правильно користуватися плагіном, ви можете відвідати його домашню сторінку.

Відгуки

Я бачу безліч людей, які мають цей інструмент, тому що "використовуйте деяку версію, що є bundled in theme, - все це може бути з моїм досвідом, що після того, як ви використовуєте його на кілька років на багатьох місцях є великими. на те, що те, що є, щоб зробити час і безкоштовно для кожного. Cheers!

Учасники та розробники

«Contact Form 7» - проект із відкритим вихідним кодом. У розвиток плагіна зробили свій внесок такі учасники:

Учасники

Журнал змін

Для отримання додаткової інформації дивіться Релізи.

5.1.6

• CSS: removes a style rule from the stylesheet that was unnecessary and conflicting with Twenty Twenty's rules.
• REST API: retrieves the contact form ID explicitly from the route parameters.

5.1.5

• Config Validator: Новий тестовий пункт для помилок.
• Config Validator: Новий test item для attachments_overweight error.

5.1.4

• reCAPTCHA: Представляємо константи WPCF7_RECAPTCHA_SITEKEY та WPCF7_RECAPTCHA_SECRET.
• reCAPTCHA: Представляємо перехоплювачі фільтра wpcf7_recaptcha_sitekey та wpcf7_recaptcha_secret.
• Додавання параметра $status до фільтра wpcf7_form_response_output.
• Створює випадковий код, коли користувач є зареєстрованим користувачем.
• Представляємо WPCF7_ContactForm::unit_tag(), публічний метод, що повертає тег юніту.
• reCAPTCHA: видає інше повідомлення у спам-журнал у випадках, коли маркер відповіді порожній.
• Прапорець згоди: підтримка опції label_first у погоджувальному формі.

5.1.3

• Виправлено помилку, яка призводила до неможливості скасувати вибір параметра у вкладці Пошта.

5.1.2

• Постійний контакт: Наведено селектор списку контактів.
• Постійний контакт: Додаткове налаштування constant_contact.
• reCAPTCHA: представлені перехоплювачі фільтрів wpcf7_recaptcha_actions та wpcf7_recaptcha_threshold.

5.1.1

• reCAPTCHA: Змінює реакцію на порожні токени відповіді.

5.1

• Подано модуль інтеграції Постійний контакт.
• Оновлено модуль reCAPTCHA для підтримки reCAPTCHA v3.
• Додає правила стилю Темного режиму.

5.0.5

• Виправлено проблему невідповідності між get_data_option() та get_default_option() у класі WPCF7_FormTag.
• Викликає помилки PHP, що виникають при викликах unlink().
• Представлено wpcf7_is_file_path_in_content_dir() для підтримки константи UPLOADS.

5.0.4

• Явно встановлює аргумент power_type у виклику register_post_type() для виправлення проблеми, пов'язаної з несанкціонованим підвищенням привілеїв.
• Вкладення локального файлу – заборонено вказувати абсолютні шляхи до файлів, що розташовані поза каталогом wp-content.
• Конфігураційний валідатор — додає тестовий елемент для виявлення некоректних налаштувань файлів вкладень.
• Виправлено помилку у функції зворотної сумісності JavaScript для застарілих браузерів, які не підтримують атрибут-заповнювач HTML5.
• Чекбокс згоди - відключає функцію do-not-store форм-тега.

5.0.3

• CSS: Застосування стилю курсора «не дозволено» під час наведення на кнопки надсилання в неактивному стані.
• Прапорець згоди: ревізія інтерфейсу генератора тегів, для заохочення використання кращих опцій захисту особистих даних.
• Використання функції wpcf7_anonymize_ip_addr().
• Наведено опцію consent_for:storage для всіх типів форм-тегів.

5.0.2

• Доданий розділ «Повідомлення про приватність» у файлі readme.txt.
• Оновлено контент у мета-блоці Інформація.
• Використовуйте get_user_locale() замість get_locale(), де це доречніше.
• Прапорець згоди: Скидання статусу вимкнених кнопок надсилання після успішного застосування.

5.0.1

• Виправлено некоректне використання _n().
• Перевірка конфігурації: виправлено неправильну кількість попереджень на вкладці «Додаткові параметри».
• Перевірка конфігурації: виправлено неправильне оброблення спеціального поштового тега [_site_admin_email] у полі заголовка «От».
• Прапорець Acceptance: вказані атрибути class та id були застосовані до неправильного елементу HTML.
• Перевірка конфігурації: якщо для поштових скриньок, таких як Cc або Reply-To, існує додатковий поштовий заголовок, але можливе порожнє значення, повернеться помилка «Неправильний синтаксис поштової скриньки».
• Очевидно, вкажіть четвертий параметр add_action(), щоб уникнути передачі ненавмисних значень параметрів.
• Перевірте, чи цільовий каталог не є порожнім, перш ніж видаляти його.

5.0

• Додаткові настройки: on_sent_ok та on_submit були видалені.
• Нове додаткове налаштування: skip_mail.
• Фламінго: заголовок каналу, що входить, змінюється разом зі зміною заголовка відповідної контактної форми.
• Події DOM. Весь об'єкт відповіді API доступний через властивість event.detail.apiResponse.
• HTML-пошта: додає атрибути, пов'язані з мовою, в заголовок HTML.
• Завантаження файлу: Встановлює атрибут прийняття у полі завантаження.
• Подано новий клас WPCF7_MailTag.
• Дозволяє перервати спробу надсилання пошти за допомогою перехоплювача дії wpcf7_before_send_mail. Крім того, ви можете встановити статус користувача і повідомлення через перехоплювач дії.
• Прапорець Acceptance: дозволяє вказувати умови частини вмісту тега форми.
• Прапорець Acceptance: Підтримує опціональний параметр.
• Нові спеціальні поштові теги: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name],__user_ [_user_display_name].
• Нові перехоплювачі фільтрів: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type), and wpcf7_mail_tag_replaced_($type)
• Нові функції form-tag: zero-controls-container та not-for-mail