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

@Coolfreeze · Регистрация: 21.02.2016

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

Уважаемые форумчане, подскажите пожалуйста как стилизовать под определенные рамки форму "Заказать звонок" использован плагин contact form 7 wordpress. Задача такая, в первом поле написать "Ваше имя" которое при написании исчезает, во втором поле "Ваш телефон" которое так же исчезает при написании номера, и выравнивание кнопки "Отправить" до нормальных, читабельных размеров или стилизовать кнопку под почтовый конверт, и все это вместить и выровнять в определенные рамки. Сайт http://infocar.pro/ форма справа в шапке. Помогите пожалуйста.

@Fedor92 · 10.07.2016, 13:30

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

Задача такая, в первом поле написать "Ваше имя" которое при написании исчезает, во втором поле "Ваш телефон" которое так же исчезает при написании номера

Coolfreeze, вообще для этих целей есть атрибут placeholder...

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

выравнивании кнопки "Отправить до нормальных, читабельных размеров или стилизовать кнопку под почтовый конверт, и все это вместить и выровнять в определенные рамки.

Откройте файл стилей style.css и измените свойства элементов на собственные... Что Вам мешает? Или кто?

@Coolfreeze · 10.07.2016, 13:36 **[ТС]**

Fedor92, да я бы с удовольствием сам это сделал, но у плагины contact form 7, свои стили, поэтому и спрашиваю знающих этот плагин людей, мне достаточно дать вектор поиска, а дальше я уже сам методом проб и ошибок добиваюсь сам.

@Fedor92 · 10.07.2016, 13:47

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

но у плагины contact form 7, свои стили, поэтому и спрашиваю знающих этот плагин людей, мне достаточно дать вектор поиска

Coolfreeze, наслаждайтесь видео в качестве вектора поиска...

@mrtoxas · 10.07.2016, 13:58

Вам 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">

@Coolfreeze · 10.07.2016, 13:59 **[ТС]**

Fedor92, спасибо конечно, я знаю про этот плагин, я потому и обратился с вопросом на Этот форум, что бы самому сделать! Что ж вы меня все посылаете то? Насчет других вопросов касаемых стилей, люди нормально советовали, а вы отправляете грубо говоря в гугл. Тогда зачем этот форум? Люди за советом сюда обращаются, а в гугл и сами сходить могут.

Добавлено через 1 минуту
mrtoxas, спасибо)

@Fedor92 · 10.07.2016, 14:20

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

Что ж вы меня все посылаете то? Насчет других вопросов касаемых стилей, люди нормально советовали, а вы отправляете грубо говоря в гугл. Тогда зачем этот форум? Люди за советом сюда обращаются, а в гугл и сами сходить могут.

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

@Coolfreeze · 10.07.2016, 14:28 **[ТС]**

Fedor92, ясно, извините,

Добавлено через 6 минут
mrtoxas, к сожалению не могу найти где править html, у меня все на php, в header.php только шорткод, пробовал добавить ниже шорткода скрипт, появляется новая кнопка((

@mrtoxas · 10.07.2016, 14:35

Попробуйте шорткод

HTML5

1	[text your-name placeholder "Your name"]

@Coolfreeze · 10.07.2016, 14:38 **[ТС]**

mrtoxas, а куда его вставить?

@mrtoxas · 10.07.2016, 14:41

ищите в хедере код

HTML5

1	[text your-name ... ]

И допишите туда

HTML5

1	placeholder "Your name"

Добавлено через 1 минуту
Или в настройках формы в админке

@Coolfreeze · 10.07.2016, 14:54 **[ТС]**

mrtoxas, нет в хэдере такого, вот скрипт хэдера с шорткодом контактной формы

PHP/HTML

<div class="contact_form">
            <div>
              <?php echo do_shortcode( '[contact-form-7 id="44" title="Контактная форма 1"]' ); ?>
 
            </div>
    </div>

может другие .php стоит редактировать?

@mrtoxas · 10.07.2016, 14:58

Значит ищите в админке, в настройках конкретной формы

@Coolfreeze · 10.07.2016, 17:22 **[ТС]**

Вопрос решен, тем кто столкнулся с подобным вопросом, обращайтесь.

@mrtoxas · 10.07.2016, 17:40

Пишите решение

@Coolfreeze · 11.07.2016, 09:31 **[ТС]**

mrtoxas, создал стиль в самой форме
и прописал css

CSS

.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;
}

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
		1
	Собственный стиль для формы обратной связи 10.07.2016, 13:25. Показов 1868. Ответов 15 Метки нет (Все метки) Уважаемые форумчане, подскажите пожалуйста как стилизовать под определенные рамки форму "Заказать звонок" использован плагин contact form 7 wordpress. Задача такая, в первом поле написать "Ваше имя" которое при написании исчезает, во втором поле "Ваш телефон" которое так же исчезает при написании номера, и выравнивание кнопки "Отправить" до нормальных, читабельных размеров или стилизовать кнопку под почтовый конверт, и все это вместить и выровнять в определенные рамки. Сайт http://infocar.pro/ форма справа в шапке. Помогите пожалуйста. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	10.07.2016, 13:30	2
	Сообщение от Coolfreeze Задача такая, в первом поле написать "Ваше имя" которое при написании исчезает, во втором поле "Ваш телефон" которое так же исчезает при написании номера Coolfreeze, вообще для этих целей есть атрибут placeholder... Сообщение от Coolfreeze выравнивании кнопки "Отправить до нормальных, читабельных размеров или стилизовать кнопку под почтовый конверт, и все это вместить и выровнять в определенные рамки. Откройте файл стилей style.css и измените свойства элементов на собственные... Что Вам мешает? Или кто? 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	10.07.2016, 13:36 [ТС]	3
	Fedor92, да я бы с удовольствием сам это сделал, но у плагины contact form 7, свои стили, поэтому и спрашиваю знающих этот плагин людей, мне достаточно дать вектор поиска, а дальше я уже сам методом проб и ошибок добиваюсь сам. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	10.07.2016, 13:47	4
	Сообщение от Coolfreeze но у плагины contact form 7, свои стили, поэтому и спрашиваю знающих этот плагин людей, мне достаточно дать вектор поиска Coolfreeze, наслаждайтесь видео в качестве вектора поиска... 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	10.07.2016, 13:59 [ТС]	6
	Fedor92, спасибо конечно, я знаю про этот плагин, я потому и обратился с вопросом на Этот форум, что бы самому сделать! Что ж вы меня все посылаете то? Насчет других вопросов касаемых стилей, люди нормально советовали, а вы отправляете грубо говоря в гугл. Тогда зачем этот форум? Люди за советом сюда обращаются, а в гугл и сами сходить могут. Добавлено через 1 минуту mrtoxas, спасибо) 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	10.07.2016, 14:20	7
	Сообщение от Coolfreeze Что ж вы меня все посылаете то? Насчет других вопросов касаемых стилей, люди нормально советовали, а вы отправляете грубо говоря в гугл. Тогда зачем этот форум? Люди за советом сюда обращаются, а в гугл и сами сходить могут. Я Вам указываю путь, как оформить меню цивилизовано без костылей, а Вы упорно рвётесь всё сделать с помощью топора... И отправил я Вас не в гугл, а на страницу с видео-документацией по использованию плагина... Поймите одну простую вещь, что изменение стилей плагина в файле-css может повлечь за собой череду изменений не только в самой форме, но и в плагине как таковом! 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	10.07.2016, 14:28 [ТС]	8
	Fedor92, ясно, извините, Добавлено через 6 минут mrtoxas, к сожалению не могу найти где править html, у меня все на php, в header.php только шорткод, пробовал добавить ниже шорткода скрипт, появляется новая кнопка(( 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	10.07.2016, 14:38 [ТС]	10
	mrtoxas, а куда его вставить? 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.07.2016, 14:58	13
	Значит ищите в админке, в настройках конкретной формы 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	10.07.2016, 17:22 [ТС]	14
	Вопрос решен, тем кто столкнулся с подобным вопросом, обращайтесь. 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.07.2016, 17:40	15
	Пишите решение 0

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

Решение