Тази контактна форма е пълнофункционална и е предоставена с цел демонстрация. Съобщенията, написани в нея ще заминат в небитието и никой освен вас няма да знае за тях. Тя е обвързана в iframe и е възможно некоректно рендиране под браузър Internet Explorer. В този случай преминете на този адрес или сменете браузъра.
Статията е ревизия на предишна под име "Контактна форма за вашия сайт" и продължение на "Направа на сайт чрез CSS".
Представената контактна форма е на руски език, защото е част от мой сайт-визитка, насочен към рускоезично общество.
Недостатъци на формата от предната статия..
Пристъпваме към основата.
Между тагове <head> и </head> включваме framework jQuery1.4.4 от сървъра на Google. Създаваме папка style и там съхраняваме бъдещия стил. Създаваме папка js и там съхраняваме бъдещия валидатор. Съответно посочваме тези места.
Статията е ревизия на предишна под име "Контактна форма за вашия сайт" и продължение на "Направа на сайт чрез CSS".
Представената контактна форма е на руски език, защото е част от мой сайт-визитка, насочен към рускоезично общество.
Недостатъци на формата от предната статия..
- Скелета на формата е на база таблица. Подход, който днес се смята за морално остарял, а постигнатото е ръбат външен вид.
- Проблем с визията на бутоните. Те са различни на вид според браузъра.
- Формата не работи коректно на сървър на localhost.
- Най-големият е, че тя е леснодостъпна от спамери. На практика бота на спамери обхожда страниците в интернет и търси запис <form action="contact.php" в изходния код. Записвайки този адрес, вие сте логична жертва на нежелани писма.
- Формата ползва етикети (таг label).
- Визията й се командва от CSS3.
- Валидацията на текстовите полета (input и textarea) се следят от комбинация на jQuery и PHP.
- Отпада необходимостта от допълнителен файл-благодарност. Предупреждения и благодарност се извеждат в общ прозорец, който се форматира по вкус.
- Работи коректно на сървър на localhost.
- Бутоните са еднакви в различните браузъри.
- Добавени са функции.
Пристъпваме към основата.
Между тагове <head> и </head> включваме framework jQuery1.4.4 от сървъра на Google. Създаваме папка style и там съхраняваме бъдещия стил. Създаваме папка js и там съхраняваме бъдещия валидатор. Съответно посочваме тези места.
HTML - contact.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru"
xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Контактная форма</title>
<link rel="stylesheet" href="./style/global.css" type="text/css" media="screen, projection" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js' type='text/javascript'></script>
<!--Валидатор на формата -->
<script src="./js/validator.js" type="text/javascript"></script>
</head>
<body>
<h2>Контактная форма</h>
<!-- Контактна форма -->
<div id="proform">
<form action="contact.php" method="post" id="contactform">
<ol>
<li>
<label for="name">Ваше имя <span class="red">*</span></label>
<input id="name" name="name" class="text" />
</li>
<li>
<label for="email">Ваш Email <span class="red">*</span></label>
<input id="email" name="email" class="text" />
</li>
<li>
<label for="fone">Телефон</label>
<input id="fone" name="fone" class="text" />
</li>
<li>
<textarea id="message" name="message" rows="10" cols="50" onfocus="this.value=''; this.onfocus=null;">Ваше сообщение: </textarea>
<span id="charlimitinfo">У Вас осталось 300 символов.</span>
</li>
<li class="buttons">
<input type="image" name="imageField" id="imageField" src="images/send.png" />
</li>
<li>
<input type="reset" value="" class="reset">
</li>
</ol>
</form>
</div>
</body>
</html>
В ред 31-и е добавен малък скрипт - onfocus="..., който извежда надпис "Вашето съобщение". Недостатък е, че работи еднократно. Ако потребителят редактира първоначалното съобщение и започне отново след натиснат бутон Изтрий, ще трябва ръчно да изтрие надписа.
CSS - style.css
@CHARSET "UTF-8";
/* Contact form */
#proform {
padding:10px;
}
#contactform {
margin:0;
padding:5px 10px;
}
#contactform * {
color:#6e6e6e;
}
#contactform ol {
margin:0;
padding:0;
list-style:none;
}
#contactform li {
margin:0;
padding:0;
background:none;
border:none;
display:block;
}
#contactform label {
margin-left:5px;
width:95px;
display:block;
padding:10px 0;
color:#6e6e6e;
font: normal 13px Tahoma, Geneva, sans-serif;
text-transform:capitalize;
float:left;
}
#contactform label span {
color:#ff0000;
}
#contactform input.text {
width:300px;
height:16px;
border:2px solid #dcdcdc;
margin:5px 0; padding:5px 2px;
background:#fff url(../images/shadow.png) repeat-x top;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#contactform input.text:focus {
border:2px solid #CDE3FF;
background:rgb(252,252,252);
}
#contactform textarea {
width:400px;
margin:5px 0;
padding:2px;
background:#fff url(../images/shadow.png) repeat-x top;
border:2px solid #dcdcdc;
-moz-border-radius: 5px;
border-radius: 5px;
}
#contactform textarea:focus {
border:2px solid #CDE3FF;
background:rgb(252,252,252);
}
#contactform li.buttons {
margin:5px 0;
width:auto;
}
#contactform li.buttons input {
margin:5px 0 0 170px;
border:0;
color:black;
float:left;
outline:none;
}
#charlimitinfo{
color:#6e6e6e;
font: normal 11px Tahoma, Geneva, sans-serif;
text-transform:capitalize;
margin-left:9px;
}
#contactform li .reset {
background:#E4E3DF url(../images/reset.png) no-repeat 0 0;
width:104px;
height:27px;
margin:5px 0 0 20px;
outline:none;
border:0;
}
p.response {
text-align:center;
height:48px;
font:bold italic 16px/46px Arial;
color:#2E7DCE;
padding:0 20px;
background-color:#E0E0E0;
border:2px solid #ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Стилът постига закръглени форми, с помощта на CSS3. За съжаление, те не работят в Internet Explorer. Клас p.response оформя визията на служебните съобщения.
JAVA SCRIPT - validator.js
// <![CDATA[
jQuery(document).ready(function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
fone: $('#fone').val(),
message: $('#message').val()
},
function(data){
$('#contactform #submit').attr('disabled','');
$('.response').remove();
$('#contactform').before('<p class="response">'+data+'</p>');
$('.response').slideDown();
if(data=='Спасибо, ваше сообщение принято!') $('#contactform').slideUp();
}
);
return false;
});
});
// ]]>
function limitChars(textid, limit, infodiv)
{
var text = $('#'+textid).val();
var textlength = text.length;
if(textlength > limit)
{
$('#' + infodiv).html('Вам нельзя написать более чем '+limit+' символов!');
$('#'+textid).val(text.substr(0,limit));
return false;
}
else
{
$('#' + infodiv).html('У Вас осталось '+ (limit - textlength) +' символов.');
return true;
}
}
$(function(){
$('#message').keyup(function(){
limitChars('message', 300, 'charlimitinfo');
})
});
Същинската част на формата започва от идентификатор contactform. Той е цел на jQuery, следящ за попълване на полетата. Това става от ред 1-и до ред 22-ри в validator.js.
От ред 26-ти до края работи друг java-скрипт, който следи идентификатор charlimitinfo в ред 32-ри на contact.html. По този начин можете да зададете лимит на въведените символи в съобщението. Тук също се наблюдава недостатък. Ако потребителят вмъкне текст от клипборда (копира и поставя от външен документ), то скриптът не работи.
От ред 26-ти до края работи друг java-скрипт, който следи идентификатор charlimitinfo в ред 32-ри на contact.html. По този начин можете да зададете лимит на въведените символи в съобщението. Тук също се наблюдава недостатък. Ако потребителят вмъкне текст от клипборда (копира и поставя от външен документ), то скриптът не работи.
PHP - contact.php
<?php
if(!$_POST) exit;
$email = $_POST['email'];
//$error[] = preg_match('/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i', $_POST['email']) ? '' : 'INVALID EMAIL ADDRESS';
if(!eregi("^[a-z0-9]+([_\\.-][a-z0-9]+)*" ."@"."([a-z0-9]+([\.-][a-z0-9]+)*)+"."\\.[a-z]{2,}"."$",$email )){
$error.="Невалидный email адрес";
$errors=1;
}
if($errors==1) echo $error;
else{
$values = array ('name','email','message');
$required = array('name','email','message');
$your_email = "email@blah-blah.com";
$email_subject = "Your Site Message: ".$_POST['subject'];
$email_content = "new message:\n";
foreach($values as $key => $value){
if(in_array($value,$required)){
if ($key != 'subject' && $key != 'company') {
if( empty($_POST[$value]) ) { echo 'Прошу заполнит форму'; exit; }
}
$email_content .= $value.': '.$_POST[$value]."\n";
}
}
if(@mail($your_email,$email_subject,$email_content)) {
echo 'Спасибо, ваше сообщение принято!';
} else {
echo 'ERROR!';
}
}
?>
В ред 14-ти коригирайте адреса на вашата поща. Ред 15-ти носи заглавието на писмото.
Остава да преведете руските надписи на български или на език по ваш избор в отделните файлове.
Аз предпочитам да работя в UTF-8, за което не забравяйте да съхраните коригираните файлове при изключен BOM.
Остава да преведете руските надписи на български или на език по ваш избор в отделните файлове.
Аз предпочитам да работя в UTF-8, за което не забравяйте да съхраните коригираните файлове при изключен BOM.
Споделени мисли
Тази статия се посвещава на Brandon Lee-синът на Bruce Lee. Brandon изигра ролята на Гарван-върнал се от света на мъртвите, за да отмъсти за своята любов, в филма The Crow. Сцената показва последните мигове от неговия живот. Той бе убит нарочно.
С пожелание, когато му е скучно там горе да ми пише каквото и да е.
Денят отстъпва на нощта и се стъмва по-рано. Но за някои "хора" е обратно. Настъпва утрин. В едната ми ръка масурка, а в другата банан. Стоя пред клетката. Промушвам масурката през мрежата и започвам да ръчкам.
- Ставайте шебеци! Нося ви бананче!
Обелвам банана и го изяждам. Мятам обелката през мрежата.
- На! Яжте! Шебеци с шебеци!
Не питайте, защото отговора е прост. Искам шебеци вълча порода. И така всяка вечер, докато станат баскервилски.
Не можете да отречете, че Ада съществува. Вие живеете в него. Там е място без любов. Навярно нямам право да говоря така, но имам сърце и в него нося любовта на хората. Нещо като сърцето Господне. Затова, аз съм благодарен и щастлив, че вие виждате на гърба ми ангелски криле от пеперуда.
- Нали така г-н Пеперуда?
С пожелание, когато му е скучно там горе да ми пише каквото и да е.
Денят отстъпва на нощта и се стъмва по-рано. Но за някои "хора" е обратно. Настъпва утрин. В едната ми ръка масурка, а в другата банан. Стоя пред клетката. Промушвам масурката през мрежата и започвам да ръчкам.
- Ставайте шебеци! Нося ви бананче!
Обелвам банана и го изяждам. Мятам обелката през мрежата.
- На! Яжте! Шебеци с шебеци!
Не питайте, защото отговора е прост. Искам шебеци вълча порода. И така всяка вечер, докато станат баскервилски.
Не можете да отречете, че Ада съществува. Вие живеете в него. Там е място без любов. Навярно нямам право да говоря така, но имам сърце и в него нося любовта на хората. Нещо като сърцето Господне. Затова, аз съм благодарен и щастлив, че вие виждате на гърба ми ангелски криле от пеперуда.
- Нали така г-н Пеперуда?
18.12.2010 profruit
Хм, голямо бързане бе, та не видях изпратих ли или натиснах back
Мда, нищо не съм изпратила. Хайде пак наново :)
Минавам, за да ти благодаря за поздравите!
Малии, пак матрял за четене XD
Федорка прави суфганиот - еврейски понички - като за световно, а аз и спамя, да не се отпуска край "тиранозаврите ядящи всякакви люцерни, коприви и троскоти, а после ставащи непоносимо нервни и започват, да качват от въздуха даже".
Не знам как сте с елхите там, но ако е по нашият край, трябва да се порка и яде като за последно :)
ВЕСЕЛИ ПРАЗНИЦИ!!!
Благодаря, че наминавате. Весели и на вас.
Иначе се късам от смях, като прочета по какви ключови думи хората попадат тук. Например, най-повтарящите се:
misli ot bruce lee
Уринатори
мъжки уринатор
турски кожуси
циганки с тесни гъ
уроспии
панталон от чили
противогаз
protivogaz
надувен дядо кол
зайо байо
как да убием вамп
нарисувани лица на вампири
прием на юдеизма
ерхан солак
чудесата в моя жи
koi ima photoshop cs5
самолетчета за сг
programi za razbivane na wep pod windows 7
иван будев
ordera na karmelitkite
emil medarski
весо ямбол
РУСКО ПОРНО
britney spears
синята звезда на уиндоус
пикаене жени
стойностната жена
библията на вампирите
адидас ромика
руски презервативи
снимки Омск
подземен град акко
"събрали сме се" скъпи младож
кашкавал на ф-ма "Кошарите"
Излиза, че народа тук попада заради Споделено и Изток, и не му пука за моите хакерии.
хахахаххахахахахахахахаххахахахахахаххахахахаха, ооооооооох коремчето ми ще се пръсне от смях XD
При мен са по-прагматични, само останах очарован небрежно, че втората в списъка ключова дума е vorfax.
Иначе за месеца имам 22 пъти покъртителното "искам безплатно да сваля филм за мечо пух" : )
Ама няма да ти оклюмват Ошичките, те гениите приживе са непризнати XD
Весело изкарване на всичко подкарано :)
ПП: Току що си имам старателното "a b c d e f g h i j k l m n o p q r s t u v w x y z дедска песен " XD
Някога "Гарванът" ми беше еталон за сервиране на кетчуп, после Холивудската боза ме разглези и сега се впечатлявам само от екстравагантно поднесени менюта от пикантни масови кланета, като в Kill Bill ^^ - http://www.youtube.com/watch?v=wdjuS17DGlA
Как си с розите? Всъщност рози се превежда врадим, а тези дето растат на храст и пълзат на горе са шушана. Проблемът идва от езиковата бариера известно като нюанс. Днес зад гърба ми прозвуча следното - Йеш леха одеф шел кесеф!? (буквален превод - има на тебе ресто на сребро). Тасим ет ха хагура (ще сложиш колана) ве (и) торид ет ха пелефон (ще свалиш мобилния). Това следва да се преведе - имаш ли излишни пари (заядливо). Сложи си предпазния колан и не говори по мобилния зад волана!
Проблемът е че разликата в езиците не ми дава възможност да ползвам родното - цъфнал си като майска роза. Би следвало да бъде - ата пуреах кмо врадим майим, на което всеки ще се опули. Много трудно се превежда метафори и алегории, защото подобни понятия тук не се изучават. И пак друг пример - аз пиша с химикалка се превежда ани котев бе ет. Буквално на български се превежда - аз пиша в химикалка. Ако искам да кажа аз пиша в химикалка, да речем че съм се смалил и влязал в химикалка и там вътре аз пиша, то не знам как да го кажа. Звучи тъпо, ако кажа по смисъл родното - аз пиша с химикалка (ани котев им ет). Ще възприемат, че съм в група с някаква химикалка и аз, и тя едновремено пишем. Излиза, че съм като рибите. Всичко разбирам, но не мога да кажа и затова мълча. Още повече опитите да обясниш, че си бил в химикалка и там си писал са напразни. Тук няма думи: през, чрез, по, към, до, пре. Съюзът с няма тази тежест като в българския език, а това прави проблема ми с розите голям. Масово се ползва в, дори се подсилва с тох (вътре).
Проблемът с розите започна от времето на Станке Димитров. Там бях заместник командир по политическата част. Попаднах в бойно танково поделение и логично кенефите бяха бойни. Яко рози. Отказах се да ползвам и ходих сутрин преди тръбата зад оградата. Обаче примера ми бе последван и скоро поделението се оказа минирано. Излезе заповед. Ходете, само след като изкопаете дупка. И така всеки тръгна с лопатката. Копаш дупка, пускаш розата и после я зариваш.
Облагородяване чрез култивиране XD
Поздрави от царица Роза http://www.mint.bg/images/1_186.jpg