Как изменить размер и стиль шрифта в почтовой форме?

голоса: 0

Добрый день Уважаемые!

Прошу помочь с редактированием формы обратной связи:

Необходимо изменить размер и стиль шрифта  в полях <input placeholder="Телефон" name="f2" size="30" style="width:100%;" maxlength="70" type="text">

В настоящий момент форма выглядит вот так:

Код:

<table style="background-color: rgb(195, 202, 221);" id="table1" align="" border="0" cellpadding="4" cellspacing="8" width="">
<tbody><tr><td><input placeholder="Ф.И.О." name="f1" size="30" style="width:100%;" maxlength="70" type="text"></td></tr>
<tr><td><input placeholder="Телефон" name="f2" size="30" style="width:100%;" maxlength="70" type="text"></td></tr>
<tr><td><input placeholder="E-mail" name="f3" size="30" style="width:100%;" maxlength="70" type="text"></td></tr>
<tr><td><input placeholder="Необходимое оборудование" name="f4" size="30" style="width:100%;" maxlength="70" type="text"></td></tr>
<tr><td><textarea rows="5" name="f5" cols="30" style="width:100%;"></textarea></td></tr>
<tr><td align="center"><br><input value="Отправить сообщение" type="submit"></td></tr>
</tbody></table>

Заранее спасибо!

| Автор: | Категория: Почтовые формы

Ответов: 1

Голоса: +1
 
Лучший ответ

В стили добавить:

#table1 input::-webkit-input-placeholder {font-size:15px;}
#table1 input:-moz-placeholder {font-size:15px;}
#table1 input:-o-placeholder {font-size:15px;}
#table1 input:-khtml-placeholder {font-size:15px;}
#table1 input:placeholder {font-size:15px;}

если нужно добавить свой шрифт, читаем материал http://htmlbook.ru/css/font-family я лишь прописал размер шрифта, можете регулировать под себя.

| Автор:
Выбор ответа лучшим | | Автор: Михаил Петров
Большое спасибо!
Попробую сейчас проверить!
Применять стиль надо как <table id=""> ?
Михаил Петров,

да, как видите я выше в стилях уже это сделал, если вам нужно дописать стили делайте по тому же примеру, только стили добавлять в таблицу стилей, а не применять в почтовой форме в параметре style

То есть готовый вид по идее должен выглядить так:
<table id="table1">
<tbody><tr><td><input placeholder="Ф.И.О." .... итд>
Боюсь где-то совершаю ошибку - наверное не получается правильно применить стиль.
Михаил Петров,

Это не стиль, вы просто применяете placeholder к инпуту, то есть задаете текст который будет отображаться в инпута в почтовой форме до того момента пока посетитель вашего сайта не активирует его и не начнет вводить свои данные.

> То есть готовый вид по идее должен выглядеть так

>> Готовый код почтовой формы у вас выше в примере, не понимаю о каком еще одном готовом коде речь. Стили добавлять в таблицу стилей CSS http://ваш-сайт.ру/panel/?a=tmpl;m=3;t=3 где вместо ваш сайт, ссылка на ваш сайт и в самый низ добавляем стили выше, после проверяем результат.

Прошу прощения, что ввел Вас в заблуждение - по невнимательности не "слона и не заметил", что id="table1" уже пресутствует.

Тогда проблем вообще не должно быть, но размер шрифта остатся прежним:


 

Михаил Петров,
уточните ссылку на ваш сайт где можно увидеть эту форму, посмотрим в чем проблема
Михаил Петров,
так где конкретно установлена эта форма, ссылку на страницу предоставьте, на главной ничего не вижу и в контактах так же нет

Форма установлена на главной: $MFORM_2$


Михаил Петров,
как под гостем не вижу так и под зарегистрированным, нет доступа, предоставьте доступ к главной для других групп
Открыл доступ!
Извините за неудобства!
Михаил Петров,

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

#table1 input::-webkit-input-placeholder {font-size:25px;}
#table1 input:-moz-placeholder {font-size:25px;}
#table1 input:-o-placeholder {font-size:25px;}
#table1 input:-khtml-placeholder {font-size:25px;}
#table1 input:placeholder {font-size:25px;}

вы исправили и сделали по своему:

#table1 input:-webkit-input-placeholder {font-size:25px;}
#table1 input:-moz-placeholder {font-size:25px;}
#table1 input:-o-placeholder {font-size:25px;}
#table1 input:-khtml-placeholder {font-size:25px;}
#table1 input:placeholder {font-size:25px;}

в итоге ничего и не работает.

Исправил! Но результат тотже.
Михаил Петров,

не тот же, вы кеш очистьте выполнив комбинацию клавиш CTRL+F5 шрифт слишком большой в 25px и вы сами это увидите

Вы не могли бы скинуть скрин? сделал все по Вашей инструкции и даже загрузил через IE (+ перезапустил firefox). Не могу понять в чем дело.
Михаил Петров,

вот:

как видите шрифт слишком велик и 25 нужно менять примерно на 18-20

Очень странно! В Хроме выдает действительно как надо, но в firefox не хочет менять. Думаю это временное явление!
Большое спасибо за то, что вникли и "разложили все по полкам"!
Михаил Петров,

в общем и в мозиле работает, замените стили на:

#table1 input::-webkit-input-placeholder {font-size:15px;}
#table1 input::-moz-placeholder {font-size:15px;}
#table1 input::-o-placeholder {font-size:15px;}
#table1 input::-khtml-placeholder {font-size:15px;}
#table1 input::placeholder {font-size:15px;}

после все будет работать, шрифт 15 самый оптимальный и подходящий, все что свыше будет искажаться

Уважаемый Юрий, захотел поделиться кодом, вдруг кому пригодится!

Добавив стиль инпуту (высоту строчки), получаем вполне универсальный дизайн для обратных форм - шрифт любого размера + вводимый шрифт без каких-либо искажений!

 

#table1 input {height:30px; font-size:14px;}::-webkit-input-placeholder {font-size:15px; font-family: Tahoma; }
#table1 input {height:30px; font-size:14px;}::-moz-placeholder {font-size:14px; font-family: Tahoma;}
#table1 input {height:30px; font-size:14px;}::-o-placeholder {font-size:14px; font-family: Tahoma;}
#table1 input {height:30px; font-size:14px;}::-khtml-placeholder {font-size:14px; font-family: Tahoma;}
#table1 input {height:30px; font-size:14px;}::placeholder {font-size:14px; font-family: Tahoma;}

 

...