Начало > Помощен център > Апликации > WordPress > Създаване на WordPress бизнес сайт – страница Contact

Създаване на WordPress бизнес сайт – страница Contact

Помощен център

Създаване на WordPress бизнес сайт – страница Contact

Повечето страници от бизнес сайта предоставят в различна форма само основна информация за компанията, продуктите и услугите, и линкове към страницата за контакт, което прави тази страница една от най-важните на сайта.

Страницата за контакт не е място за впечатляващи дизайн ефекти и маркетингови послания - маркетинга си е свършил работата на другите страници от сайта и сега посетителите трябва да могат да се свържат с представител на компанията.

Затова на нашата контактна страница предоставяме подробна информация за начините, по които посетителите може да контактуват с компанията - формуляр за изпращане на съобщения, телефони за връзка, пощенски адрес, линкове към акаунти на компанията в социалните медии, карта на местоположението на главния офис и информация за работното време.

Структура на страница Contact

За изграждането на структурата ползваме както познати вече, така и нови SiteOrigin widgets - SiteOrigin Contact Form, SiteOrigin Social Media Buttons и SiteOrigin Google Maps:

Структура на страница Contact

Създаваме нов ред за секция Contact Us и го разделяме на две колони както е показано на изображението:

Разделяне реда на две колони

Добавяме разстояние от 45 пиксела над и под секцията със следните настройки:

Настройки за позициониране на ред

Настройване на SiteOrigin Contact Form

Маркираме лявата колона и добавяме widget-a SiteOrigin Contact Form:

Икона на SiteOrigin Contact Form

Много по-лесно можеше да ползваме елементарната контактна форма от примерния сайт, но искаме да ви покажем как да конфигурирате професионален имейл формуляр с настройки на всяко поле и текст, с валидиране на потребителската информация и RECAPTCHA 2 анти спам защита.

На следващото изображение виждаме как изглежда панела за управление на SiteOrigin Contact Form:

Общ изглед на панела SiteOrigin Contact Form

Панел Settings

Започваме персонализирането на контактната форма от панела Settings.

Ако маркираме полето Display title съдържанието на полето Title (Contact Us) ще бъде изписано над формуляра.

В полето To email address системата автоматично въвежда контактния имейл на WordPress администратора, може да въведем произволен имейл адрес, но трябва да имаме достъп до него, защото в тази поща ще се получават съобщенията, изпратени от формуляра.

В полето From email address въвеждаме произволен имейл адрес (дори несъществуващ адрес), от който ще изглежда, че се изпращат съобщенията от формуляра.

Ако въведем тема на съобщенията в полето Default subject системата ще използва тази тема ако потребителя не въведе тема във формуляра.

В полето Subject prefix може да въведем някакъв префикс, по който да различаваме съобщенията от сайта от другите писма, ако не сме посочили отделна пощенска кутия за сайта.

В редактора създаваме съобщението, което ще се изписва на сайта след успешно изпращане на съобщение.

Настройки в панела Settings

В полето Submit button text въвеждаме текста на бутона. Ако маркираме полето Indicate required fields... съдържанието на полето Required field indicator message ще се изпише във формуляра и всяко отделно поле, за което е маркирана опцията, ще бъде задължително за попълване:

Създаване на задължителни за попълване полета

В нашия сайт това съобщение е форматирано в жълт цвят, но няма настройка за тази промяна в интерфейса на SiteOrigin Contact Form. Затова ще използваме случая да покажем как променихме цвета на текста с помощта на SiteOrigin CSS - един много удобен инструмент за редактиране CSS атрибутите на всеки отделен елемент в сайта.

Отваряме SiteOrigin CSS като кликнем Appearance > Custom CSS:

Достъп до SiteOrigin CSS

В следващия панел кликаме маркираното на изображението бутонче:

Бутон за зареждане интерфейса на SiteOrigin CSS

В левия панел на екрана се зареждат настройките на SiteOrigin CSS. Кликаме върху елемент от сайта, в случая текста във формуляра, изчакваме една-две секунди за да открие програмата коректния CSS код, и в съответното поле променяме настройка на елемента - например може да променим шрифта, големината, стилът, ширината на линията, разстоянието между съседните елементи... ние променихме само цвета. Веднага промяната се отразява на екрана.

Когато желаем да запазим промяната кликаме маркираното със зелен цвят поле:

Промяна на цвета на текст в SiteOrigin CSS

Генерираният от програмата код се записва в панела на SiteOrigin CSS. За да запазим промяната кликаме бутона Save CSS:

Запазване на код в SiteOrigin CSS

Разбира се, за да се възползваме максимално от възможностите на програмата трябва да имаме много добри познания за CSS и възможностите, които предоставя, за управление на структурата и дизайна на сайта.

Още едно огромно предимство на SiteOrigin CSS е, че плъгина не се нуждае от SiteOrigin Page Builder, а може да работи самостоятелно с всяка платена или безплатна WordPress тема.

Панел Fields

В този панел създаваме всички полета във формуляра. Избираме типа на полето от менюто Field Type, въвеждаме име на полето в Label, ако желаем кратко описание на полето може да го въведем в Description.

Ако желаем полето да е задължително за попълване маркираме полето Required field. В полето Missing message въвеждаме съобщението за грешка, което ще се изписва когато потребителя не попълни задължително поле.

Настройки на панел Fields

По подобен начин създаваме всички полета, които желаем да съдържа нашият формуляр.

Панел Spam Protection

Панелът съдържа два под-панела - reCAPTCHA v2 и Akismet. За да ползваме reCAPTCHA v2 трябва да маркираме полето Use reCAPTCHA v2 и в следващите две полета трябва да въведем двата ключа, с които сме регистрирали reCAPTCHA (прочетете повече за reCAPTCHA).

За да активирате анти спам плъгина Akismet трябва първо да го инсталираме, да се регистрираме за безплатен или платен акаунт и да маркираме полето Use Akismet filtering. От менюто може да избираме между опциите показване на съобщение за грешка или маркиране като спам в темата.

Настройки на панел Spam Protection

Панел Design

Панелът съдържа следните под-панели, които съдържат настройки за почти всички елементи във формуляра:

Общ изглед на панел Design

Панел Container

Тук посочваме цвят на фона на целия формуляр (Background color), разстояние между елементите и границата (Padding), цвят, дебелина и стил на границата (Border...):

Настройки в панел Container

Панел Field labels (етикети на полетата)

Посочваме шрифта, големината и цвета на етикетите, позицията не етикета спрямо полето избираме от менюто Position, от полето Align избираме настройките за позициониране между ляво, дясно, център и подравняване:

Настройки в панел Field labels

Панел Fields (полета)

Посочваме шрифта, големината и цвета на текста, който се въвежда в полетата:

Настройки в панел Fields

Посочваме ширината на текстовата област, цвета на фона и настройките на границата - цвят, дебелина, стил и закръгляване:

Допълнителни настройки в панел Fields

Панел Field description (описание на полетата)

Определяме големината, цвета и стила на текста:

Настройки в панел Field description

Панел Error messages (съобщения за грешки)

Дефинираме фона на полето на съобщението, цвят на границата и на текста, разстояние между текста и границата (Error padding) и разстояние между съседните елементи (Error margin):

Настройки в панел Error messages

Съобщение за грешка във формуляра

Панел Submit button за настройване на бутона

За да активираме настройките на бутона първо маркираме полето Style submit button. След това дефинираме цвят на фона, може да дефинираме комбинация от нюанси (Gradient intensity), както и познатите настройки на границата (Border...).

Настройки в панел Submit button

Посочваме атрибути на текста - цвят, дебелина, разстояние до границата и позициониране - ляво, дясно и център:

Настройки на текста на бутона

Панел Input focus

Настройката input focus създава граница в посочения цвят и дебелина около полето, в което въвеждаме текст:

Настройки в панел Input focus

С това завършихме настройването на контактната форма.

Панел за информация Features

Сега продължаваме със секциите в дясната колона на Contact Us и първо ще създадем трите области с икони и информация с помощта на widget-a SiteOrigin Features, който вече ползвахме в други страници от сайта.

Отваряме widget-a с Edit и избираме атрибутите на иконата - цвят на фона, позиция, избор на икона, цвят и размер на иконата:

Настройване атрибути на икона

В полето Title text въвеждаме заглавие, а в редактора въвеждаме и форматираме информацията:

Въвеждане на информация в редактор

В следващия панел Font Design имаме достъп до настройките на различните текстове в съответните под-панели:

Изглед на панел Font Design

Избираме шрифт, големина и цвят на заглавието и текста:

Настройки в под-панел Title

Настройки в под-панел Text

Информацията в полетата не съдържа линкове, затова не правим никакви промени в панела More Link.

Остава да дефинираме формата на контейнера на иконата, големината на контейнера и на самата икона, колко панела да разположим на един ред и дали да маркираме Responsive настройките за устройствата с по-малки екрани .

Допълнителни настройки в панел Features

Панел Работно време (Hours)

За създаване на следващия панел използваме интерфейса за подзаглавия (sub headline) на widget-a SiteOrigin Headline. Въвеждаме текста като си помагаме за форматиране с HTML тагове:

Въвеждане на текст като подзаглавие с HTML тагове

<strong>Monday - Friday:</strong> 9:00 - 18:00 <br/>
<strong>Saturday:</strong> 10:00 - 14:00 <br />
<strong>Sunday:</strong> Closed

Избираме големина на шрифта, позициониране и ширина на линията, от която зависи разстоянието между редовете, които всъщност са един ред, разделен на три с таг <br /> :

Настройки на текста в sub headline

Използваме стандартните настройки за разделителя, които ползваме и в заглавието на страницата:

Настройки на разделителя

SiteOrigin Social Media Buttons

За да създадем икони с линкове към акаунтите в социалните мрежи на компанията, използваме widget-a SiteOrigin Social Media Buttons.

Настройването е изключително лесно - отваряме нов панел, от менюто избираме социална мрежа, автоматично системата попълва URL адреса в полето URL, избираме цвят на фона и цвят на иконата:

Настройване на икони с линкове към социални мрежи

В панела Design and Layout посочваме дали след кликане линка да се отвори в нов прозорец, избираме типа на иконата (Button theme), размера (Icon size), закръглянето (Rounding), разстоянието до границата (Padding), позициониране (Align), позициониране в мобилни устройства и разстояние до съседни елементи (Margin).

Настройки в панел Design and Layout

SiteOrigin Google Maps

Използваме случая за да представим още един widget - SiteOrigin Google Maps.

Създаваме нов ред и активираме widget-a. В полето Map center въвеждаме адреса - в примера това е публичния адрес на Айфеловата кула, в много сайтове ползват адреса на Белия дом :)

Важно е да определим височина на секцията в полето Height:

Настройване на SiteOrigin Google Maps

Правим снимка на картата, качваме я в Media Library и я въвеждаме в полето Fallback Image. В случай, че има проблем със зареждането на картата, widget-a ще зареди изображението:

Настройване на Fallback Image

За да настроим Google Maps трябва да имаме безплатен (или платен) API ключ и да го копираме от нашия акаунт в Google.

За да въведем ключа в widget-a, кликаме Plugins > SiteOrigin Widgets и в полето за търсене въвеждаме maps за да намерим лесно widget-a.

Настройване на API ключ в SiteOrigin Google Maps

Кликаме бутона Settings и въвеждаме ключа от Google в полето API key:

Поле за въвеждане на API key

С това приключихме настройването на контактната страница от сайта:

Общ изглед на страница Contact

Сега нека проверим дали формуляра за съобщения работи коректно. Попълваме полетата, удостоверяваме пред reCAPTCHA, че не сме роботи, и кликаме бутона Contact Us:

Попълване на формуляр за контакт

Информацията е изпратена успешно и на мястото на формуляра се зарежда съобщението за успешно изпращане, което въведохме в началото:

Thanks for contacting us. We'll get back to you shortly.

Проверяваме в пощата на администратора и откриваме изпратеното съобщение с префикса в темата:

Получено съобщение от формуляра на сайта