Profruit banner

Умен звънец в openHAB

16 декември 2023

Телефонът е винаги с мен и сега, където и да се намирам получавам известие от openHAB, че някой е позвънил и чака пред вратата. А ако ме няма вкъщи става ясно часа и датата на последното позвъняване.

Tasmota Multipress

30 септември 2023

Идеята е Sonoff Touch T1 US 2 в салона, да управлява освен своето осветление и това в кухнята, а още вентилатора.

DIY 12V 1A WiFi Router UPS

22 април 2023

При поредно прекъсване на захранването вкъщи, батерията на нoтбука и двата UPS автоматично превключват на аварийно захранване и едновременно полита съобщение за конфуза

Zigbee2MQTT клониране

21 януари 2023

... как да клонираме съществуваща настройка на Zigbee2MQTT без да се налага последвало интервю на zigbee-устройствата.

LD2410 - бюджетен датчик присъствие в openHAB

11 февруари 2023

Цената на HLK-LD2410 зададе име на поредната тема в моя блог. С негова помощ се постига "народен" датчик присъствие в домашната автоматизация. . ...


Тази контактна форма е пълнофункционална и е предоставена с цел демонстрация. Съобщенията, написани в нея ще заминат в небитието и никой освен вас няма да знае за тях. Тя е обвързана в iframe и е възможно некоректно рендиране под браузър Internet Explorer. В този случай преминете на този адрес или сменете браузъра.

Статията е ревизия на предишна под име "Контактна форма за вашия сайт" и продължение на "Направа на сайт чрез CSS".

Представената контактна форма е на руски език, защото е част от мой сайт-визитка, насочен към рускоезично общество.

Недостатъци на формата от предната статия..
  • Скелета на формата е на база таблица. Подход, който днес се смята за морално остарял, а постигнатото е ръбат външен вид.
  • Проблем с визията на бутоните. Те са различни на вид според браузъра.
  • Формата не работи коректно на сървър на localhost.
  • Най-големият е, че тя е леснодостъпна от спамери. На практика бота на спамери обхожда страниците в интернет и търси запис <form action="contact.php" в изходния код. Записвайки този адрес, вие сте логична жертва на нежелани писма.
Предимства на показаната форма.
  • Формата ползва етикети (таг label).
  • Визията й се командва от CSS3.
  • Валидацията на текстовите полета (input и textarea) се следят от комбинация на jQuery и PHP.
  • Отпада необходимостта от допълнителен файл-благодарност. Предупреждения и благодарност се извеждат в общ прозорец, който се форматира по вкус.
  • Работи коректно на сървър на localhost.
  • Бутоните са еднакви в различните браузъри.
  • Добавени са функции.
Първата предстояща задача е да нарисуваме два бутона и един градиент (shadow.png) в графичен редактор. Единият бутон носи име изпрати (send.png), а вторият - изтрий (reset.png), Градиента ще вмъкнем като фоново изображение в текстовите полета и по този начин ще разчупим плоската визия на формата.

Пристъпваме към основата.
Между тагове <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. По този начин можете да зададете лимит на въведените символи в съобщението. Тук също се наблюдава недостатък. Ако потребителят вмъкне текст от клипборда (копира и поставя от външен документ), то скриптът не работи.

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.

Споделени мисли


Тази статия се посвещава на Brandon Lee-синът на Bruce Lee. Brandon изигра ролята на Гарван-върнал се от света на мъртвите, за да отмъсти за своята любов, в филма The Crow. Сцената показва последните мигове от неговия живот. Той бе убит нарочно.
С пожелание, когато му е скучно там горе да ми пише каквото и да е.

Денят отстъпва на нощта и се стъмва по-рано. Но за някои "хора" е обратно. Настъпва утрин. В едната ми ръка масурка, а в другата банан. Стоя пред клетката. Промушвам масурката през мрежата и започвам да ръчкам.
- Ставайте шебеци! Нося ви бананче!
Обелвам банана и го изяждам. Мятам обелката през мрежата.
- На! Яжте! Шебеци с шебеци!
Не питайте, защото отговора е прост. Искам шебеци вълча порода. И така всяка вечер, докато станат баскервилски.

Не можете да отречете, че Ада съществува. Вие живеете в него. Там е място без любов. Навярно нямам право да говоря така, но имам сърце и в него нося любовта на хората. Нещо като сърцето Господне. Затова, аз съм благодарен и щастлив, че вие виждате на гърба ми ангелски криле от пеперуда.
- Нали така г-н Пеперуда?

buterfly

18.12.2010 profruit


|

9 Response to "Модерна контактна форма"

  1. fedora Said,

    Хм, голямо бързане бе, та не видях изпратих ли или натиснах back

     

  2. fedora Said,

    Мда, нищо не съм изпратила. Хайде пак наново :)

    Минавам, за да ти благодаря за поздравите!

     

  3. зайче Said,

    Малии, пак матрял за четене XD
    Федорка прави суфганиот - еврейски понички - като за световно, а аз и спамя, да не се отпуска край "тиранозаврите ядящи всякакви люцерни, коприви и троскоти, а после ставащи непоносимо нервни и започват, да качват от въздуха даже".
    Не знам как сте с елхите там, но ако е по нашият край, трябва да се порка и яде като за последно :)
    ВЕСЕЛИ ПРАЗНИЦИ!!!

     

  4. Profruit Said,

    Благодаря, че наминавате. Весели и на вас.
    Иначе се късам от смях, като прочета по какви ключови думи хората попадат тук. Например, най-повтарящите се:

    misli ot bruce lee
    Уринатори
    мъжки уринатор
    турски кожуси
    циганки с тесни гъ
    уроспии
    панталон от чили
    противогаз
    protivogaz
    надувен дядо кол
    зайо байо
    как да убием вамп
    нарисувани лица на вампири
    прием на юдеизма
    ерхан солак
    чудесата в моя жи
    koi ima photoshop cs5
    самолетчета за сг
    programi za razbivane na wep pod windows 7
    иван будев
    ordera na karmelitkite
    emil medarski
    весо ямбол
    РУСКО ПОРНО
    britney spears
    синята звезда на уиндоус
    пикаене жени
    стойностната жена
    библията на вампирите
    адидас ромика
    руски презервативи
    снимки Омск
    подземен град акко
    "събрали сме се" скъпи младож
    кашкавал на ф-ма "Кошарите"

    Излиза, че народа тук попада заради Споделено и Изток, и не му пука за моите хакерии.

     

  5. зайче Said,

    хахахаххахахахахахахахаххахахахахахаххахахахаха, ооооооооох коремчето ми ще се пръсне от смях XD
    При мен са по-прагматични, само останах очарован небрежно, че втората в списъка ключова дума е vorfax.
    Иначе за месеца имам 22 пъти покъртителното "искам безплатно да сваля филм за мечо пух" : )
    Ама няма да ти оклюмват Ошичките, те гениите приживе са непризнати XD
    Весело изкарване на всичко подкарано :)

     

  6. зайче Said,

    ПП: Току що си имам старателното "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

     

  7. зайче Said,

    Някога "Гарванът" ми беше еталон за сервиране на кетчуп, после Холивудската боза ме разглези и сега се впечатлявам само от екстравагантно поднесени менюта от пикантни масови кланета, като в Kill Bill ^^ - http://www.youtube.com/watch?v=wdjuS17DGlA

     

  8. Profruit Said,

    Как си с розите? Всъщност рози се превежда врадим, а тези дето растат на храст и пълзат на горе са шушана. Проблемът идва от езиковата бариера известно като нюанс. Днес зад гърба ми прозвуча следното - Йеш леха одеф шел кесеф!? (буквален превод - има на тебе ресто на сребро). Тасим ет ха хагура (ще сложиш колана) ве (и) торид ет ха пелефон (ще свалиш мобилния). Това следва да се преведе - имаш ли излишни пари (заядливо). Сложи си предпазния колан и не говори по мобилния зад волана!
    Проблемът е че разликата в езиците не ми дава възможност да ползвам родното - цъфнал си като майска роза. Би следвало да бъде - ата пуреах кмо врадим майим, на което всеки ще се опули. Много трудно се превежда метафори и алегории, защото подобни понятия тук не се изучават. И пак друг пример - аз пиша с химикалка се превежда ани котев бе ет. Буквално на български се превежда - аз пиша в химикалка. Ако искам да кажа аз пиша в химикалка, да речем че съм се смалил и влязал в химикалка и там вътре аз пиша, то не знам как да го кажа. Звучи тъпо, ако кажа по смисъл родното - аз пиша с химикалка (ани котев им ет). Ще възприемат, че съм в група с някаква химикалка и аз, и тя едновремено пишем. Излиза, че съм като рибите. Всичко разбирам, но не мога да кажа и затова мълча. Още повече опитите да обясниш, че си бил в химикалка и там си писал са напразни. Тук няма думи: през, чрез, по, към, до, пре. Съюзът с няма тази тежест като в българския език, а това прави проблема ми с розите голям. Масово се ползва в, дори се подсилва с тох (вътре).
    Проблемът с розите започна от времето на Станке Димитров. Там бях заместник командир по политическата част. Попаднах в бойно танково поделение и логично кенефите бяха бойни. Яко рози. Отказах се да ползвам и ходих сутрин преди тръбата зад оградата. Обаче примера ми бе последван и скоро поделението се оказа минирано. Излезе заповед. Ходете, само след като изкопаете дупка. И така всеки тръгна с лопатката. Копаш дупка, пускаш розата и после я зариваш.

     

  9. зайче Said,

    Облагородяване чрез култивиране XD
    Поздрави от царица Роза http://www.mint.bg/images/1_186.jpg

     

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: openHAB, Ubuntu, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога