فرم بازخورد قابل تنظیم: چگونه می توان بصورت آنلاین ایجاد کرد؟ چگونه می توان یک فرم بازخورد پاپ زیبا HTML و PHP را با یک تلفن و ارسال سفارش توسط E -Mail ساخت؟
دستورالعمل ایجاد فرم بازخورد در HTML و CSS و همچنین مجموعه ای از فرم های آماده ساخته شده و راهنمای اتصال و پیکربندی آنها.
جهت یابی
امروز ، هر شخصی که حتی مهارت برنامه نویسی هم نداشته باشد می تواند با بارگیری یک الگوی آماده از شبکه و نصب آن بر روی موتور مورد استفاده ، به راحتی سایت خود را ایجاد کند.
با این حال ، هر الگوی آماده شده قادر به برآورده کردن نیازهای کاربر نیست. بسیاری از آنها به شکل "پنیر" نشان داده شده اند و بخش ها و کارکردهای مهمی ندارند ، به عنوان مثال ، یک فرم بازخورد.
این بلوک سایت برای صاحبان فروشگاه های آنلاین و درگاه های اطلاعات بزرگ بسیار مهم است. در مقاله ما اطلاعاتی در مورد چگونگی ایجاد یک فرم بازخورد به طور مستقل ، از کجا می توانید یک الگوی تمام شده و نحوه نصب آن را در وب سایت خود پیدا کنید.
فرم بازخورد چیست و چرا اینقدر ضروری است؟
- یکی از مهمترین کارکردهای هر سایت مناسب ، فرم بازخورد است. این برای تعامل بین بازدید کننده و مدیریت منابع است. بنابراین با کمک آن می توانید درخواست پشتیبانی فنی را بنویسید یا داده های لازم را به دولت ها ارسال کنید. به عنوان مثال ، جزئیات پرداخت در فروشگاه های آنلاین یا نام کالاهای سفارش داده شده. اکیداً توصیه می شود چنین فرمی در پورتال خود داشته باشید ، زیرا تماس مداوم با بازدید کنندگان و مشتریان آن کلید پیشرفت موفقیت آمیز آن است.
فرم بازخورد یک صفحه یا بلوک جداگانه (بخش) است که شامل چندین قسمت از ورودی متن و دکمه "ارسال" است. به عنوان یک قاعده ، فرم استاندارد زمینه های زیر را دارد:
- نام و نام خانوادگی
- ایمیل (آدرس ایمیل)
- شماره موبایل
- آدرس های سایت شما
- زمینه برای وارد کردن پیام متنی
با این حال ، زمینه ها می توانند به اندازه دوست خود باشند و آنها را می توانید به عنوان دوست دارید. همه اینها به نیازها و تخیل شما بستگی دارد.
- علاوه بر این ، برخی از دارندگان کارت های Google یا Yandex را به فرم بازخورد ، فرم های ورود به سایت با استفاده از شبکه های اجتماعی "Vkontakte" ، "Facebook" ، "Google+" و غیره اضافه می کنند. اما ما در مورد ایجاد ساده ترین شکل بازخورد صحبت خواهیم کرد ، که برای آن شما به طور انحصاری به دانش اصول زبان مارک نیاز خواهید داشت HTML و نه چیزی بیشتر.
چگونه می توان ساده ترین فرم بازخورد را برای سایت در HTML و PHP ایجاد کرد؟
برای اینکه مقاله را به یک کتاب درسی کامل و خسته کننده تبدیل نکنیم ، ما از این واقعیت که شما قبلاً با اصول زبان مارک آشنا هستید ، ادامه خواهیم داد HTML و شما یک ایده کلی در مورد نحوه عملکرد آن دارید. اگر چنین مهارتهایی ندارید ، قبل از ایجاد فرم ، توصیه می شود که دانش خود را کمی روی یک منبع رایگان محکم کنید htmlbook.ruواد در غیر این صورت ، شما نه تنها می توانید این سرمایه گذاری را رها کنید بلکه کد سایت خود را خراب کنید.
برای بازآفرینی شکل بازخورد ، به سه عنصر مهم نیاز دارید که یکی از آنها مسئول علامت گذاری و ساختار فرم است ( HTML) ، دوم برای طراحی خارجی آن ( CSS) ، و سوم برای پردازش و انتقال داده ها ( PHP). بیایید به ترتیب شروع کنیم:
نوشتن کد HTML برای بازخورد
- مرحله 1واد به منظور نشان دادن فرم در HTML از برچسب استفاده می شود ‹فرم› ‹/فرم›واد در داخل آن اندازه ها ، سبک ها و سایر خصوصیات حیاتی فرم تنظیم خواهد شد. هنگام ضبط خود برچسب ، او باید یک کلاس را تنظیم کند تا نشان دهد ، که این امر به نصب بیشتر برای فرم کمک می کند CSS سبک ها
- گام 2واد در ادامه برای ایجاد اولین قسمت از فرم ما در داخل برچسب \u003cفرم\u003e شما باید برچسب بلوک بنویسید \u003cپ\u003eکه مسئول ایجاد یک خط جدید است.
- مرحله 3واد برچسب داخلی \u003cپ\u003e از خط جدید برچسب زیر را وارد می کنیم: ‹برچسب برای \u003d" نام "›نام \u003c/برچسب\u003eواد وی مسئول نام زمینه آینده فرم است.
- مرحله 4واد در خط جدید ، همه چیز در یک برچسب است \u003cپ\u003e ما برچسب ایجاد یک فیلد با مقادیر زیر را تجویز می کنیم: ‹ورودی نوع \u003d" متن "name \u003d" name "placeholder \u003d"اسمت را وارد کن "ضروری \\\u003eواد پارامتر " نوع \u003d "متن"" نوع متن متن و پارامتر را تنظیم می کند " مکان یابی \u003d "اسمت را وارد کن «» متن اولیه را در این قسمت متن تنظیم می کند. پارامتر " ضروری»برای بازدید کننده سایت روشن می کند که این زمینه برای پر کردن اجباری است. در نتیجه ، همانطور که در تصویر زیر نشان داده شده است ، باید با یک قسمت فرم دریافت کنید.
- مرحله 5واد در مثال بالا ، قسمتهای باقیمانده مورد نیاز خود را اضافه کنید ، هر بار که از برچسب شروع می شود \u003cپ\u003eواد برای نصب فیلد با پیام متنی ، از برچسب استفاده کنید name textarea name \u003d "پیام" cols \u003d "50 ″ ردیف \u003d" 6 ″ مورد نیاز ›‹/textarea ›واد گزینه ها " کلبه"و" ردیف»مسئول عرض و ارتفاع قسمت متن هستند. می توانید پارامترهایی را که دوست دارید بیشتر تنظیم کنید. شما باید چیزی شبیه به آنچه در تصویر زیر نشان داده شده است دریافت کنید.
- مرحله 6واد برای محافظت از خود در برابر رباتها ، که امروزه در اینترنت بسیار زیاد است ، خط دیگری با برچسب ایجاد کنید name name name \u003d "bezspama" type \u003d "text" style \u003d "display: no" مقدار \u003d "" /›واد با توجه به پارامتر " style \u003d "نمایش: هیچ یک"»این زمینه توسط فانی های صرف قابل مشاهده نخواهد بود ، اما رباتها به طور خودکار پر می شوند. بنابراین ، شما همیشه می توانید یک فرد زنده را از برنامه متمایز کنید.
- مرحله 7واد مرحله آخر مارک ایجاد دکمه ارسال خواهد بود. از برچسب برای این استفاده می شود \u003cدکمه\u003eواد یک بلوک جدید ایجاد کنید \u003cپ\u003e و در داخل آن ، کد دکمه را با پارامترهای زیر وارد کنید: ‹دکمه کلاس \u003d" ارسال "نوع \u003d" ارسال "›ارسال یک پیام \u003c/دکمه\u003eواد همانطور که در تصویر نشان داده شده است ، نتیجه مشابهی باید به نتیجه برسد.
کار با سبک های آبشار (CSS)
- همانطور که قبلاً در روند علامت گذاری متوجه شده اید ، ما چیزی بسیار کج ، بدون نسخه و منزجر کننده معلوم شد. به منظور ارائه فرم بازخورد ظاهری کم و بیش مرتب ، یک زبان HTML این کافی نخواهد بود برای این منظور ، شما باید به استفاده از سبک ها متوسل شوید CSS.
- در صورتی که از مشاوره برای محکم کردن مهارت های اساسی خود در منبع استفاده کرده اید htmlbook.ru، سپس پارامترهای طراحی خاصی را برای تمام قسمت های فرم با استفاده از آن تنظیم کنید CSS برای شما دشوار نخواهد بود. اگر تمایل یا وقت برای آشفتگی با همه اینها ندارید ، ما یک کد آماده را برای شما فراهم می کنیم و به شما می گوییم چگونه آن را وصل کنید.
سبک ها را وصل کنید CSS به HTML شما می توانید دو روش:
- کد را از جدول آبشار ما در پایین پرونده کپی کنید style.cssکه در میزبانی سایت وجود دارد
- پرونده سبک های ما را به میزبانی خود منتقل کرده و آن را وصل کنید
فایل style.css داخل برچسب متصل می شود ‹سر› ‹/سر› با استفاده از یک اسکریپت ‹پیوند rel \u003d" StyleSheet "Media \u003d" صفحه "HREF \u003d" style.css "›واد در صورتی که پرونده ای با سبک ها در همان پوشه مانند پرونده اصلی HTML قرار نداشته باشد ، پس باید مسیر آن را مشخص کنید. در پرونده ما با سبک ها ، هر عنصر دارای یک نام است. در صورت تمایل ، می توانید پارامترها را برای خودتان تغییر دهید ، که فقط با مهارت های اصلی برنامه نویسی هدایت می شود.
اتصال پرونده PHP و تنظیم آن
همانطور که قبلاً ذکر شد ، فیلمنامه PHP مسئول اجرای فرم بازخورد است. با این حال ، برای درک کم و بیش اصل کار زبان PHP، شما باید حجم زیادی از ادبیات را بخوانید و تعداد ساعات مناسبی را برای تمرین سپری کنید. بنابراین ، مانند مورد CSS، ما یک پرونده آماده با اسکریپت PHP را در اختیار شما قرار می دهیم که فقط باید با فرم به سند وصل شود.
برخلاف پرونده style.css، پرونده ای با اسکریپت PHP در خصوصیات خود فرم وصل شده است. بیایید به ترتیب شروع کنیم:
- مرحله 1واد کد قبلاً نوشته شده را باز کرده و یک خط با یک برچسب فرم باز پیدا کنید. خواص را به آن اضافه کنید " action \u003d "contact-form.php""و" روش \u003d "ارسال"" مثالی را در تصویر مشاهده کنید.
- گام 2واد پرونده PHP ما را بارگیری کرده و آن را در همان پوشه ای که سند HTML در آن قرار دارد ، روی میزبان قرار دهید. بنابراین ، پرونده های PHP و HTML با یکدیگر تعامل خواهند داشت.
- مرحله 3واد در مرحله بعد ، شما باید اسکریپت را برای خودتان پیکربندی کنید. فایل را باز کرده و متغیرها را تنظیم کنید ، به آنها همان نام هایی را در اسکریپت HTML اختصاص دهید. اگر زمینه های اضافی را به فرم اضافه کردید ، آنها را دقیقاً همانطور که در تصویر نشان داده شده است ، در اسکریپت PHP اضافه کنید.
- مرحله 4واد در مرحله بعد ، شما باید دو متغیر دیگر را با آدرس ایمیل خود و موضوع نامه ای که در جعبه شما نمایش داده می شود ، اضافه کنید. در یک خط با یک متغیر " $ آدرس"نامه الکترونیکی و در خط" را نشان دهید $ sub»موضوع نامه در تصویر نشان داده شده است.
- مرحله 5واد در یک خط با یک متغیر " $ ms»قالب نامه ای که از طریق نامه دریافت خواهید کرد پیکربندی شده است. می توانید آن را بدون تغییر بازنویسی کنید یا سلیقه خود را ویرایش کنید.
- مرحله 6واد تمام خطوط دیگر وظیفه ارسال پیام را بر عهده دارند و شامل تنظیمات محافظت در برابر ربات ها هستند ، بنابراین باید بدون تغییر باقی بمانند. در نتیجه ، کد کامل باید چیزی شبیه به آنچه در تصویر زیر نشان داده شده است ، باشد.
برای بازخورد پرونده های CSS و PHP را بارگیری کنید
پس از انجام تمام اقدامات در خروجی ، چنین فرم بازخورد ساده و مرتب را دریافت خواهید کرد
مجموعه ای از فرم های طراحی زیبا از بازخورد در HTML و CSS برای اهداف مختلف
- بر اساس دستورالعمل های فوق ، می توانید به راحتی فرم بازخورد را به سلیقه خود بکشید. با این حال ، اگر وقت و یا تمایل به ایجاد فرم از خراش خود ندارید ، می توانید فرم های طراحی آماده را در اینترنت پیدا کنید و مهارت های اساسی داشته باشید HTML آنها را برای خودتان ویرایش کنید.
- با کمی جستجو ، ما انتخابی را برای شما پیدا کردیم 35 فرم های زیبا و بازخورد طراحی پاپ ، که روی آنها نوشته شده است HTML وت CSSواد این اشکال برای موتورهایی مانند اری وت جوملاآنها از کنترل پنل یک تنظیمات ساده و سبک دارند و همچنین برای سایت های بدون موتور مناسب هستند.
مجموعه ای از فرم های بازخورد طراح را برای سایت ها بارگیری کنید
سلام. پس از کلیک بر روی دکمه ارسال ، چنین پیامی.
هشدار: نمی توان اطلاعات مربوط به عنوان را تغییر داد-رهبران alread ارسال شده توسط (خروجی شروع شده در /home/u345/domains/1kontakt.ru/public_html/contact-form.php:1) در/home/u35/u35/u35/u35/u35/u35/u35/u35/u35/ U35/u35/u35/u35/u35/u35/u35/u35/u35/u35/u34 ru/public_html/تماس با فرم/تماس-فرم.PHP در خط 30
نامه ارسال می شود ، پس از 5 ثانیه به صفحه XXX باز خواهید گشت
نامه نمی آید.
و تغییر مسیر به صفحه نیز رخ نمی دهد.
بله ، فرم بسیار جالب است ، اما من دانش کافی برای درک همه این کد ندارم. تاکنون خدمتی برای تولید فرم های FormDesigner پیدا کرده ام. در عرض چند دقیقه شکل مشابهی ساختم. من به همه کسانی که در برنامه نویسی این سرویس متحمل شده اند توصیه می کنم!