Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
1

Собственный стиль для формы обратной связи

10.07.2016, 13:25. Просмотров 1314. Ответов 15
Метки нет (Все метки)

Уважаемые форумчане, подскажите пожалуйста как стилизовать под определенные рамки форму "Заказать звонок" использован плагин contact form 7 wordpress. Задача такая, в первом поле написать "Ваше имя" которое при написании исчезает, во втором поле "Ваш телефон" которое так же исчезает при написании номера, и выравнивание кнопки "Отправить" до нормальных, читабельных размеров или стилизовать кнопку под почтовый конверт, и все это вместить и выровнять в определенные рамки. Сайт http://infocar.pro/ форма справа в шапке. Помогите пожалуйста.
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
10.07.2016, 13:25
Ответы с готовыми решениями:

Вызов формы обратной связи
здравствуйте в css есть код #contactable #contactable_inner {...

Дизайн формы обратной связи
Доброго времени. У меня возникла проблемма. Есть форма обратной связи, она выводиться на сайте...

Настройка формы обратной связи на сайте
На сайте есть форма регистрации, после заполнения которой, мне на мэил приходят данные из формы...

Треугольник внизу формы обратной связи
Всем доброго времени суток! Может кто подскажет, как реализовать, что бы в конце формы обратной...

15
Эксперт HTML/CSS
2943 / 2508 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
10.07.2016, 13:30 2
Цитата Сообщение от Coolfreeze Посмотреть сообщение
Задача такая, в первом поле написать "Ваше имя" которое при написании исчезает, во втором поле "Ваш телефон" которое так же исчезает при написании номера
Coolfreeze, вообще для этих целей есть атрибут placeholder...
Цитата Сообщение от Coolfreeze Посмотреть сообщение
выравнивании кнопки "Отправить до нормальных, читабельных размеров или стилизовать кнопку под почтовый конверт, и все это вместить и выровнять в определенные рамки.
Откройте файл стилей style.css и измените свойства элементов на собственные... Что Вам мешает? Или кто?
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
10.07.2016, 13:36  [ТС] 3
Fedor92, да я бы с удовольствием сам это сделал, но у плагины contact form 7, свои стили, поэтому и спрашиваю знающих этот плагин людей, мне достаточно дать вектор поиска, а дальше я уже сам методом проб и ошибок добиваюсь сам.
0
Эксперт HTML/CSS
2943 / 2508 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
10.07.2016, 13:47 4
Цитата Сообщение от Coolfreeze Посмотреть сообщение
но у плагины contact form 7, свои стили, поэтому и спрашиваю знающих этот плагин людей, мне достаточно дать вектор поиска
Coolfreeze, наслаждайтесь видео в качестве вектора поиска...
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
10.07.2016, 13:58 5
Вам Fedor92, решение сказал, а вы хотите вектор.
Стили может быть у плагина и свои, но конкретно код этого блока лежит у вас в infocar/style.css, начиная с 415й строки и видимо, со значениями вы уже игрались там Измените:
CSS
1
2
3
input[type="submit"] {
   font-size: 1.75rem;
}
А placeholder задается не в стилях, а в html.
HTML5
1
<input type="text" name="your-name" placeholder="Имя" value="" size="28" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
10.07.2016, 13:59  [ТС] 6
Fedor92, спасибо конечно, я знаю про этот плагин, я потому и обратился с вопросом на Этот форум, что бы самому сделать! Что ж вы меня все посылаете то? Насчет других вопросов касаемых стилей, люди нормально советовали, а вы отправляете грубо говоря в гугл. Тогда зачем этот форум? Люди за советом сюда обращаются, а в гугл и сами сходить могут.

Добавлено через 1 минуту
mrtoxas, спасибо)
0
Эксперт HTML/CSS
2943 / 2508 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
10.07.2016, 14:20 7
Цитата Сообщение от Coolfreeze Посмотреть сообщение
Что ж вы меня все посылаете то? Насчет других вопросов касаемых стилей, люди нормально советовали, а вы отправляете грубо говоря в гугл. Тогда зачем этот форум? Люди за советом сюда обращаются, а в гугл и сами сходить могут.
Я Вам указываю путь, как оформить меню цивилизовано без костылей, а Вы упорно рвётесь всё сделать с помощью топора... И отправил я Вас не в гугл, а на страницу с видео-документацией по использованию плагина... Поймите одну простую вещь, что изменение стилей плагина в файле-css может повлечь за собой череду изменений не только в самой форме, но и в плагине как таковом!
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
10.07.2016, 14:28  [ТС] 8
Fedor92, ясно, извините,

Добавлено через 6 минут
mrtoxas, к сожалению не могу найти где править html, у меня все на php, в header.php только шорткод, пробовал добавить ниже шорткода скрипт, появляется новая кнопка((
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
10.07.2016, 14:35 9
Попробуйте шорткод
HTML5
1
[text your-name placeholder "Your name"]
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
10.07.2016, 14:38  [ТС] 10
mrtoxas, а куда его вставить?
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
10.07.2016, 14:41 11
ищите в хедере код
HTML5
1
[text your-name ... ]
И допишите туда
HTML5
1
placeholder "Your name"
Добавлено через 1 минуту
Или в настройках формы в админке
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
10.07.2016, 14:54  [ТС] 12
mrtoxas, нет в хэдере такого, вот скрипт хэдера с шорткодом контактной формы
PHP/HTML
1
2
3
4
5
6
<div class="contact_form">
            <div>
              <?php echo do_shortcode( '[contact-form-7 id="44" title="Контактная форма 1"]' ); ?>
 
            </div>
    </div>
может другие .php стоит редактировать?
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
10.07.2016, 14:58 13
Значит ищите в админке, в настройках конкретной формы
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
10.07.2016, 17:22  [ТС] 14
Вопрос решен, тем кто столкнулся с подобным вопросом, обращайтесь.
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
10.07.2016, 17:40 15
Пишите решение
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
11.07.2016, 09:31  [ТС] 16
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

mrtoxas, создал стиль в самой форме
и прописал css
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.wpcf7 {
    width: 246px;
    height: 146px;
}
 
#wpcf7-f44-o1 {
    margin: 0;
    padding: 5px;
    background: #070606;
    font-family: "OpenSansRegular", sans-serif;
    color: #e1a647;
}
 
#wpcf7-f44-o1 {
    margin: 0px;
}
 
#wpcf7-f44-o1 input,textarea {
    border: 1px solid #e1a647;
}
 
.name-cf {
    margin: 0;
    padding: 0;
}
 
.name-cf input {
width: 236px;
height: 24px;
background: #e1a647;
}
 
.submit-cf {
width: 200px; /*ширина блока*/
height: 24px; /*высота*/
margin: 20px 0 0 0; /* Отступ слева и справа */
}
 
.submit-cf input {
width: 236px;
background:#e1a647;
}
0
Миниатюры
Собственный стиль для формы обратной связи  
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.07.2016, 09:31

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

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

Почему не приходят сообщения с формы обратной связи
Здраствуйте я сделал на сайте форму обратной связи (чтобы пользователи могли отправлять мне...

Стиль для формы
Почему форма неправильно отображается, как это исправить? &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD...

Проверка обратной связи
Помогите разобраться с обратной связью, при запуске через denwer ввожу данные и жму на кнопку...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
16
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.