Contact Form 7 — WordPress плагін для контактної форми

Зазвичай сайту потрібна форма зворотного зв'язку взаємодії з власником сайтів. Одним із наших фаворитів є Contact Form 7. Давайте подивимося, що вона може робити!

Contact Form 7 – безкоштовний, простий та гнучкий (у WordPress це зазвичай означає, що є проста установка для тих, кому подобається простота, і багато глибини та складності для тих, хто любить заглибитись) плагін форми зворотного зв'язку. На думку багатьох, Contact Form 7 — один із найкращих плагінів форми контакту для нашої улюбленої системи керування контентом. Цей плагін був завантажений понад 1 млн разів.

Ви можете переглянути докладний огляд цього плагіна у нашому відео уроці:

Плагін підтримує множинні форми зворотного зв'язку, а також підтримує відправлення через AJAX, капчу, фільтрацію спаму Akismet та завантаження файлів. Остання версія на момент написання цієї статті – 4.5.

Дивіться також:

• Оптимізуємо плагін контактної форми Contact Form 7
• Онлайн форми на WordPress — 20 найкращих преміум плагінів від CodeCanyon
• Огляд кращих плагінів контактних форм для WordPress
• Використання контактних форм у WordPress
• Як додати форму Google Forms на ваш сайт на WordPress
• Як створити просту контактну форму для WordPress

Офіційний сайт - ContactForm7.com. Завантажити плагін можна з директорії плагінів WordPress. Детальну документацію можна знайти у розділі сайту.

Якщо ви не знаєте, що таке плагіни і як їх встановлювати, перегляньте цей урок. Після встановлення та активації, ви побачите окремий пункт меню "Contact" в інтерфейсі адміністратора.

Код форми

Ось проста форма, де ви можете замовити мобільний телефон. Ви можете вказати марку, колір та спосіб оплати.

<p>Product *<br /> [select* product "iPhone" "Samsung Galaxy S2" "htc Desire"] </p>
<p>Color *<br /> [select* color "black" "white" "grey"] </p>
<p>Name *<br /> [text* your-name] </p>
<p>Email *<br /> [email* your-email] </p>
<p>Preferred payment <br /> [radio paymethod "VISA" "MASTERCARD" "AMEX"]</p>
<p>[checkbox quickdelivery] Quick delivery (1 day)</p>
<p>[submit "Place order"]</p>

Вставка коду форми

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

[contact-form-7 id="38" title="cell-phone-ordering-form"]

Базовий синтаксис

Синтаксис тегів включає поля тип, ім'я и значення. Зірочкою відзначаються обов'язкові елементи.

[type name values] for example: [radio paymethod "VISA" "MASTERCARD" "AMEX"]

Типи тегів

Ось список усіх тегів, які ви можете використовувати у ваших формах:

• Текстові поля (text, text*, email, email*, textarea та textarea*).
• Чекбокси, радіобаттони та меню (checkbox, checkbox*, radio, select та select*).
• Завантаження та прикріплення файлів (file та file*).
• Капча (captchac та captchar).
• Контрольне питання (Quiz).
• Чекбокс злагоди (acceptance).
• Кнопка надсилання (submit).

Створення двох-колонкової форми

Ми можемо швидко створити форму у дві колонки, просто використовуючи трохи HTML та CSS. Невеликий секрет у тому, що ми комбінуємо HTML із тегами форми.

<!-- TWO COLUMN FORM -->
<div class="clearfix">
	<div id="left">
		First name [text first-name] <br/>
		Email [email* your-email]
	</div>
	<div id="right">
		Last Name[text last-name] <br/>
		Phone[text your-phone]
	</div>
</div>

Subject [text* your-subject] <br/>
Message [textarea* your-message] <br/>
[submit "Send"]
<!-- /TWO COLUMN FORM -->

Потім код CSS. Нічого особливого просто базовий стиль.

#left {  
    width: 300px;  
    float: left;  
}  
  
#right {  
    width: 250px;  
    float: left;  
}  
  
.clearfix:after {  
    content:"\0020";  
    display:block;  
    height:0;  
    clear:both;  
    visibility:hidden;  
    overflow:hidden;  
}  
  
.clearfix {  
    display:block;  
}

Розширений синтаксис

Синтаксис тегів може бути ширшим. Параметр опції позначає поведінку та вигляд. Оголошення параметрів не обов'язково, але як ви можете це зробити. Зверніть увагу, що у цьому прикладі ми використовуємо властивості id и клас. Ви можете використовувати CSS та JavaScript, щоб розширити вашу форму.

[type name options values]  
  
for example:  
[radio paymethod id:paynow class:paythis "VISA" "MASTERCARD" "AMEX"]

Встановити шаблон листа

У Contact Form 7 ви можете просто редагувати шаблони листів. Текст, HTML код та дані форми можуть комбінуватися відповідним чином. Зверніть увагу, що дані з форми у дужках. Нижче наведено приклад для тіла листа.

Dear [yourname],  
  
You have just ordered a [product] product in [color] color!  
Soon you will get an email with the link to where you can pay for your order.  
  
---  
Thanks for buying!  
OurCompany LLC, www.ourcompany.com

Ось список того, що ви можете встановити через панель адміністратора:

• основні поля заголовка (адресат, відправник та тема);
• тіло листа;
• додаткові заголовки;
• Прикріплені файли;
• режим HTML.

Додавання капчі

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

Для використання капчі у ваших формах вам потрібно використовувати теги форми captchac и captchar.

• Сaptchac повертає питання капчі і представляє елементimg /> для зображення капчі.
• Captchar повертає відповідь на капчу і представляє елементinput type="text" /> для поля відповіді.

Тег captchac повинен завжди поєднуватися з тегом captchar однаковим ім'ям. Наприклад, ось так:

<!-- insert this into your CF7 form code -->
[captchac captcha-1] [captchar captcha-1]

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

Failed to send your message. Please try later або contact administrator by other way...

Якщо сервер не дозволяє надсилати пошту через sendmail(), ви можете використовувати плагін для надсилання пошти через SMTP. Обидва варіанти сумісні з WordPress 3.3. Ось плагіни, які можуть вирішити ваші проблеми:

• WP Mail SMTP
• Налаштуйте SMTP

Завантажте та встановіть вибраний плагін у WordPress. Вкажіть налаштування для вашого SMTP сервера на сторінці налаштувань.

Свої повідомлення про події

Ми можемо просто змінити повідомлення, які відображаються під час деяких подій.

Навіть краще, ми можемо використовувати HTML-код у блоках введення! Спробуйте цей:

Your message was successfully sent. Thank you!
<br/>
<img src="http://domain.com/yourpicture.jpg"/>

Підтримка мов

Contact Form 7 за замовчуванням показує форми англійською, але включає більше 40 мов для перекладу, і ви можете створити форму будь-якою мовою. Щоб використовувати інтерфейс адміністратора своєю мовою, встановіть константу WPLANG у файл WP-config.php.

// Change this line:
define ('WPLANG', 'ja');

Використання введених даних на сервері без надсилання пошти

Якщо ви хочете щось відмінне від відправки поштою, вам потрібно використовувати наступний код:

add_action("wpcf7_before_send_mail", "wpcf7_do_something_else");

function wpcf7_do_something_else(&$wpcf7_data) {

    // Here is the variable where the data are stored!
    var_dump($wpcf7_data);

    // If you want to skip mailing the data, you can do it...
    $wpcf7_data->skip_mail = true;

}

Встановлення прав для зміни форми лише адміністраторами

Щоб захистити редагування, використовуйте наступний код:

define('WPCF7_ADMIN_READ_CAPABILITY', 'manage_options');
define('WPCF7_ADMIN_READ_WRITE_CAPABILITY', 'manage_options');

Динамічне заповнення полів

За замовчуванням значення Contact Form 7 статичні. Наприклад, у вас є параметр GET, який потрібно використовувати для заповнення форми. Тоді рішення для вас є Contact Form 7 Dynamic Text Extension. Цей плагін підтримує новий тип тега, що дозволяє динамічну генерацію контенту. Після встановлення та активації плагіна, у Contact Form 7 буде два нові типи: Dynamic Text Field та Dynamic Hidden Field.

Як ви бачите, цей плагін форм зворотного зв'язку має великий потенціал. Ми описали лише невелику частину його можливостей. Якщо ви не знайшли чогось тут, заглибтесь у документацію на офіційному сайті. Не бійтеся почати зараз! Насолоджуйтесь!

Джерело: code.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/