Contact form7

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

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

Вот пытаюсь задать свой стиль в форме, но что не введу в style.css, ничего не реагирует. Задача - сделать стиль одной из форм, всего их около 6 шт, дизайн других меня устраивает, а вот одна просто критично не то.Хочу ее переделать, в шорткоде стоит id 508, видимо я на это должна ориентироваться. Но как дать команду именно этому id?

@HectorPrima · 30.08.2018, 16:23

https://contactform7.com/styling-contact-form/

@kilometer · 30.08.2018, 16:58 **[ТС]**

Это я уже читала, не совсем то, там как поля поменять у формы, или все формы одним стилем сделать, а мне надо фон одной,конкретной формы, а другие не трогать. Допустим, беру я этот id 508 из шорткода, если вставляю в style.css вот так

CSS
1
2
3
4
5
#508 {
width: 200px;
hight: 20px;
background: #5b5b5b;
}

то в форме ничего не меняется.
Да, форма всплывающая у меня, может это важно.

@Para bellum · 30.08.2018, 18:57

kilometer, в исходном коде (CTRL+U в браузере) посмотрите, какой ID имеет Ваша форма.

@galawar · 30.08.2018, 22:51

id из шорткода это не то. Надо смотреть в исходном коде сраницы:

У вас будет другой id

@HectorPrima · 31.08.2018, 02:31

Не ту ссылку дал. В общем смотрите:

@kilometer · 31.08.2018, 10:47 **[ТС]**

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

Не ту ссылку дал. В общем смотрите:

Спасибо, а почему в разных строках разный id на Вашей картинке? в одной, как я понимаю, id,присвоенный wordpressoм, а в другой самой формой?это для чего так? и в каких случаях можно использовать id из кода, а в каких из формы(то, что у вас в class="wpcf-form-abcd3")?

Добавлено через 1 минуту
еще подскажите пожалуйста, как правильно обращаться в стилях к id? я видела варианты с # в начале и с точкой, напр. .wpcf7 и т.д.?

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div style="width:auto;height:auto;overflow: hidden;position:relative;">
<div style="width:auto;height:auto;overflow: hidden;position:relative;">
<div id="contact_form_pop">
<div role="form" class="wpcf7" id="wpcf7-f608-p8-o2" dir="ltr" lang="ru-RU">
 
<div class="screen-reader-response"></div>
 
<form action="/#wpcf7-f608-p8-o2" method="post" class="wpcf7-form wpcf7-acceptance-as-validation" novalidate="novalidate">
<div style="display: none;">
 
<input name="_wpcf7" value="608" type="hidden">
 
<input name="_wpcf7_unit_tag" value="wpcf7-f608-p8-o2" type="hidden">
 
<input name="_wpcf7_container_post" value="8" type="hidden">
</div>
 
 
<input value="Оценить услугу" class="wpcf7-form-control wpcf7-submit" type="submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div></div></div></div></div></div>
 
 
 
 
<div id="contact_form_pop">
<div role="form" class="wpcf7" id="wpcf7-f608-p8-o3" dir="ltr" lang="ru-RU">
 
<div class="screen-reader-response"></div>
 
<form action="/#wpcf7-f608-p8-o3" method="post" class="wpcf7-form wpcf7-acceptance-as-validation" novalidate="novalidate">
<div style="display: none;">
 
<input name="_wpcf7" value="608" type="hidden">
 
<input name="_wpcf7_version" value="5.0.3" type="hidden">
 
<input name="_wpcf7_locale" value="ru_RU" type="hidden">
<input name="_wpcf7_unit_tag" value="wpcf7-f608-p8-o3" type="hidden">
<input name="_wpcf7_container_post" value="8" type="hidden">
</div>
 
 
<input value="Оценить услугу" class="wpcf7-form-control wpcf7-submit" type="submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div></div>

Я извиняюсь, что такой большой кусок кода высылаю, но выбрать не могу нужный id, как его выбирать? Уменя по наведению на кнопку в браузере показывается этот код, и в нем встречается минимум три id относящихся к форме. например div id="contact_form_pop", id="wpcf7-f608-p8-o3", и еще в другом классе:

HTML5
1
2
3
4
5
6
7
8
<div class="fancybox-hidden" style="display: none;">
 
<div style="width:auto;height:auto;overflow: hidden;position:relative;">
<div style="width:auto;height:auto;overflow: hidden;position:relative;">
 
<div id="contact_form_pop">
 
<div role="form" class="wpcf7" id="wpcf7-f608-p8-o2" dir="ltr" lang="ru-RU">

Как нужно выбирать тот id, который требуется?

@HectorPrima · 31.08.2018, 10:54

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

в разных строках разный id на Вашей картинке?

Да ID вам вообще не важен. Не нужно на него обращать внимания. Может с двух разных форм вам показал. Не знаю.

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

как правильно обращаться в стилях к id

Читать тут

HTML5
1
2
3
4
5
6
7
8
9
10
<div id="aaa" class="bbb"></div>
...
<style>
#aaa {
...
}
.bbb {
...
}
</style>

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

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

Как нужно выбирать тот id, который требуется?

Вы похоже вообще не смотрели на картинки которые я выше выкладывал. Жаль.

Добавлено через 2 минуты
Обратите внимание на abcd3

@kilometer · 31.08.2018, 11:08 **[ТС]**

Я все посмотрела, у вас стрелочками указан id, который повторяется из шорткода, но у galawar по-другому, там просто id из кода. я запуталась, так и не поняла, то ли это два способа рабочие, то ли я что-то не улавливаю.

Добавлено через 9 минут
Я правильно поняла, по вашим картинкам, что из div role="form" class="wpcf7" я смотрю класс, потом из form action="/#wpcf7-f608-p8-o3" class="wpcf7-form wpcf7-acceptance-as-validation" novalidate="novalidate"> смотрю название класса, отбрасывая первую часть,т.е. сам wpcf-form и искомое acceptance-as-validation - это и есть название формы?

@HectorPrima · 31.08.2018, 11:27

Ничего не нужно отбрасывать. abcd3 новый класс и вы его задаете для формы. Что бы ничего не искать в коде и ничего не отбрасывать. В своем шорткоде задайте новое имя класса и потом используйте.

Добавлено через 46 секунд
Вместо abcd3 можно любой идентификатор написать

@kilometer · 31.08.2018, 11:47 **[ТС]**

А как можно задать новый класс в шорткоде, ?он уже не редактируется.

@HectorPrima · 31.08.2018, 12:23

К примеру у вас шорткод для вставки формы где то в посте или где вы там его используете.
[contact-form-7 id="999"]
добавьте в него класс ручками
[contact-form-7 id="999" html_class="написать здесь имя своего класса"]

@kilometer · 31.08.2018, 12:28 **[ТС]**

Ручками по посту была мысль, но это уж очень кропотливо, учитывая, что форма несколько раз на странице дана, а страница тоже километровая, почти лендинг. это то я понимаю, думала автоспособы есть или более упрощенные. Или так - в редакторе в вордпрессе поиск по странице есть?

@kilometer · 31.08.2018, 16:36 **[ТС]**

А как можно убрать белый фон вокруг серого и шрифты увеличить над полями?

@jurvrn · 03.09.2018, 15:47

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

Не ту ссылку дал. В общем смотрите:

возник вопрос: к любому шорткоду можно применить стиль? или только к тому, в который заложена такая возможность? ..сейчас сам попробую добавить класс...

Не по теме:

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

не сработало
шорткод

PHP
1
[wbcp_blog_clock width="80%" title="Сейчас в городе" timezone="2" align="center" html_class="time-w"]

класс

HTML5
1
#time-w {color: red;}

может этот принцип как то можно приспособить?

PHP
1
2
3
4
5
6
7
// Add Shortcode
function blod_text_shortcode( $atts , $content = null ) {
 
    return '<strong>' . $content . '</strong>';
 
}
add_shortcode( 'b', 'blod_text_shortcode' );

@HectorPrima · 03.09.2018, 17:08

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

к любому шорткоду можно применить стиль?

Вот с подробностями. У вашего шорткода сколько угодно параметров можете сделать

@jurvrn · 03.09.2018, 21:12

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

Вот с подробностями. У вашего шорткода сколько угодно параметров можете сделать

а то что этот шорткод создан плагином значение имеет? можно ли ему придать нужные свойства? пока не понял как можно шорткод, созданный плагином переопределить через функцию...?

Добавлено через 19 минут
не понял как можно применить форматирование через функцию, функция может вызвать стиль?

Добавлено через 18 минут
решил вернуться к тому что вы раньше показывали - нашел свойство , отвечающее за цифры времени - "blog-clock-time". Когда меняю его через просмотр кода по F12 всё меняется, записываю в style.css - не срабатывает
сайт jurvrn.ru

Добавлено через 17 минут
завтра попробую ещё один метод

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Например нам надо подсветить цветным фоном определенный участок текста. В файл functions.php вставляем следующую функцию:
01
    function mayak_background($attr,$content= null){
02
    return'
03
    <style type="text/css">
04
    .yellow_background{
05
        border: 1px solid #d2d2d2;
06
        background-color: #FFFF80;
07
        padding:10px;
08
        margin: 5px 10px;
09
    }
10
    </style>
11
    <div class="yellow_background">'.$content.'</div>
12
    ';
13
    }
14
    add_shortcode('yw', 'mayak_background');
 
Заключаем участок текста в теги:
1
    [yw]Участок текста[/yw]

@HectorPrima · 04.09.2018, 01:33

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

а то что этот шорткод создан плагином значение имеет?

Без понятия никогда так не делал. Разбирайтесь.
По последнему вопросу лучше сделать отдельный плагин.

Делаем папку для нового плагина к примеру mayak
В ней помещаем style.css с кодом:

HTML5
1
2
3
4
5
6
.yellow_background{
    border: 1px solid #d2d2d2;
    background-color: #ffff80;
    padding:10px;
    margin: 5px 10px;
}

И файл плагина yw.php с кодом:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
/**
 * Plugin Name: YW
 */
 
add_shortcode( 'yw', 'mayak_background' );
 
function mayak_background( $attr, $content = null )
{
    return '<div class="yellow_background">' . $content . '</div>';
}
 
add_action( 'wp_enqueue_scripts', 'mayak_scripts' );
function mayak_scripts()
{
    wp_register_style( 'mayak', plugins_url('style.css',__FILE__ ));
    wp_enqueue_style( 'mayak' );
}

В таком случае у вас код полностью не зависит от темы и не вставляются в текст дублирующие стили.

@jurvrn · 04.09.2018, 10:53

HectorPrima, а как практически можно потом использовать плагин? путем придания нужного форматирования какому либо элементу, обрамленному кодом [yw] плагина?
Оптимально ли - если мне нужно один раз использовать форматирование - писать плагин? Если к множеству элементов определенное форматирование применить - тогда это целесообразно. Спасибо.

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

Без понятия никогда так не делал. Разбирайтесь.

получается что через общий style не меняется свойство.... Есть в папке плагина файл custom-backend.css, в котором прописаны свойства. Но его менять - это ведь не правильно? При обновлении изменения пропадут. Как тогда можно переопределить стиль в таком случае?

@HectorPrima · 04.09.2018, 14:02

мы как то от темы отвлеклись.

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

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

	Contact form7 30.08.2018, 16:12. Показов 1472. Ответов 23 Метки задать свой стиль (Все метки) Вот пытаюсь задать свой стиль в форме, но что не введу в style.css, ничего не реагирует. Задача - сделать стиль одной из форм, всего их около 6 шт, дизайн других меня устраивает, а вот одна просто критично не то.Хочу ее переделать, в шорткоде стоит id 508, видимо я на это должна ориентироваться. Но как дать команду именно этому id? 0

@HectorPrima 716 / 473 / 258 Регистрация: 19.12.2014 Сообщений: 1,801
	30.08.2018, 16:23
	https://contactform7.com/styling-contact-form/ 0

@Para bellum 5755 / 4134 / 1508 Регистрация: 06.01.2011 Сообщений: 11,276
	30.08.2018, 18:57
	kilometer, в исходном коде (CTRL+U в браузере) посмотрите, какой ID имеет Ваша форма. 0

@galawar 154 / 123 / 90 Регистрация: 09.04.2018 Сообщений: 351
	30.08.2018, 22:51
	id из шорткода это не то. Надо смотреть в исходном коде сраницы: У вас будет другой id 0

@HectorPrima 716 / 473 / 258 Регистрация: 19.12.2014 Сообщений: 1,801
	31.08.2018, 02:31
	Не ту ссылку дал. В общем смотрите: Миниатюры 2

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	31.08.2018, 11:08 [ТС]
	Я все посмотрела, у вас стрелочками указан id, который повторяется из шорткода, но у galawar по-другому, там просто id из кода. я запуталась, так и не поняла, то ли это два способа рабочие, то ли я что-то не улавливаю. Добавлено через 9 минут Я правильно поняла, по вашим картинкам, что из div role="form" class="wpcf7" я смотрю класс, потом из form action="/#wpcf7-f608-p8-o3" class="wpcf7-form wpcf7-acceptance-as-validation" novalidate="novalidate"> смотрю название класса, отбрасывая первую часть,т.е. сам wpcf-form и искомое acceptance-as-validation - это и есть название формы? 0

@HectorPrima 716 / 473 / 258 Регистрация: 19.12.2014 Сообщений: 1,801
	31.08.2018, 11:27
	Ничего не нужно отбрасывать. abcd3 новый класс и вы его задаете для формы. Что бы ничего не искать в коде и ничего не отбрасывать. В своем шорткоде задайте новое имя класса и потом используйте. Добавлено через 46 секунд Вместо abcd3 можно любой идентификатор написать 1

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	31.08.2018, 11:47 [ТС]
	А как можно задать новый класс в шорткоде, ?он уже не редактируется. 0

@HectorPrima 716 / 473 / 258 Регистрация: 19.12.2014 Сообщений: 1,801
	31.08.2018, 12:23
	К примеру у вас шорткод для вставки формы где то в посте или где вы там его используете. [contact-form-7 id="999"] добавьте в него класс ручками [contact-form-7 id="999" html_class="написать здесь имя своего класса"] 1

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	31.08.2018, 12:28 [ТС]
	Ручками по посту была мысль, но это уж очень кропотливо, учитывая, что форма несколько раз на странице дана, а страница тоже километровая, почти лендинг. это то я понимаю, думала автоспособы есть или более упрощенные. Или так - в редакторе в вордпрессе поиск по странице есть? 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	31.08.2018, 16:36 [ТС]
	А как можно убрать белый фон вокруг серого и шрифты увеличить над полями? Миниатюры 0

@HectorPrima 716 / 473 / 258 Регистрация: 19.12.2014 Сообщений: 1,801
	04.09.2018, 14:02
	мы как то от темы отвлеклись. 1