Сделать форму на баннере

@kilometer · Регистрация: 02.08.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте.

На вордпрессе делаю сайт, мне нужно на баннер поставить форму обратной связи с кнопкой "перезвонить" и полями - имя, емэйл, телефон. Нужно сделать, чтобы при смене баннера, форма оставалась на прежнем месте.

Какими средствами (вордпресса, html, php или другими) это можно сделать и как, подскажите пожалуйста.

@Vlad03 · 06.08.2018, 09:51

kilometer, z-index попробуйте. А вообще, код показывайте.

@kilometer · 06.08.2018, 18:22 **[ТС]**

Сообщение от fol

Так, я кому говорил читать про позиционирование?

Контейнеру position: relative, внутреннему блоку (форме) position: absolute; left:0; top:0

Контейнкр это же у меня картинка, я так и сделала, как Вы пишете, картинке и форме задала классы, потом в css поставила этим классам значения, для картинки relative, для формы absolute, для нагляднлсти добавила рамки для обеих элементов. Визуально видно картинку в рамке и рамку для формы,а самой формы не видно.
А о том, что форма идет после картинки, может это потому,что картинка находится в заголовке и мне надо в заголовок код вписывать?

@gogolik · 06.08.2018, 18:35

Картинку оберните в div, который и будет контейнером с relative. В этот же блок добавьте код формы.

@kilometer · 06.08.2018, 20:09 **[ТС]**

Вобщем, задача моя поставить форму сверху картинки.
Код формы такой:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<p>Ваше имя (обязательно)<br />
[text* your-name] </p>
 
<p>Ваш email (обязательно)<br />
[text* your-email] </p>
 
<p>Ваш телефон (обязательно)<br />
[text* your-tel] </p>
 
<p>Тема <br />
[text your-subject] </p>
 
<p>Cообщение<br />
[textarea  your-message] </p>
 
<p>
[submit "Свяжитесь со мной"] </p>

Код на странице такой:

HTML5
1
2
3
4
5
<div class="con">
<img src="http://domen/wp-content/uploads/2018/07/banner-1600-560.png"  width="1600" height="585">" alt="" />
<div class="top">
<?php echo do_shortcode( '[[contact-form-7 id="266" title="Форма обратной связи"]]' ); ?>
</div>

В стилях такие строки:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
div.con {
position:relative; width: 1600px;
    height: 560px;
    border: 3px solid #73AD21;}
div.top {
 
position:absolute;top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

@kilometer · 06.08.2018, 20:12 **[ТС]**

У меня сейчас так -

HTML5
1
2
3
4
5
<div class="con">
<img src="http://domen/wp-content/uploads/2018/07/banner-1600-560.png"  width="1600" height="585">" alt="" />
<div class="top">
<?php echo do_shortcode( '[[contact-form-7 id="266" title="Форма обратной связи"]]' ); ?>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
div.con {
position:relative; width: 1600px;
    height: 560px;
    border: 3px solid #73AD21;}
div.top {
 
position:absolute;top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

@kilometer · 06.08.2018, 20:36 **[ТС]**

Сообщение от HectorPrima

Что значит на нее? Что бы по клику на баннере открывалась форма?
Тогда два варианта.
1. Разместить форму на странице... и эту страницу вызывать с баннера
2. Форма во всплывающем окне http://denis-creative.com/popup-contact-form/

Не то и не то. Нужно, чтобы картинка шла фоном, а сверху (не всплывающая) форма была помещена.

Сейчас я много чего перепробовала, в том числе div, position relative картинке и absolut для формы, и в данный момент у меня показывается картинка, на ней рамка формы, а сами окошки формы и кнопки не показываются.

Добавлено через 10 минут
Вот такой код -

HTML5
1
2
3
4
5
<div class="con">
<img src="http://domen/wp-content/uploads/2018/07/banner-1600-560.png"  width="1600" height="585">" alt="" />
<div class="top">
<?php echo do_shortcode( '[[contact-form-7 id="266" title="Форма обратной связи"]]' ); ?>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
div.con {
position:relative; width: 1600px;
    height: 560px;
    border: 3px solid #73AD21;}
div.top {
 
position:absolute;top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

@wwowa · 06.08.2018, 21:34

В коде закрывающего </div> не хватает.

@gogolik · 07.08.2018, 03:12

Всё отображается корректно - http://jsfiddle.net/gyv1p0xk/1/
Вероятно, проблема в чём-то ещё. Лучше скинуть ссылку на рабочий сайт, потому что, возможно, плагин добавляет какие-то стили для формы.

Добавлено через 6 часов 15 минут
В соседней теме подсказали, что был пропущен </div>. И правда, сам не заметил и фидл не подсказал.

@HectorPrima · 07.08.2018, 07:56

Вот как бы я сделал. При вставке шорткода в тело страницы добавил аттрибут html_class с именем стиля

HTML5
1
[contact-form-7 id="21" title="Контактная форма 1" html_class="custom_class"]

Далее в style.css или с помощью какого нибудь плагина добавил бы свой стиль custom_class типа такого

HTML5
1
2
3
4
5
.custom_class{
    background: url(https://www.toptal.com/designers/subtlepatterns/patterns/full-bloom.png);
    color:blue;
    padding:20px;
}

В итоге получаем:

@kilometer · 07.08.2018, 12:05 **[ТС]**

Сообщение от wwowa

В коде закрывающего </div> не хватает.

где конкретно?

@kilometer · 07.08.2018, 12:14 **[ТС]**

здорово. но я пытаюсь добиться форму на картинке. прикрепляю картинку, для наглядности.

@kilometer · 07.08.2018, 21:30 **[ТС]**

Сообщение от gogolik

Добавлено через 6 часов 15 минут
В соседней теме подсказали, что был пропущен </div>. И правда, сам не заметил и фидл не подсказал.

если я ставлю </div> в конце <div class="con"> то под баннером появляется поле с рамкой пустое, а под ним еще картинка баннера (вторая). У меня баннер находится в теме Вордпресса, в разделе заголовка.

если ставлю </div> после пути к картинке то появляется дублирующая баннер картинка огромных размеров, а баннер сам по себе остается тоже, выше этой картинки.

Добавлено через 47 минут

Сообщение от HectorPrima

Вот как бы я сделал. При вставке шорткода в тело страницы добавил аттрибут html_class с именем стиля

HTML5
1
[contact-form-7 id="21" title="Контактная форма 1" html_class="custom_class"]

Далее в style.css или с помощью какого нибудь плагина добавил бы свой стиль custom_class типа такого

HTML5
1
2
3
4
5
.custom_class{
    background: url(https://www.toptal.com/designers/subtlepatterns/patterns/full-bloom.png);
    color:blue;
    padding:20px;
}

В итоге получаем:

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

Но загвоздка вторая, "печальная" - теперь не могу стили шрифта, размеров полей поменять и общий размер формы.
Тонее, размер формы меняю - он у меня в рамке обведен и контур рамки нормально на баннере встал, а вот сама форма вылезает за ее края.
Насчет стилей шрифта - ставлю в пикселях меньшие значения, вообще ничего не меняется. То же и с полями, что в форме, в виде 50/20, что в css в виде hight 50px; - не меняется.
Догадываюсь, что может быть дело в родительских элементах, но вот не понимаю, какой же там у баннера-картинки может быть родительский шрифт? Вобщем, что-то не так, прошу помощи.

@kilometer · 07.08.2018, 21:31 **[ТС]**

А, да, картинку прикрепляю, с тем, что получилось

@wwowa · 07.08.2018, 22:15

Сообщение от kilometer

если я ставлю </div> в конце <div class="con"> то под баннером появляется поле с рамкой пустое

Сообщение от kilometer

если ставлю </div> после пути к картинке то появляется дублирующая баннер картинка огромных размеров

То есть после этого вы решили закрывающий тэг вообще не ставить. Типа без него "более-менее"

Но он должен быть.
И стили не работают, потому как разметка "разбежалась".
Я бы загнал "код страницы" в тот же "нотепад++" и проверил парные "дивы". Он хорошо подсвечивает их. Только очень тщательно.
Все похоже на то. Вроде все должно работать, но где то глючит. У меня типичная проблема, добавляется лишний закрывающий тэг, когда подсказкой в редакторе пользуешься. Ты вроде редактируешь, а он взял и добавил. А ты проглядел.
Потом почему то иногда такая конструкция вылазит <<div>. Ну и т.д.
Я бы начал с этого. Правило, что "если телевизор не работает, надо посмотреть включен ли он в розетку", только кажется глупым. В 90% случаев так и есть. ИМХО

@kilometer · 08.08.2018, 06:42 **[ТС]**

Попробовала в Ноте++, но не нашла, где там проверка. Понажимала то, что близко, разные опции, сравнения не произошло. Да и смысла не вижу, честно сказать. Там всего два места, куда можно закрывающий div вставить, оба я пробовала, результат меня не порадовал. На данный момент мне осталось только подвинуть форму выше, уместив ее в рамку.

Только двигать не получается, двигается рамка сама, т.е. область, заданная в стилях классом .custom_class
А сама форма живет своей жизнью, на мой взгляд перебиваются настройки от плагина. Может css нужно другой поквырять? Я сейчас делаю настройки в style.css всей темы. А надо, наверное плагин.

Добавлено через 35 минут
вот так отредактировала код для css, все равно не уменьшается форма и шрифт.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.custom_class{
    background: url(http://domen/wp-content/uploads/2018/08/fonchik.png ); 
    color:blue;
    padding:20px;
    position:absolute;top: 270px;
    right: 50px;
    width: 200px;
    height: 250px;
    border: 3px solid #73AD21;
    line-height: 1;
    vertical-align: -.0667em;
    font-size: .75em;
       
}

@kilometer · 08.08.2018, 21:53 **[ТС]**

Всем участникам спасибо за ответы!
Я, наконец, нашла решение. Форму двигала в стилях, в файле style.css. Меняла значение padding везде, и корректировала стили элементов p (поскольку формы я писала в этих тегах), input, .custom class, textarea.

Отдельное спасибо HectorPrima за наводку на верный результат.

ЗЫ. Поменяв цвет текста на белый, цвет поменялся не только в форме, но и по всей странице, где был текст. Как это исправить можно - чтобы на странице текст черным был, а в форме так и остался белым?

@HectorPrima · 09.08.2018, 05:37

Сообщение от kilometer

Поменяв цвет текста на белый, цвет поменялся не только в форме, но и по всей странице, где был текст. Как это исправить можно - чтобы на странице текст черным был, а в форме так и остался белым?

В идеале к таким просьбам нужно приводить пример CSS который менялся.
А лучше ссылку на сайт, т.к. CSS селекторы не всегда дают понять где они применяются.

@kilometer · 09.08.2018, 11:23 **[ТС]**

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* Basic Style */
p{ 
  margin:0 0 12px; 
  padding:0;
  font-size:8px; 
  line-height: 0.9em; 
  font-weight:small;
  color: #000000;
}
 
.custom_class{
    background: url(http://domen/wp-content/uploads/2018/08/fonchik.png ); 
    color:white;
    padding:20px;
    position:absolute;top: 270px;
    right: 50px;
    width: 200px;
    height: 250px;
    border: 3px solid #ff0000;
    line-height: 1;
    vertical-align: -.0667em;
    font-size: .75em;
       
}

Добавлено через 2 минуты
Я правила style.css. Цвет поставила черный (p), а на странице он все равно белый отображается.

Добавлено через 2 минуты
Применяться р, как я понимаю, должен ко всей теме, а custom_class только к форме(делала форму по Вашему примеру). Приоритетность, может как-то поставить?

@HectorPrima · 09.08.2018, 13:05

Без ссылки на сайт лично мне не понять в чем проблема.

@kilometer · 09.08.2018, 17:52 **[ТС]**

Cпасибо, уже решила проблему. Заключила в теги <fonts> с указанием цвета.

Новые блоги и статьи Все статьи Все блоги /
Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75

	Сделать форму на баннере 02.08.2018, 11:04. Показов 4350. Ответов 40 Метки framework, html, javascript, php, баннер, форма (Все метки) Здравствуйте. На вордпрессе делаю сайт, мне нужно на баннер поставить форму обратной связи с кнопкой "перезвонить" и полями - имя, емэйл, телефон. Нужно сделать, чтобы при смене баннера, форма оставалась на прежнем месте. Какими средствами (вордпресса, html, php или другими) это можно сделать и как, подскажите пожалуйста. 0

@Vlad03 112 / 108 / 42 Регистрация: 22.01.2017 Сообщений: 452
	06.08.2018, 09:51
	kilometer, z-index попробуйте. А вообще, код показывайте. 0

@gogolik Супер-модератор 3980 / 2147 / 833 Регистрация: 13.03.2010 Сообщений: 7,044
	06.08.2018, 18:35
	Картинку оберните в div, который и будет контейнером с relative. В этот же блок добавьте код формы. 0

@wwowa 308 / 261 / 70 Регистрация: 01.12.2008 Сообщений: 1,031
	06.08.2018, 21:34
	В коде закрывающего </div> не хватает. 0

@gogolik Супер-модератор 3980 / 2147 / 833 Регистрация: 13.03.2010 Сообщений: 7,044
	07.08.2018, 03:12
	Всё отображается корректно - http://jsfiddle.net/gyv1p0xk/1/ Вероятно, проблема в чём-то ещё. Лучше скинуть ссылку на рабочий сайт, потому что, возможно, плагин добавляет какие-то стили для формы. Добавлено через 6 часов 15 минут В соседней теме подсказали, что был пропущен </div>. И правда, сам не заметил и фидл не подсказал. 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	07.08.2018, 12:14 [ТС]
	здорово. но я пытаюсь добиться форму на картинке. прикрепляю картинку, для наглядности. Миниатюры 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	07.08.2018, 21:31 [ТС]
	А, да, картинку прикрепляю, с тем, что получилось Миниатюры 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	08.08.2018, 21:53 [ТС]
	Всем участникам спасибо за ответы! Я, наконец, нашла решение. Форму двигала в стилях, в файле style.css. Меняла значение padding везде, и корректировала стили элементов p (поскольку формы я писала в этих тегах), input, .custom class, textarea. Отдельное спасибо HectorPrima за наводку на верный результат. ЗЫ. Поменяв цвет текста на белый, цвет поменялся не только в форме, но и по всей странице, где был текст. Как это исправить можно - чтобы на странице текст черным был, а в форме так и остался белым? 0

@HectorPrima 716 / 473 / 258 Регистрация: 19.12.2014 Сообщений: 1,801
	09.08.2018, 13:05
	Без ссылки на сайт лично мне не понять в чем проблема. 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	09.08.2018, 17:52 [ТС]
	Cпасибо, уже решила проблему. Заключила в теги <fonts> с указанием цвета. 0

Сделать форму на баннере

Решение