Əlaqə forması e-poçt vasitəsilə göndərilir. PHP-də rəy formasının yaradılması

Salam, blog saytının əziz oxucuları. Bu gün mən vebmasterin ziyarətçiləri və ya müştəriləri ilə rahat ünsiyyəti təşkil etmək üçün lazım ola biləcəyi rəy, sifariş, əlaqə və digər formalar yaratmaq yolları haqqında danışmaq istəyirəm.

Aydındır ki, Joomla və WordPress-dən istifadə edərkən rəy və ya sifariş məsələsi müxtəlif uzantılar və ya plaginlərdən istifadə etməklə həll edilə bilər, lakin təmiz HTML üzərində qurulmuş və ya istifadə edilən (skriptlər, cms, dizaynerlər və generatorların rəyini formalaşdırır).

Baxmayaraq ki, Php dəstəyi tələb etməyən həllər var və onlar da bu məqalədə qeyd olunacaq. Bu məqalədə quraşdırma və konfiqurasiyanın xüsusilə ətraflı təsviri olmayacaq, çünki bu, yalnız İnternetdə tapıla bilən mövcud seçimlərin icmalıdır.

Şərhlərdə təsvirə keçid və nümunə ilə səhifə ilə əks əlaqə sistemlərinin yaradılması nümunənizi (tercihen orijinal, gözəl və funksional) təqdim etsəniz, çox minnətdar olaram (mən hələ də ideal həlli tapmaq prosesindəyəm).

Joomla və WordPress üçün rəy formaları

Standart alətlərdən və ya uzantılardan istifadə edərək Joomla və WordPress-də rəyi necə təşkil edə biləcəyinizi görək.

Joomla-da artıq bu funksiyanı həyata keçirən standart seçim var, parametrləri haqqında verilən linkdə oxuya bilərsiniz. Bir qayda olaraq, bu mühərrikin paylanması standart olaraq ən sabit uzantıları ehtiva edir, lakin həmişə ən funksional olanları deyil. Tərtibatçılar yatmır və vaxtaşırı yeni, daha funksional həllər görünür.

Beləliklə, adlanan Joomla üçün ayrı bir rəy modulunu yükləyə bilərsiniz Sürətli Əlaqə, bu sizə yeni funksiyalar və funksionallıq verə bilər (demoya baxın). Bu modulun qurulması və imkanları haqqında oxuya bilərsiniz. Bundan əlavə, rəyin həyata keçirilməsi üçün Joomla-da standart komponent kifayət qədər çevikliyə malik deyil və anti-spamdan (captcha) istifadə etməyə imkan vermir, həmçinin saytda bir neçə fərqli əlaqə forması yaratmağa imkan vermir.

Bu problemlər bu mühərrik üçün alternativ komponentdən istifadə etməklə həll edilir aiContactSafev, bu, saytda istənilən sayda əks əlaqə formaları yaratmağa imkan verir (onları müxtəlif E-poçt ünvanlarına bağlaya bilərsiniz) və faylların yüklənməsi üçün sahə, eləcə də istənilən digər sahələr əlavə etmək imkanı var.

O, sahələrin düzgün doldurulmasını yoxlayır və xəta mesajlarını göstərir, həmçinin aiContactSafev bütün göndərilən məlumatların arxivini saxlayır və onu buradan nəzərdən keçirməyə imkan verir.

Bu komponentə çox çevik captcha daxildir (spamdan qorunmaq üçün məlumat göndərərkən kodun daxil edilməsi). Onu Joomla-nın müxtəlif versiyaları üçün pulsuz yükləmək olar, həmçinin .

İndi WordPress haqqında danışaq. Şəxsən mən hələ bu barədə qərar verməmişəm və mənim kontaktlar səhifəmdə adi E-poçtum var, bu ümumiyyətlə o qədər də gözəl deyil, çünki o, çoxdan spam bazasındadır və əgər mən bunu edə bilməsəydim onu adi birinə bağlayın, onda spam seli çoxdan məni alt-üst edərdi.

Ancaq Google poçtunun spam kəsilməsi yaxşı və hətta çox yaxşı işləyir, çünki məktublarınız, əziz oxucular, bəzən onun isti əlinin altına düşür, bu dəqiqədən istifadə edərək, üzr istəyirəm.

Ümumiyyətlə, bu, rəy formasının əsas üstünlüyüdür - bu, e-poçt ünvanınızı spam göndərənlər üçün inkoqnito saxlamağa imkan verir. Yaxşı, o, həmçinin, adətən, istifadəçilərin layihənizə münasibətinə bir artı əlavə edə biləcək olduqca xoş bir qabıqda hazırlanmışdır, bu, xüsusilə kommersiya resursları üçün doğrudur, rahat sifariş və ya rəy forması dönüşümü (gəlir) artıra bilər.

Əslində WordPress haqqında. adlı çox məşhur və çox güclü bir plagin var Əlaqə forması 7. Onun populyarlığı sadəcə qrafiklərdən kənardadır, bu da onun haqqında xüsusi bir şeyin olduğunu göstərir. Düzdür, captcha funksiyasını həyata keçirmək üçün əlavə Really Simple CAPTCHA plagini quraşdırmalı olacaqsınız.

Əlaqə forması WordPress bloqunuzun istənilən səhifəsinə və ya yazısına, həmçinin vidcetə daxil edilə bilər. Əslində, bu, səhifəni yeniləmədən (ajax texnologiyasından istifadə etməklə) formada məlumatları yeniləməyə imkan verən WordPress üçün bir növ konstruktordur. Şəxsən mən bu plaqini təxminən bir neçə il əvvəl sayt üçün sınaqdan keçirdim və sonra məqsədlərimə çatmaq mənə çox ağır və yersiz olaraq çətin göründü (əlaqə).

Aydındır ki, bu müddət ərzində Əlaqə Forması 7 qarşımızda duran vəzifələrin həyata keçirilməsi üçün daha uyğun ola bilərdi və buna görə də kifayət qədər ətraflı təsvirə əsaslanaraq onu özünüz sınamağı təklif edirəm. Hər hansı digər yaxşı və yüngül plagindən istifadə edirsinizsə, zəhmət olmasa şərhlərdə bu barədə bir neçə söz yazın.

Beləliklə, uyğun uzantılardan istifadə edərək Joomla və WordPress-də rəylərin tətbiqi haqqında danışdıq.

Amma bir də var bir neçə yolla:

    Formanı özünüz yaradın. Bunun üçün siz onun kodunu yazmalı və Css üslublarından istifadə edərək görünüşünü tərtib etməli, həmçinin Php-də onun üçün işləyici yazmalısınız (prinsipcə, Popovun Php üzrə video kursundan əldə etdiyiniz biliklər kifayət edəcək) və sonra sahələr düzgün doldurulur və s. sonra yenidən. Dərhal deyim ki, bu asan olmayacaq.

    Bu skriptin quraşdırılması və konfiqurasiyası prosesini təsvir etmək üçün ayrıca məqalə yazmalısınız, ona görə də yükləmənizi və yükləmənizi təklif edirəm. ətraflı video dərsliyə baxın Bu mövzuda skriptin saytınızın dizaynına inteqrasiyası prosesini də təsvir edəcək.

    Dizaynerlər və generatorlar üçün rəy forması

    Bir neçə onlayn rəy forması dizaynerləri və generatorları var. Məsələn, bu xidmət sizə demək olar ki, istənilən mürəkkəblikdə strukturların yaradılması üçün kifayət qədər rahat və funksional interfeys təklif edir. İlk addımda sizdən rəng sxemi seçməyiniz xahiş olunacaq:

    Bundan sonra, pəncərənin sol tərəfindən gələcək forma üçün tələb olunan sahələri seçməlisiniz və sonra onlara klikləməklə, daha incə düzəlişlər etməlisiniz (rus dilində sahə etiketlərini təyin edin, sahənin genişliyini seçin, növü dəyişdirin və daxil edin ilkin mətn):

    Əlavə edilmiş sahələr sadəcə siçanı sürükləməklə dəyişdirilə, silinə və yenidən redaktə edilə bilər:

    Ümumiyyətlə, bu onlayn dizaynerin interfeysi çox, çox müasir və rahatdır. Sizə lazım olan bütün sahələri istədiyiniz qaydada yerləşdirdikdən və onlara lazım olan bütün parametrləri təqdim etdikdən sonra yadda saxlamaq düyməsini (aşağıda yerləşir) vura bilərsiniz. Növbəti səhifədə sizdən rəy skriptinə baxmaq və yükləmək və ya redaktəyə qayıtmaq təklif olunacaq:

    Html saytları üçün rəy (Php olmadan)

    Onların serverlərində yerləşəcək öz Php prosessorlarını pulsuz təmin edən onlayn xidmətlər var. Bu növə daxildir:

    Əlbəttə ki, dizayn incəliyi baxımından fəvvarə deyil, lakin belə bir forma beş saniyə ərzində yaradıla bilər və başqa bir dəqiqə ərzində tamamilə istənilən veb-saytda yerləşdirilə bilər, hətta Php dəstəyi olmadan hostingdə yerləşir.

    Görünüşü fərdiləşdirdikdən və tələb olunan sahələri əlavə etdikdən sonra "Görünüş" düyməsini, sonra isə "Xüsusiləşdirilmiş" düyməsini basın və kodu kopyalayın. Kontaktlar səhifəsinə yapışdırın və kodun altında yerləşən "Daxil et" düyməsini basın.

    Bundan sonra, kodu daxil etdiyiniz saytınızın səhifəsinin ünvanını və bu forma vasitəsilə göndərilən istifadəçi mesajlarının göndəriləcəyi E-poçt ünvanını daxil edin.

    Fəaliyyət baxımından çox oxşar olan başqa bir rəy forması generatoru var. Onunla yaradılmış dizaynlar Php dəstəyi olmadan da hosting saytlarında yerləşdirilə bilər (yalnız səhifənin ünvanını və mesajların göndəriləcəyi E-poçtu göstərin). Bu barədə çox danışmayacağam, çünki o, mahiyyətcə yuxarıda təsvir edilən konstruktora çox bənzəyir.

    Sənə uğurlar! Tezliklə blog saytının səhifələrində görüşənədək

    Daha çox videoya keçid edərək baxa bilərsiniz
    ");">

    Sizi maraqlandıra bilər

    Google Formalar - Google Formalarda vebsaytda onlayn sorğu necə yaradılır
    SendPulse - Sayt üçün push bildirişləri və onları SendPulse-dən birləşdirmək üçün pulsuz seçim Onlayn HTML redaktorları - vebsaytda quraşdırmaq üçün vizual, IDE və redaktorlar
    Airi.rf bulud xidmətində veb saytınızın sürətləndirilməsi və qorunması

Saytda ən populyar funksiyalardan biri ərizə və ya sifariş formasıdır, ondan məlumatlar e-poçt vasitəsilə sayt sahibinə göndərilir. Bir qayda olaraq, belə formalar sadədir və məlumatların daxil edilməsi üçün iki və ya üç sahədən ibarətdir. Belə bir sifariş formasını necə yaratmaq olar? Bu, HTML işarələmə dili və PHP proqramlaşdırma dilinin istifadəsini tələb edir.

HTML işarələmə dilinin özü sadədir, sadəcə olaraq müəyyən teqləri necə və hara qoymaq lazım olduğunu başa düşməlisiniz. PHP proqramlaşdırma dili ilə işlər bir az daha mürəkkəbdir.

Bir proqramçı üçün belə bir forma yaratmaq çətin deyil, lakin HTML layout dizayneri üçün bəzi hərəkətlər çətin görünə bilər.

Html-də məlumat təqdimetmə forması yaradın

Birinci sətir aşağıdakı kimi olacaq

Bu formanın çox vacib elementidir. Orada məlumatların necə və hansı fayla ötürüləcəyini göstəririk. Bu zaman hər şey POST metodu ilə send.php faylına köçürülür. Bu fayldakı proqram müvafiq olaraq məlumatları qəbul etməlidir, o, poçt massivində yer alacaq və onu göstərilən e-poçt ünvanına göndərməlidir.

Gəlin formaya qayıdaq. İkinci sətirdə tam adınızı daxil etmək üçün sahə olacaq. Aşağıdakı kod var:

Formanın növü mətndir, yəni istifadəçi klaviaturadan buraya mətn daxil edə və ya köçürə biləcək. Name parametri formanın adını ehtiva edir. Bu halda, fio; istifadəçinin bu sahəyə daxil etdiyi hər şey bu ad altında ötürüləcəkdir. Yer tutucu parametri izahat olaraq bu sahədə nə yazılacağını müəyyənləşdirir.

Növbəti sətir:

Burada demək olar ki, hər şey eynidir, lakin sahənin adı e-poçtdur və izahat budur ki, istifadəçi öz e-poçt ünvanını bu formada daxil edir.

Növbəti sətir "göndər" düyməsi olacaq:

Və formada son sətir etiket olacaq

İndi hər şeyi bir araya gətirək.





İndi formadakı sahələri məcburi edək. Aşağıdakı kodumuz var:





HTML formasından məlumatları qəbul edən fayl yaradın

Bu send.php adlı fayl olacaq

Faylda, ilk mərhələdə, post massivindən məlumatları qəbul etməlisiniz. Bunun üçün iki dəyişən yaradırıq:

$fio = $_POST["fio"];
$email = $_POST["e-poçt"];

PHP-də dəyişən adlarından əvvəl $ işarəsi və hər sətrin sonunda nöqtəli vergül qoyulur. $_POST, formadan verilənlərin göndərildiyi massivdir. Html formasında göndərmə metodu method="post" kimi göstərilir. Beləliklə, html formasından iki dəyişən qəbul edilir. Saytınızı qorumaq üçün bu dəyişənləri bir neçə filtrdən - php funksiyalarından keçirməlisiniz.

Birinci funksiya istifadəçinin forma əlavə etməyə çalışacağı bütün simvolları çevirəcək:

Bu zaman php-də yeni dəyişənlər yaradılmır, mövcud dəyişənlərdən istifadə edilir. Süzgəcin edəcəyi şey xarakteri dəyişdirməkdir "<" в "<". Также он поступить с другими символами, встречающимися в html коде.

İstifadəçi onu forma əlavə etməyə çalışarsa, ikinci funksiya URL-in kodunu açır.

$fio = urldecode($fio);
$e-poçt = urldecode($email);

Üçüncü funksiya ilə, əgər varsa, xəttin əvvəlindən və sonundan boşluqları siləcəyik:

$fio = trim($fio);
$email = trim($email);

php dəyişənlərini süzgəcdən keçirməyə imkan verən başqa funksiyalar da var. Onların istifadəsi təcavüzkarın bu html e-poçt göndərmə formasına proqram kodu əlavə etməyə çalışacağından nə dərəcədə narahat olduğunuzdan asılıdır.

HTML formasından PHP faylına ötürülən məlumatların doğrulanması

Bu kodun işlədiyini və məlumatların ötürüldüyünü yoxlamaq üçün sadəcə echo funksiyasından istifadə edərək onu ekranda göstərə bilərsiniz:

echo $fio;
əks-səda "
";
echo $fio;

Burada ikinci sətir php dəyişənlərinin çıxışını müxtəlif sətirlərə ayırmaq üçün lazımdır.

PHP istifadə edərək HTML formasından alınan məlumatların e-poçta göndərilməsi

Məlumatı e-poçtla göndərmək üçün PHP-də poçt funksiyasından istifadə etməlisiniz.

mail("hansı ünvana göndəriləcək", "məktubun mövzusu", "Mesaj (məktubun mətni)","Kimdən: məktub hansı e-poçtdan göndərilir \r\n");

Məsələn, məlumatı sayt sahibinin və ya menecerinin e-poçtuna göndərməlisiniz [email protected].

Məktubun mövzusu aydın olmalı və məktubun mesajında ​​istifadəçinin HTML formasında qeyd etdiyi şeylər olmalıdır.

poçt (" [email protected]", "Saytdan ərizə", "Tam adı:".$fio.". E-poçt: ".$email ,"Kimdən: [email protected]\r\n");

Formanın göstərilən e-poçt ünvanına PHP vasitəsilə göndərilib-göndərilmədiyini yoxlayacaq şərt əlavə etmək lazımdır.

əgər (poçt(" [email protected]", "Saytdan sifariş", "Tam adı:".$fio.". E-poçt: ".$email ,"Kimdən: [email protected]\r\n"))
{
echo "mesaj uğurla göndərildi";
) başqa (
}

Beləliklə, HTML forma məlumatlarını e-poçta göndərəcək send.php faylının proqram kodu belə görünəcək:

$fio = $_POST["fio"];
$email = $_POST["e-poçt"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$e-poçt = urldecode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
//echo "
";
//echo $e-poçt;
əgər (poçt(" [email protected]", "Saytdan ərizə", "Tam adı:".$fio.". E-poçt: ".$email ,"Kimdən: [email protected]\r\n"))
(echo "mesaj uğurla göndərildi";
) başqa (
echo "mesajı göndərərkən xətalar baş verdi";
}?>

Məlumatın fayla ötürüldüyünü yoxlamaq üçün üç sətir şərh olunur. Lazım gələrsə, onlar çıxarıla bilər, çünki onlar yalnız ayıklama üçün lazım idi.

Formanı təqdim etmək üçün HTML və PHP kodunu bir faylda yerləşdiririk

Bu məqaləyə şərhlərdə bir çox insanlar həm HTML formasının, həm də məlumatların e-poçta göndərilməsi üçün PHP kodunun iki deyil, bir faylda olduğuna necə əmin olmaq barədə sual verir.

Bu işi həyata keçirmək üçün formanın HTML kodunu send.php faylına yerləşdirmək və POST massivində dəyişənlərin olub-olmamasını yoxlayacaq şərt əlavə etmək lazımdır (bu massiv formadan göndərilir). Yəni, əgər massivdə dəyişənlər yoxdursa, o zaman istifadəçiyə formanı göstərmək lazımdır. Əks halda, siz massivdən məlumatları qəbul edib alıcıya göndərməlisiniz.

Gəlin send.php faylında PHP kodunun necə dəyişdiriləcəyinə baxaq:



Saytdan ərizə forması


//POST massivində dəyişənlərin olub olmadığını yoxlayın
if(!isset($_POST["fio"]) və !isset($_POST["e-poçt"]))(
?>





) başqa (
//formanı göstərin
$fio = $_POST["fio"];
$email = $_POST["e-poçt"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$e-poçt = urldecode($email);
$fio = trim($fio);
$email = trim($email);
əgər (poçt(" [email protected]", "Saytdan ərizə", "Tam adı:".$fio.". E-poçt: ".$email ,"Kimdən: [email protected]\r\n"))(
echo "Mesaj uğurla göndərildi";
) başqa (
echo "Mesajı göndərərkən xətalar baş verdi";
}
}
?>



Biz isset() PHP funksiyası ilə POST massivində dəyişənin mövcudluğunu yoxlayırıq. Şərtdə bu funksiyadan əvvəl nida işarəsi inkar deməkdir. Yəni dəyişən mövcud deyilsə, o zaman formamızı göstərməliyik. Əgər mən nida işarəsi qoymasaydım, şərt hərfi mənada “əgər varsa, formanı göstər” demək olardı. Və bu, bizim vəziyyətimizdə yanlışdır. Təbii ki, siz onun adını index.php olaraq dəyişə bilərsiniz. Faylın adını dəyişdirsəniz, sətirdəki fayl adını dəyişməyi unutmayın

. Forma eyni səhifəyə keçid etməlidir, məsələn, index.php. Koda səhifənin başlığını əlavə etdim.

Veb saytdan PHP formasını təqdim edərkən baş verən ümumi səhvlər

Birinci, yəqin ki, ən məşhur səhv, heç bir mesajı olmayan boş ağ səhifəni gördüyünüz zamandır. Bu o deməkdir ki, siz səhifə kodunda səhv etmisiniz. PHP-də bütün səhvlərin göstərilməsini aktivləşdirməlisiniz və sonra səhvin harada edildiyini görəcəksiniz. Koda əlavə edin:

ini_set("ekran_səhvləri","Aktiv");
error_reporting("E_ALL");

Send.php faylı yalnız serverdə işlədilməlidir, əks halda kod sadəcə işləməyəcək. Bunun yerli server olmaması məsləhətdir, çünki o, həmişə xarici poçt serverinə məlumat göndərmək üçün konfiqurasiya olunmur. Əgər kodu serverdə işlətmirsinizsə, onda PHP kodu birbaşa səhifədə göstəriləcək.

Beləliklə, düzgün işləmək üçün saytın hostinqində send.php faylını yerləşdirməyi tövsiyə edirəm. Bir qayda olaraq, orada hər şey artıq konfiqurasiya edilmişdir.

Başqa bir ümumi səhv, "Mesaj uğurla göndərildi" bildirişinin görünməsi, lakin məktub poçta gəlməməsidir. Bu vəziyyətdə xətti diqqətlə yoxlamaq lazımdır:

əgər (poçt(" [email protected]", "Saytdan sifariş", "Tam adı:".$fio.". E-poçt: ".$email ,"Kimdən: [email protected]\r\n"))

Əvəzinə [email protected] məktubun göndərilməli olduğu bir e-poçt ünvanı olmalıdır, lakin bunun əvəzinə[email protected] bu sayt üçün mövcud e-poçt olmalıdır. Məsələn, bir veb sayt üçün bu olacaq . Yalnız bu halda formadan məlumatlar olan məktub göndəriləcək.


Günortanız xeyir, hər bir vebsaytda rəy forması olmalıdır. Bu gün mən WordPress mühərriki də daxil olmaqla istənilən vebsayta daxil etmək üçün hazır forma nümunəsini göstərəcəyəm. Hazırlanmış html və php kodu nümunəsi veb saytınıza kopyalana bilər. Hazır nümunəyə əlavə olaraq, çox populyar olan bir çox plagin var. Bir çox saytlarda belə bir forma artıq mövzuya daxil edilmişdir, lakin bəzən başqa səhifəyə başqasını əlavə etmək və ya köhnəni əvəz etmək lazımdır.

Bu yazını yazmağa başlamazdan əvvəl bu suala cavab axtarmaq üçün internetdə dolaşdım. Daha çox sayt və bloqu nəzərdən keçirdikdən sonra sayta rəy formasının daxil edilməsi ilə bağlı çox az yüksək keyfiyyətli cavab tapdım. Materialların əksəriyyəti plaginlərlə işləmək üçün yazılmışdır. Bəzi məqalələrdə nə və necə ediləcəyi tam aydın deyil, kod işləmir, məktublar gəlmir... və s.

Əlbəttə, layiqli cavablar var, lakin çox azdır. Mən sizə çox zəka tələb etməyən sadə bir misal verim. PHP-də heç bir xüsusi bilik tələb olunmur, daha doğrusu, ümumiyyətlə, lazım deyil. Lazım olanda nəyi və harada dəyişdirilməli olduğunu ətraflı yazacam. Forma heç bir qüsur olmadan yaxşı işləyir. Formanın bir nümunəsi veb saytımdadır. Bitmiş nümunədə gözəllik üçün bir neçə üslub əlavə etdim ki, forma daha "kasıb" görünməsin. İstəyirsinizsə, hər şeyi öz mülahizənizlə dəyişə bilərsiniz.

Html-də vebsayt üçün hazır rəy forması

Bu nümunədə sayt üçün rəy forması html kodundan ibarətdir. Bu html kodu nümunəsini harada və nədən istifadə etməyinizdən asılı olmayaraq saytın tamamilə istənilən səhifəsinə daxil edə bilərsiniz. Eyni kod WordPress mühərrik səhifəsinə daxil edilə bilər, hər şey düzgün və uğursuz işləyəcəkdir.

ad E-poçt: Mesaj mövzusu Mətniniz:

< form action = "/wp-content/themes/xmarkup/form.php" metod = "poçt" adı = "forma" > Ad< input class = "inp" style = "width: 30%;" name = "name" type = "text" / >

E-poçt:< input class = "inp" style = "width: 30%;" name = "email" type = "text" / >

Mesaj mövzusu< input class = "inp" style = "width: 30%;" name = "temma" type = "text" / >

Mətniniz:

< textarea class = "inp" style = "width: 80%;" cols = "1" name = "massage" rows = "5" > < / textarea >

< input class = "inp" type = "submit" value = "Göndər" / >

< / form >

Kodun ən əvvəlində, birinci sətirdə, form.php php faylına gedən yolunuzu göstərməlisiniz (bu barədə bir az sonra). Başqa heç nəyi dəyişməyə ehtiyac yoxdur. Formanın adı və onun sahələri sizi qane etmirsə, hər zaman yenilərini əlavə edə və ya köhnələrini dəyişə bilərsiniz. Siz həmçinin öz üslublarınızı birbaşa cədvələ əlavə edə bilərsiniz. Bu seçim sizin üçün əlverişsizdirsə, yeni siniflər təyin edin və yalnız bundan sonra style.css faylınız vasitəsilə üslub əlavə edin.

Bunu necə edəcəyini bilməyənlər üçün saytın admin panelinə keçin, redaktora keçin və style.css faylını açın. Bu kodu stil cədvəlinin ən sonuna əlavə edin. Nəticədə, forma kodu səhifəyə, css üslublarınız isə style.css cədvəlinə daxil edilməlidir.

Inp( doldurma: 10px; haşiyə: 1px bərk #E5E5E5; en: 200px; rəng: #999999; qutu-kölgə: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-kölgə: rgba(0) , 0, 0, 0.1) 0px 0px 8px; -webkit-box-kölgə: rgba(0, 0, 0, 0.1) 0px 0px 8px; )

inp (

doldurma: 10px;

haşiyə: 1px bərk #E5E5E5;

eni: 200px;

rəng : #999999;

qutu - kölgə: rgba ( 0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

Moz - qutu - kölgə : rgba ( 0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

Webkit - qutu - kölgə : rgba ( 0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

Bu addımlardan sonra səhifədə buna bənzər rəy forması olmalıdır. Özünüzü çox götürməyin, formanız sadə və mümkün qədər rahat olmalıdır. Lazımsız əlavə sahələr olmadan...ad, e-poçt, mövzu və mesaj. İstəyirsinizsə, hətta mesajın mövzusu da silinə bilər.

Php forma kodu

Formanın işarələnməsinə qərar verdik, onu gözəlləşdirdik, indi php uzantılı fayl yaratmalı və ona aşağıdakı kodu əlavə etməliyik. Faylı FTP müştəri vasitəsilə vebsaytınıza əlavə edin. Əksər istifadəçilər CMS-dən istifadə edir, bu faylı mövzunuz olan qovluğa buraxın. Əvvəlcə yuxarıda göstərdiyim formanızın işarələnməsinə bu faylın ünvanını və adını yazmalısınız. Nümunə üçün tam yolu yazdım ki, nəyin və hara daxil edilməli olduğu aydın olsun.

(

form.php faylının kodunun özündə:

< meta http - equiv = "refresh" content = "1; url=http://сайт" >

< meta charset = "UTF-8" / >

if (isset ($_POST [ "ad" ] ) ) ( $name = $_POST [ "ad" ] ; if ($name == "" ) ( təyin olunmamış ($name ) ; ) )

if (isset ($_POST [ "email" ] ) ) ( $email = $_POST [ "email" ] ; if ($email == "" ) ( unset ($email ); ) )

if (isset ($_POST [ "temma" ] ) ) ( $temma = $_POST [ "temma" ] ; if ($temma == "" ) ( qurulmamış ($temma ) ; ) )

if (isset ($_POST [ "massage" ] ) ) ( $massage = $_POST [ "massage" ] ; if ($massage == "" ) ( unset ($massage ) ; ) )

if (isset ($name ) && isset ($email ) && isset ($temma ) && isset ($massage ) ) (

$ünvan = " [email protected]" ;

$mes = "Ad: $name \nE-poçt: $email \nMövzu: $temma \nMətn: $massage";

$göndər = poçt ($ünvan, $temma, $mes, "Məzmun növü: mətn/düz; simvol dəsti = UTF-8\r\nFrom:$email") ;

əgər ($send == "doğru" )

(səda "Mesaj göndərildi"; }

başqa (səda "Vay, nəsə xəta baş verdi"; }

başqa

əks-səda "Bütün sahələri doldurun";

url=http://site yerinə saytınızın ünvanını yazın. $ünvan = " [email protected]"- bu sətirdə məktubların göndəriləcəyi e-poçt ünvanınızı göstəririk. Başqa bir şey dəyişməyə ehtiyac yoxdur, hər şey qurulub və işləyir. Quraşdırma prosesində hər hansı bir çətinlik varsa, şərhlərdə yazın, mütləq cavab verəcəm.

WordPress-də rəyin daxil edilməsi

WordPress-də bir formanın quraşdırılması prosesi fərqli deyil, bütün addımlar eyni şəkildə edilir. Form.php faylını mövzunuz olan qovluğa yükləməyiniz məsləhətdir. Html işarələməsində işləyici faylının tam və dəqiq ünvanını göstərməyi unutmayın. Bundan əlavə, veb-sayt ünvanını veb saytınıza dəyişdirməlisiniz və e-poçt ünvanını düzgün yazmalısınız. Hazır forma kodu bloqunuzun istənilən səhifəsinə daxil edilə bilər. Nümunə olaraq bloquma müsabiqələr olan bir səhifə əlavə etdim.

Nümunə olaraq, siz “Müəlliflə əlaqə saxlayın” və ya “Müəllif” səhifəsi yarada və formanızı ora yükləyə bilərsiniz. Bəzi bloqlarda hər formanın altında bir sıra sosial şəbəkə düymələri və ya müəlliflə əlaqə saxlamaq üçün əlavə seçimlər gördüm. İstəyirsinizsə, eyni şeyi yenidən edə bilərsiniz. Əlaqə forması bloqumda işləyir, mən şəxsən öz nümunəmdən istifadə edərək onu sınaqdan keçirdim. Əgər məktublar sizə çatmırsa, deməli, sizdə problem var.

WordPress plaginləri

Bu cür rəyi saytınıza daxil etməkdə çətinlik çəkirsinizsə, plaginlərdən birini söyləyib saytınıza quraşdıra bilərsiniz. Bu gün veb sayt üçün bu cür formalar yaratmaq üçün istifadə edilə bilən çox sayda plagin var. İdarəetmə panelinə gedin, Pluginləri vurun - yeni əlavə edin. İstədiyinizi seçib sağlamlığınız üçün istifadə edirik. Contact Form 7 plagini daha populyardır.

  1. Sürətli Təhlükəsiz Əlaqə Forması.
  2. ME ilə əlaqə forması.
  3. FormCraft.
  4. Vizual forma qurucusu.
  5. nForms – WordPress Forma Yaradıcısı.
  6. Qravitasiya formaları.

Hər birini növbə ilə quraşdırırıq və hər birinə ayrıca baxırıq. Dərhal plaqinin funksionallığına və müəllifin veb saytına (əgər varsa) kənar bağlantıların silinməsinə diqqət yetirin. Bütün bu cür formalar əvvəlcə çox cəlbedici görünür, onu zövqünüzə və rənginizə uyğunlaşdıra bilərsiniz.

Nümunə olaraq onlardan birincisini götürək. Biz yeni Contact Form 7 plaginini əlavə edirik.Bu plagin çox sadədir, onunla işləməkdə heç bir problem olmamalıdır. Bir çox bloggerlər bu plaqindən öz saytlarında əlavə kiçik formalar üçün istifadə edirlər. Sol tərəfdəki konsolda Əlaqə Forması 7 elementinə keçin və "yeni forma əlavə et" düyməsini basın. Standart dil artıq rus dilidir.

Birinci sekmədə mövcud olacaq sahələri seçin və adlandırın. Çox böyük bir forma yaratmağa ehtiyac yoxdur; ad, e-poçt, mövzu, mesaj və “göndər” düyməsini əlavə edin. "Məktub" sekmesinde mesajların göndəriləcəyi e-poçt ünvanınızı göstərin." Heç bir xüsusi çətinlik çəkməməlisiniz, hər şey intuitivdir.

Yaradılandan sonra plagin sizə qısa kod təklif edəcək ki, onu məsələn saytda istədiyiniz yerə yapışdırmalı olacaqsınız. Qısa kodu daxil etdikdən sonra yeni formanızı görəcəksiniz. Hər hansı bir səhifə yaradarkən “Mətn” redaktə nişanına keçin və kodunuzu yerləşdirin.

Kiçik mənfi cəhət odur ki, rəy dizaynınız çox dəhşətli olacaq. Çox üzülməyin. Bu ünvana ftp vasitəsilə daxil olun wp-content/plugins/contact-form-7/modullar. Bu qovluqda plaqinin bütün css üslubları var. Formanızı gözəl və nəzərə çarpan etmək üçün öz yeni xüsusiyyətlərinizi təhlükəsiz şəkildə əlavə edə bilərsiniz.

Əlaqə forması generator

Əlavə plaginlərə əlavə olaraq, bu cür formalardan istifadə edə bilərsiniz. Tez və xüsusi bilik olmadan tamamilə yeni bir forma yarada biləcəyiniz xüsusi xidmətlər var. Sikkənin başqa tərəfi də var. Bu cür xidmətlərin funksionallığı və ən əsası, bu cür zövqün dəyəri üçün də yoxlanılmalıdır. Bəziləri pulsuzdur, lakin pullu variantlar da var. Onlardan birinin adını Yandex-də yazın.

  • forma dizayneri;
  • livetools.uiparade;
  • Google Formalar;
  • iFormbuilder;
  • fary.

Belə onlayn generatorlarda sıfırdan kod yazmağa, səhvlər haqqında düşünməyə və s. Artıq hər şey əvvəllər edilib. Yalnız forma üçün sahələri seçmək, "göndər" düyməsini əlavə etmək və bütün lazımi qeydləri daxil etmək lazımdır. Bütün bu addımlardan sonra xidmət sizə sayt səhifəsinə daxil etmək üçün kod təklif edəcək. Qəbul edilmiş kodu səhifənizə köçürün və işlədiyini yoxlamaq üçün əlaqəni yoxlayın.

Veb saytın, bloqun və ya mağazanın sahibi ilə əlaqə indi hər vebsaytda mövcuddur. Bir çox onlayn mağaza pullu xidmətlərdən istifadə edir. Bu cür xidmətlərin köməyi ilə məktubların göndərilməsi ilə yanaşı, satışın da sayı artır. Müştəri veb-sayta daxil olduqda çox rahatdır və istənilən vaxt onlayn mağaza administratoru ilə canlı əlaqə saxlaya bilər.

Bu gün çoxlu sayda oxşar xidmət növləri var və hamısı hələ də dayanmır. Hər yeniləmə ilə yeni xüsusiyyətlər əlavə olunur. Onlayn məsləhətçilər müştəri ilə asan ünsiyyət üçün onlayn mağazanıza bir çox funksiyalar əlavə edirlər. Nümunə olaraq livetex xidmətini götürək, onun yeganə mənfi tərəfi yəqin ki, qiymətdir. Üç aylıq istifadə müddəti bir mağaza üçün 4200 rubl təşkil edir. Sınaq müddətini sınamaq üçün həmişə seçim var.

  1. Müştəri ilə canlı ünsiyyət.
  2. Qurğuşun generatorları.
  3. Geri zəng etmək üçün müxtəlif vidjetlər.
  4. Onlayn statistika.
  5. Onlayn monitorinq.

Saytda rəyi necə quraşdırmaq barədə hələ də suallarınız varsa, şərhlərdə onlardan soruşun. Məqaləni sosial şəbəkələrdə paylaşmaqdan çəkinməyin.

Salam əziz oxucular, bu gün mən sizə istifadəçinin əlaqə məlumatlarını əldə etmək üçün formalar yaratmağımdan danışmaq istəyirəm.

Bu gün, , açılış səhifəsi strukturunun bir hissəsidir. Axı, bu, əvvəllər ziyarətçinin e-poçtunu alaraq sifariş qəbul etmək və ya məhsullarınızın kataloqunu göndərmək yollarından biridir.

Əlaqə formasının yaradılması - html işarələnməsi

Mənə adətən üç sahə lazımdır və əksər hallarda əlaqə forması yaratmaq üçün bu işarədən istifadə edirəm:

Bu kodu brauzerinizdə açmağa çalışın və nə əldə etdiyinizə baxın, hansı İnternet brauzerindən istifadə etdiyinizə görə o, belə görünməlidir:

İşarələmə ilə bağlı hər hansı bir sualınız varsa, şərhlərdə onlardan soruşun, mən ətraflı cavab verməyə çalışacağam və ölçüsünü artırmamaq üçün məqalədəki hər bir elementi təsvir etməyəcəyəm. Bundan əlavə, elementlər olduqca sadədir.


Əlaqə formasının yaradılması - css işarələnməsi

Gəlin formamızı tərtib edək və onu oxunaqlı edək:

/* Forma üslubları */ #application ( en: 475px; margin: 0 auto; ) /* Giriş sahəsi üslubları */ #applicationName, #applicationEmail, #applicationTelephone ( en: 100%; hündürlük: 73px; fon: heç biri; kənar boşluq - üst: 25px; haşiyə: 1px bərk #fff; haşiyə-radius: 40px; mətn düzülüşü: mərkəz; rəng: #fff; şrift ölçüsü: 24px; ) /*Onlara kliklədikdə sahələrin üslubları*/ #applicationName:focus , #applicationEmail:focus, #applicationTelephone:focus ( haşiyə: 1px bərk #30ad64; ) /*Yer tutucuda göstərilən mətn üslubları*/ ::-webkit-input-placeholder ( rəng: #efefef; font-family: "PT Sans ", sans-serif; mətn kölgəsi: 0 1px 1px rgba(0, 0, 0, .3); ) ::-moz-yer tutucu (rəng: #fff; şrift ailəsi: "PT Sans", sans-serif ; mətn kölgəsi: 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 19+ */ :-moz-yer tutucu (rəng: #fff; şrift ailəsi: "PT Sans", sans- serif; mətn kölgəsi: 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 18- */ :-ms-input-placeholder (rəng: #fff; font-family: "PT Sans" , sans-serif; mətn kölgəsi: 0 1px 1px rgba(0, 0, 0, .3); ) ::yer tutucu (rəng: #fff; mətn kölgəsi: 0 1px 1px rgba(0, 0, 0, .3); ) /*Düymə üslubları*/ .applicationButton ( yuxarı kənar: 25px; fon: #30ad64 ; haşiyə: heç biri; en: 100%; hündürlük: 73px; haşiyə radiusu: 40px; rəng: #fff; şrift ölçüsü: 24px; mətni çevirmək: böyük hərf; şrift ailəsi: "PT Sans", sans-serif; kursor : göstərici; ) .applicationButton:hover ( fon: #d68c18; )

Düymə rənginin rəvan dəyişməsini istəyirsinizsə, aşağıdakı sətri .applicationButton və .applicationButton:hover əlavə edin:

Keçid: .6s;

Harada.6s millisaniyələrdə animasiya vaxtıdır.
İndi formamız gözəl bir görünüş əldə etdi, indi belə görünür:


Əlaqə formasının yaradılması - php işarələməsi

İndi application.php faylını yaratmalıyıq. O, daxil edilmiş parametrləri formadan alacaq və onları elektron poçtla bizə göndərəcək.

Onun strukturu adi html faylına bənzəyir, üzərinə “Təşəkkür edirəm, müraciətiniz qəbul olundu. Müraciətə baxıldıqdan sonra menecerlərimiz sizinlə əlaqə saxlayacaq”

Yəni istifadəçi düyməni kliklədikdə o, application.php səhifəsinə yönləndiriləcək. Bu tam səhifədir və siz ona uyğun üslubda tərtib etməlisiniz.

"; $msg .= "

Saytdan mesaj

\r\n"; $msg .= "

Kimdən:".$username."

\r\n"; $msg .= "

Poçt:".$usermail."

\r\n"; $msg .= "

Veb sayt:".$usertel."

\r\n"; $msg .= ""; // mesaj göndərilir if(@mail($sendto, $subject, $msg, $headers)) ( echo "
"; ) başqa ( əks-səda "
"; } ?>

Kodu bir az izah edək:

$sendto = " [email protected]"; // məktubun göndəriləcəyi poçt $username = $_POST["name"]; // adla sahədən alınan məlumatları $usertel = $_POST["telephone"] dəyişənində yadda saxlayın; / / verilənləri telefon nömrəsi ilə sahədən alınan dəyişəndə ​​yadda saxlayın $usermail = $_POST["email"]; // e-poçt ünvanı ilə sahədən alınan məlumatları dəyişəndə ​​yadda saxlayın

Burada, məncə, aydındır.

İndi məktubun başlığını yaradaq.

$subject = "Yeni mesaj"; $headers = "Kimdən: " . strip_tags($usermail) . "\r\n"; $headers .= "Cavab: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-versiya: 1.0\r\n"; $headers .= "Məzmun Növü: text/html;charset=utf-8 \r\n";

Xətt $subject = "Yeni mesaj";— məktubun mövzusuna cavabdehdir, ora yaza bilər: “Saytdan ərizə” və ya sizə uyğun gələn hər şeyi.

Məktubun giriş növü="e-poçt" sahəsində göstərilən ünvandan gəldiyinə əmin olmağı təklif edirəm. Yəni, formanı doldurarkən istifadəçinin daxil olduğu yerdən. Bunun üçün aşağıdakı sətirləri yazırıq:

$headers = "Kimdən: " . strip_tags($usermail) . "\r\n";

Yəni, e-poçt ünvanının daxil edilməsinə cavabdeh olan sahədən məlumatların saxlandığı $usermail dəyişənindən məlumatları əvəz edəcəyik.

İndi məktubun görünüşünü təyin edək. İstədiyiniz kimi dizayn edə bilərsiniz, lakin mən aşağıdakı quruluşu təklif edirəm:

$msg = " "; $msg .= "

Saytdan mesaj

\r\n"; $msg .= "

Kimdən:".$username."

\r\n"; $msg .= "

Poçt:".$usermail."

\r\n"; $msg .= "

Telefon:".$usertel."

\r\n"; $msg .= "

";

Birinci sətir hərf şriftini təyin edir. İkincisi, biz bir mesaj göstəririk, məsələn: “Birinci ekranda rəy formasından sorğu”. Üçüncü, dördüncü və beşinci sətirlər formadan məlumatları ötürür. Hər biri yeni sətirdə.

İndi poçt funksiyasından istifadə edərək məktub göndərməlisiniz və məktubun uğurla və müvəffəqiyyətsiz göndərildiyi təqdirdə nə olacağını müəyyənləşdirməlisiniz:

Əgər(@mail($sendto, $subject, $msg, $headers)) ( əks-səda "

"; ) başqa ( əks-səda "
"; } ?>

Mən bunu elə etdim ki, hər hansı bir halda müvafiq mətni olan şəkil göstərilsin. Şəkil əvəzinə tam səhifə göstərə bilərsiniz. Sadəcə şəklin yerinə kodu yazın.

Bir neçə saniyədən sonra şəkil göstərildikdən sonra əsas səhifəyə yönləndirirəm (avtomatik yönləndirmə). Bunu baş etiketləri arasına aşağıdakı sətri daxil etməklə edə bilərsiniz;

Yəni 4 saniyədən sonra istifadəçi avtomatik olaraq əsas səhifəyə qaytarılacaq!

Mən PHP üzrə mütəxəssis deyiləm – bu, arxa plan proqramlaşdırma dilidir; mən bütün həyatım boyu front-end öyrənməyə cəlb olunmuşam. Ona görə də sərt mühakimə etməyin. Bəli, burada əlaqə formalarının doldurulması və s. üçün yoxlamalar edə bilərsiniz, lakin bu mənim üçün həmişə kifayət idi, ona görə də kimin bu kodu necə təkmilləşdirmək barədə təklifi varsa, şərhlərdə və ya e-poçt vasitəsilə yazın, mən düzəliş edəcəyəm. dərs, təşəkkür edirəm!

Yeri gəlmişkən, səhifəni yenidən yükləmədən rəy formasına ehtiyacınız varsa, onu necə quraşdırmaq barədə oxuya bilərsiniz

Bəlkə də bəzi insanlar materialı yaxşı başa düşmürlər, amma mənim addımlarımı dəqiq təkrarlasanız, əlaqə formanız mütləq işləyəcək. Hər hansı bir sualınız varsa, şərhlərdə yazın, cavab verməyə çalışacağam! Bloqda görüşənədək!

P.s. Formanın niyə işləməməsi və e-poçtların gəlməməsi ilə bağlı tez-tez suallar almağa başladığım üçün bunun baş verə biləcəyi bir neçə ən məşhur səbəbləri təsvir etmək qərarına gəldim:

  • Siz serverdə olmayan formanı sınayırsınız.
  • Formanı pulsuz hostinqdə sınayın.
  • Siz formanı ödənişli hostinqdə sınaqdan keçirirsiniz, lakin pulsuz sınaq müddətində.

Bu hallarda məktublar e-poçtunuza göndərilməyəcək.

Bunu başa düşmək və formanı özünüz etmək üçün çox tənbəlsinizsə, diqqət yetirməyi məsləhət görürəm.

23/07/2014 12/07/2018

dimadv7



HTML və CSS-də əks əlaqə formasının yaradılması üçün təlimatlar, həmçinin hazır formalar toplusu və onların birləşdirilməsi və qurulması üçün bələdçi.

Naviqasiya

Bu gün hətta proqramlaşdırma bacarığı belə olmayan istənilən şəxs internetdən hazır şablonu yükləyib istifadə etdiyi mühərrikə quraşdıraraq asanlıqla öz veb saytını yarada bilər.

Bununla belə, hər hazır şablon istifadəçinin tələblərini ödəyə bilmir. Onların bir çoxu "xam" formada təqdim olunur və məsələn, əks əlaqə forması kimi vacib bölmələrə və funksiyalara malik deyil.

Bu sayt bloku onlayn mağazalar və böyük informasiya portallarının sahibləri üçün son dərəcə vacibdir. Məqaləmizdə siz özünüz rəy formasını necə yaratmaq, hazır şablonu haradan yükləmək və vebsaytınıza necə quraşdırmaq barədə məlumat tapa bilərsiniz.

Şəkil 1. Əlaqə forması nədir və nə üçün bu qədər zəruridir?

Əlaqə forması nədir və niyə bu qədər lazımdır?

  • Hər hansı bir layiqli veb saytın ən vacib xüsusiyyətlərindən biri əlaqə formasıdır. Ziyarətçi ilə resurs administrasiyası arasında qarşılıqlı əlaqəyə xidmət edir. Beləliklə, onun köməyi ilə texniki dəstəyə sorğu yaza və ya lazımi məlumatları administrasiyaya göndərə bilərsiniz. Məsələn, onlayn mağazalarda ödəniş detalları və ya sifariş edilən məhsulun adı. Portalınızda belə bir formanın olması çox tövsiyə olunur, çünki ziyarətçiləriniz və müştərilərinizlə daimi əlaqə onun uğurlu inkişafının açarıdır.

Əlaqə forması bir neçə mətn daxiletmə sahəsindən və “Göndər” düyməsindən ibarət ayrıca səhifə və ya blokdur (şöbədir. Tipik olaraq, standart bir forma aşağıdakı sahələrə malikdir:

HTML və PHP-də vebsayt üçün sadə rəy formasını necə yaratmaq olar?

Məqaləni tam hüquqlu darıxdırıcı dərsliyə çevirməmək üçün, işarələmə dilinin əsasları ilə artıq tanış olduğunuzu güman edəcəyik. HTML və bunun necə işlədiyi barədə ümumi təsəvvürə sahib olun. Əgər belə bacarıqlarınız yoxdursa, forma yaratmağa başlamazdan əvvəl pulsuz resursda biliklərinizi bir az təzələmək tövsiyə olunur. htmlbook.ru. Əks halda, siz nəinki bu ideyadan imtina edə, həm də mövcud veb saytınızın kodunu korlaya bilərsiniz.

İşləyən rəy formasını yenidən yaratmaq üçün sizə üç vacib element lazımdır, onlardan biri formanın tərtibatı və strukturuna cavabdehdir ( HTML), ikincisi xarici dizaynına görə ( CSS), üçüncüsü isə məlumatların işlənməsi və ötürülməsi üçün ( PHP). Sıra ilə başlayaq:

Əlaqə forması üçün HTML kodunun yazılması

  • Addım 1. Formanı göstərmək üçün HTML etiketi istifadə olunur
    . Onun içərisində formaların ölçüləri, üslubları və digər həyati xüsusiyyətləri göstəriləcəkdir. Etiketin özünü yazarkən, ona təyin etmək üçün bir sinif təyin etməlisiniz, bu daha sonra onu forma üçün təyin etməyə kömək edəcəkdir. CSSüslublar.

  • Addım 2. Sonra, etiket daxilində formamızın ilk sahəsini yaratmaq üçün
    blok etiketi yazmalısınız

    , yeni bir xətt yaratmaqdan məsul olan.

  • Addım 3. Bir etiketin içərisində

    Yeni sətirə aşağıdakı etiketi daxil edirik: ad . O, gələcək forma sahələrinin adlarına cavabdehdir.

  • Addım 4. Yeni sətirdən hər şey eyni etiketdədir

    Aşağıdakı dəyərlərlə sahə yaratma teqini yazırıq: Adınızı daxil edin » tələb olunur\>. Parametr " type="mətn""" mətn sahəsinin növünü və "parametrini müəyyən edir. yer tutucu=" Adınızı daxil edin «» ilkin mətni məhz bu mətn sahəsində təyin edir. Parametr " tələb olunur» bu sahənin doldurulmasının tələb olunduğunu sayt ziyarətçisinə aydınlaşdırır. Nəticədə, aşağıdakı ekran görüntüsündə göstərildiyi kimi, bir sahə ilə bir forma sahib olmalısınız.

  • Addım 5. Yuxarıdakı nümunədən istifadə edərək, hər dəfə etiketdən başlayaraq sizə lazım olan qalan sahələri əlavə edin

    . Mətn mesajı olan sahə təyin etmək üçün etiketdən istifadə edin . Seçimlər " cols"Və" sıralar" mətn sahəsinin eninə və hündürlüyünə cavabdehdir. Ən çox bəyəndiyiniz parametrləri təyin edə bilərsiniz. Aşağıdakı ekran görüntüsündə göstərilənə bənzər bir şey almalısınız.

  • Addım 6. Bu gün İnternetdə kifayət qədər çox olan botlardan özünüzü qorumaq üçün etiketdən istifadə edərək başqa bir xətt yaradın . Parametrə görə " stil = "görüntü: heç biri" “Bu sahə adi insanlar tərəfindən görünməyəcək, lakin avtomatik olaraq botlar tərəfindən doldurulacaq. Beləliklə, siz həmişə canlı insanı proqramdan ayıra biləcəksiniz.

  • Addım 7. İşarələmənin son mərhələsi göndərmə düyməsinin yaradılması olacaq. Bunun üçün etiket istifadə olunur . Ekran görüntüsündə göstərildiyi kimi oxşar nəticə əldə etməlisiniz.

Cascading Style Sheets (CSS) ilə işləmək

  • İşarələmə zamanı artıq qeyd etdiyiniz kimi, çox əyri, gözə dəyməyən və iyrənc bir şeylə nəticələndik. Geribildirim formasına az-çox səliqəli görünüş, bir dil vermək üçün HTML kifayət etməyəcək. Bu məqsədlə üslublardan istifadə etməli olacaqsınız CSS.
  • Resursda əsas bacarıqlarınızı təkmilləşdirmək üçün məsləhət görmüsünüzsə htmlbook.ru, sonra istifadə edərək formanın bütün hissələri üçün müəyyən dizayn parametrlərini təyin edin CSS Sizin üçün çətin olmayacaq. Bütün bunlarla məşğul olmaq istəyiniz və ya vaxtınız yoxdursa, biz sizə hazır kod təqdim edəcəyik və onu necə birləşdirəcəyinizi sizə xəbər verəcəyik.

Üslubları birləşdirin CSS Kimə HTML iki şəkildə edilə bilər:

  • Kaskad cədvəllər faylımızdan kodu faylın ən aşağısına köçürün style.css, hansı saytın hostinqində mövcuddur
  • Stil faylımızı hostinqinizə köçürün və onu birləşdirin

Fayl style.css etiketin içərisində bağlanır skriptdən istifadə etməklə . Əgər üslubları olan fayl əsas html faylı ilə eyni qovluqda deyilsə, ona gedən yolu göstərməlisiniz. Stil faylımızda hər bir elementin təyinatı var. İstəyirsinizsə, yalnız əsas proqramlaşdırma bacarıqlarını rəhbər tutaraq parametrləri özünüz üçün dəyişə bilərsiniz.

PHP faylının qoşulması və qurulması

Daha əvvəl qeyd edildiyi kimi, skript PHP rəy formasının icrasına cavabdehdir. Ancaq dilin necə işlədiyini az və ya çox başa düşmək üçün PHP, böyük miqdarda ədəbiyyat oxumalı və məşq etmək üçün layiqli sayda saat sərf etməlisiniz. Buna görə də, olduğu kimi CSS, biz sizə PHP skripti ilə hazır fayl təqdim edəcəyik, onu yalnız forma ilə sənədə əlavə etmək lazımdır.

Fayldan fərqli olaraq style.css, PHP skripti olan fayl formanın özünün xüsusiyyətlərinə əlavə olunur. Sıra ilə başlayaq:

  • Addım 1. Daha əvvəl yazdığınız kodu açın və açıq forma etiketi olan xətti tapın. Ona xassələri əlavə edin " action="contact-form.php""Və" metod = "məlumat"" Ekran görüntüsündə nümunəyə baxın.

  • Addım 2. php faylımızı yükləyin və formanı olan html sənədinin yerləşdiyi eyni qovluğa hostinqinizə yerləşdirin. Beləliklə, php və html faylları bir-biri ilə qarşılıqlı əlaqədə olacaq.

  • Addım 3. Sonra, skripti özünüz üçün fərdiləşdirməlisiniz. Faylı açın və dəyişənləri təyin edin, onlara html skriptindəki kimi eyni adlar verin. Formaya əlavə sahələr əlavə etmisinizsə, onları tam olaraq ekran görüntüsündə göstərildiyi kimi php skriptinə əlavə edin.

  • Addım 4. Bundan sonra, e-poçt ünvanınız və poçt qutunuzda görünəcək məktubun mövzusu ilə daha iki dəyişən əlavə etməlisiniz. Dəyişən ilə sətirdə " $ünvan"E-poçtunuzu və sətirdə göstərin" $sub» ekran görüntüsündə göstərildiyi kimi e-poçt mövzusu.
  • Addım 5. Dəyişən ilə sətirdə " $mes» e-poçtla alacağınız məktubun formatını fərdiləşdirin. Siz onu dəyişmədən yenidən yaza və ya bəyəndiyiniz şəkildə redaktə edə bilərsiniz.

  • Addım 6. Bütün digər xətlər mesajın göndərilməsinə cavabdehdir və bot mühafizəsi parametrlərini ehtiva edir, ona görə də onlar dəyişməz qalmalıdır. Sonda tam kod aşağıdakı ekran görüntüsünə bənzəməlidir.

Bütün addımları tamamladıqdan sonra bu sadə, səliqəli rəy formasını alacaqsınız.

Müxtəlif məqsədlər üçün HTML və CSS-də gözəl dizayn rəy formalarının seçimi

  • Yuxarıdakı təlimatlara əsasən, siz öz zövqünüzə uyğun rəy formasını asanlıqla “çəkə” bilərsiniz. Ancaq sıfırdan özünüz forma yaratmaq üçün vaxtınız və ya istəyiniz yoxdursa, İnternetdə hazır dizayner formalarını tapa bilərsiniz və əsas bacarıqlara sahibsiniz. HTML ehtiyaclarınıza uyğun olaraq onları redaktə edin.

  • Bir az axtarışdan sonra sizin üçün bir seçim tapdıq 35 yazılmış gözəl pop-up dizayn rəy formaları HTMLCSS. Bu formalar kimi mühərriklər üçün uyğundur WordPressJoomla, idarəetmə panelindən sadə və asan quraşdırmaya malikdir və həmçinin mühərriki olmayan saytlar üçün mükəmməldir.

VİDEO: WordPress saytı üçün pop-up rəy forması