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

@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> с указанием цвета.

Новые блоги и статьи Все статьи Все блоги /
Запустил конкурс "тем и промптов для текстовых квестов созданных почти чисто ИИ" Adler 06.10.2026 Всем привет! За последние три-четыре дня я создал более 16 текстовых квестовых игр используя преимущественно по одному запросу к ИИ на игру. Мне так понравилось смотреть все ветки/ сцены во всех. . .	ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .	Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение 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 и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .

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

	Сделать форму на баннере 02.08.2018, 11:04. Показов 4464. Ответов 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 Супер-модератор 3983 / 2154 / 833 Регистрация: 13.03.2010 Сообщений: 7,057
	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 Супер-модератор 3983 / 2154 / 833 Регистрация: 13.03.2010 Сообщений: 7,057
	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

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

Решение