Како додати прилагођени HTML садржај у WordPress обрасце

Формуларни формулари нису само поља за унос. Понекад је потребно да нешто објасните, поделите одељке, прикажете слику или додате контекст између питања. Прилагођени HTML садржај трансформише статичке формуларе у вођена искуства. Ево како да додате богат садржај својим WordPress формуларима.

Шта је HTML блок?

Дефиниција

HTML блок је посебан елемент форме који приказује садржај без прикупљања уноса. Он приказује HTML између поља ваше форме, омогућавајући вам да додате текст, слике, видео записе, разделнике и још много тога.

HTML блок наспрам регуларних поља

Зашто користити HTML блокове?

1. Упутства и смернице

Помозите корисницима да разумеју шта да раде:

• Објасните сложена питања
• Наведите контекст
• Захтеви за листу
• Водич кроз одељке

2. Визуелна организација

Разбијте дугачке форме:

• Наслови одељака
• Хоризонтални раздели
• Визуелни сепаратори
• Груписани садржај

3. Обогаћени медији

Додајте визуелне елементе:

• Слике и иконе
• Уграђени видео снимци
• инфограпхицс
• Дијаграми

4. Правни прописи и усклађеност

Прикажите важне информације:

• Текст услова и одредби
• Обавештења о приватности
• Одрицање
• Обавезна откривања

КСНУМКС. Брандинг

Ојачајте свој бренд:

• логотипи
• Боје бренда
• Цустом стилинг
• Доследан изглед

Додавање HTML блока

Корак 1: Додајте поље

1. Отворите свој образац у АФБ
2. Наћи ХТМЛ Блоцк у листи поља
3. Превуците га на жељену позицију у форми

Корак 2: Додајте свој садржај

1. Кликните на HTML блок да бисте га изабрали
2. Отвори панел са подешавањима
3. Унесите свој HTML садржај
4. Прегледајте да бисте проверили изглед

Корак 3: Позиција и стил

1. Превуците да бисте променили редослед ако је потребно
2. Додајте уграђене стилове или класе
3. Тест на фронтенду

Уобичајена употреба HTML блокова

1. Наслови одељака

Лични подаци Молимо вас да наведете своје контакт податке испод.

Резултат:

Lični podaci
У наставку наведите своје контакт податке.

2. Хоризонтални разделник

Резултат: Јасна линија која раздваја делове.

3. Кутија са упутствима

 Важно: Молимо вас да припремите број поруџбине пре него што наставите.

4. Упутства са тачкама

Пре слања, молимо вас да се уверите: Сва обавезна поља су попуњена Ваша имејл адреса је тачна Прегледали сте услове испод

5. Слика

6. Уграђени видео

7. Кутија за упозорење/аларме

 ⚠️ Упозорење: Пријаве се не могу уређивати након слања.

8. Успех/Инфо оквир

 ✓ Ваш напредак се аутоматски чува.

9. Обавештење о приватности

Ваше информације су заштићене нашом Политиком приватности . Никада нећемо делити ваше податке са трећим лицима.

10. Резиме услова и одредби

 Услови коришћења услуге Слањем овог формулара, пристајете на...

Примери распореда формулара

Вишеделни образац

[HTML блок: Одељак 1 - Заглавље за личне податке] Поље за име Поље за имејл Поље за телефон [HTML блок: Разделник] [HTML блок: Одељак 2 - Заглавље за детаље пројекта] Падајући мени за тип пројекта Опис текстуалног поља Поље за буџет [HTML блок: Разделник] [HTML блок: Одељак 3 - Заглавље за завршне кораке] Поље за потврду „Услови“ за отпремање датотеке Дугме за слање

Наставни образац

[HTML блок: Порука добродошлице и упутства] [HTML блок: Индикатор корака 1] Питање 1 Питање 2 [HTML блок: Индикатор корака 2] Питање 3 Питање 4 [HTML блок: Подсетник за преглед] Дугме за слање

Образац

[HTML блок: Лого компаније] [HTML блок: Назив и опис позиције] Поље за име Поље за имејл [HTML блок: Упутство „Отпремите свој животопис“ са захтевима за форматирање] Поље за отпремање датотеке [HTML блок: Изјава о једнаким могућностима] Дугме за слање

Стилизовање HTML блокова

Инлине Стилес

Додајте стилове директно елементима:

Ваш стилизовани садржај овде.

Уобичајена својства стила

Позадина: background: #f5f5f5; Паддинг: padding: 15px; Маргина: margin: 20px 0; Ивица: border: 1px solid #ddd; Полупречник ивице: border-radius: 5px; Величина фонта: font-size: 14px; Боја: color: #333; Поравнање текста: text-align: center;

Креирање стилизованих кутија

Инфо кутија (плава):

 ℹ️ Информативна порука овде

Кутија успеха (зелена):

 ✓ Порука о успеху овде

Кутија за упозорење (жута):

 ⚠️ Упозорење овде

Поље за грешку (црвено):

 ✕ Грешка или важно упозорење овде

Савети за прилагодљив дизајн

Слике

Увек користите максималну ширину за прилагодљиве слике:

Видео записи

Користите прилагодљиви омотач за уграђене видео записе:

Читљивост текста

• Користите релативне величине фонта (em, rem)
• Одржавајте дужину редова читљивом
• Адекватно размакање на мобилним уређајима

Најбоље праксе

1. Нека буде сажето

• Кратак, скенљив текст
• Табеле изнад пасуса
• Само битне информације

2. Визуелна хијерархија

• Обриши наслове
• Доследан стил
• Логички ток

3. Приступачност

• Алтернативни текст за слике
• Довољан контраст боја
• Семантички HTML (h2, h3, p, ul)
• Не ослањајте се само на боју за значење

4. Не претерујте

• Превише садржаја преоптерећује
• Уравнотежите садржај помоћу поља за унос
• Сврха сваког HTML блока

5. Тестирајте темељно

• Преглед на десктопу и мобилном уређају
• Проверите да ли сви линкови раде
• Провера учитавања слика
• Тестирајте у различитим прегледачима

Идеје за напредне HTML блокове

Показатељ напретка

1  2  3 Корак 2 од 3: Детаљи пројекта

Распоред са две колоне

Опција А Опис опције А... Опција Б Опис опције Б...

Склопиви одељак (Детаљи/Резиме)

Кликните да бисте прочитали комплетне услове Комплетан текст услова и одредби овде...

Листа икона

✓ Бесплатна достава за поруџбине преко 50 долара ✓ 30-дневна гаранција поврата новца ✓ Корисничка подршка 24/7

Одбројавање/Хитност

 🔥 Временски ограничена понуда - пошаљите захтев до петка да бисте се квалификовали!

Безбедносна разматрања

Шта је безбедно

• Стандардне HTML ознаке (p, div, h1-h6, ul, li, итд.)
• Уграђени стилови
• Слике из поузданих извора
• Уграђени видео снимци са главних платформи

Шта да избегавате

• Јаваскрипт у HTML блоковима (може бити уклоњен)
• Спољне скрипте
• Непоуздани извори iframe-а
• Елементи форме унутар HTML блокова

Напомена о ограничењима скрипти

Већина креатора образаца „дезинфикује“ HTML како би спречили XSS нападе. JavaScript и одређене ознаке могу бити аутоматски уклоњене из безбедносних разлога.

Решавање проблема

HTML се не приказује

• Проверите синтаксичке грешке
• Проверите да ли су ознаке правилно затворене
• Неке ознаке могу бити ограничене

Стилизовање није примењено

• Проверите синтаксу инлине стила
• CSS теме може да превазиђе
• Користите специфичније стилове или !важно

Слике се не приказују

• Проверите да ли је URL адреса слике исправна
• Проверите дозволе за слике
• Користите пуну URL адресу (https://…)

Прекид распореда на мобилним уређајима

• Додај максималну ширину: 100% сликама
• Користите флексибилне распореде (flexbox)
• Тестирање на стварном мобилном уређају

резиме

Додавање прилагођеног HTML садржаја у обрасце:

1. Додај HTML блок – Превуците у свој образац
2. Унесите садржај – HTML у панелу са подешавањима
3. Поставите се на одговарајући начин – Између релевантних поља
4. Стилизујте по потреби – Уграђени стилови или класе
5. Одржавајте приступачним – Алтернативни текст, контраст, семантички HTML
6. Тестирајте респонзивно – Десктоп и мобилни уређаји

Закључак

HTML блокови трансформишу обрасце из једноставних упитника у вођена искуства. Додајте контекст тамо где је корисницима потребан, организујте дугачке обрасце у логичке одељке и укључите богате медије како бисте ангажовали и информисали кориснике. Било да је у питању наслов одељка, оквир са упутствима или уграђени видео, прилагођени HTML садржај чини ваше обрасце ефикаснијим и једноставнијим за коришћење.

Аутоматски креатор образаца Укључује тип поља HTML блок, што вам омогућава да додате било који HTML садржај између поља обрасца. Креирајте професионалне, информативне обрасце који воде кориснике кроз процес слања.

Спремни да побољшате своје форме? Преузмите аутоматски креатор образаца и почните да додајете прилагођени садржај већ данас.