سلام به خوانندگان عزیز، امروز می خواهم در مورد نحوه ایجاد فرم هایی برای به دست آوردن اطلاعات تماس کاربر به شما بگویم.
امروزه، بخشی از ساختار صفحه فرود است. از این گذشته ، این یکی از راه های پذیرش سفارش یا ارسال کاتالوگ از محصولات شما است که قبلاً ایمیل بازدید کننده را دریافت کرده اید.
ایجاد فرم بازخورد - نشانه گذاری htmlمن معمولا به سه فیلد نیاز دارم و در بیشتر موارد از این نشانه گذاری برای ایجاد یک فرم تماس استفاده می کنم:
قیمت بگیرید
سعی کنید این کد را در مرورگر خود باز کنید و ببینید چه چیزی دریافت می کنید، بسته به مرورگر اینترنتی که استفاده می کنید، باید چیزی شبیه به این باشد:
اگر در مورد نشانه گذاری سؤالی دارید، در نظرات بپرسید، سعی می کنم با جزئیات پاسخ دهم و هر عنصر را در مقاله شرح نمی دهم تا اندازه آن افزایش نیابد. علاوه بر این، عناصر بسیار ساده هستند.
بیایید فرم خود را سبک کنیم و آن را خوانا کنیم:
/* سبک های فرم */ #application ( عرض: 475 پیکسل؛ حاشیه: 0 خودکار؛ ) /* سبک های فیلد ورودی */ #applicationName, #applicationEmail, #applicationTelephone ( عرض: 100%؛ ارتفاع: 73 پیکسل؛ پس زمینه: هیچ؛ حاشیه - بالا: 25 پیکسل؛ حاشیه: 1 پیکسل جامد #fff؛ شعاع حاشیه: 40 پیکسل؛ تراز متن: مرکز؛ رنگ: #fff؛ اندازه قلم: 24 پیکسل؛ ) /*سبک فیلدها هنگام کلیک کردن روی آنها*/ #applicationName:focus , #applicationEmail:focus, #applicationTelephone:focus ( حاشیه: 1px solid #30ad64; ) /*سبک های متن نمایش داده شده در محل مکان*/ ::-webkit-input-placeholder ( رنگ: #efefef; font-family: "PT Sans ", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) ::-moz-placeholder ( رنگ: #fff; font-family: "PT Sans", sans-serif ؛ text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 19+ */ :-moz-placeholder ( رنگ: #fff; font-family: "PT Sans", sans- serif؛ text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 18- */ :-ms-input-placeholder ( رنگ: #fff؛ font-family: "PT Sans" , sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) ::placeholder ( رنگ: #fff؛ متن-سایه: 0 1px 1px rgba(0, 0, 0, .3); ) /*سبک های دکمه*/ .applicationButton ( حاشیه بالا: 25 پیکسل؛ پس زمینه: #30ad64 ; حاشیه: هیچکدام؛ عرض: 100٪؛ ارتفاع: 73 پیکسل؛ شعاع حاشیه: 40 پیکسل؛ رنگ: #fff؛ اندازه قلم: 24 پیکسل؛ تبدیل متن: بزرگ؛ خانواده فونت: "PT Sans"، sans-serif؛ مکاننما : اشاره گر؛ ) .applicationButton:hover ( پس زمینه: #d68c18; )
اگر می خواهید رنگ دکمه به آرامی تغییر کند، خط زیر را به .applicationButton و .applicationButton:hover اضافه کنید:
انتقال: 0.6s;
Where.6s زمان انیمیشن بر حسب میلی ثانیه است.
اکنون فرم ما ظاهر زیبایی پیدا کرده است ، اکنون اینگونه به نظر می رسد:
حال باید فایل application.php را ایجاد کنیم. پارامترهای وارد شده را از فرم دریافت کرده و از طریق ایمیل برای ما ارسال می کند.
ساختار آن مانند یک فایل html معمولی است؛ می تواند صفحه ای باشد که در آن بنویسید «متشکرم، درخواست شما پذیرفته شد. پس از پردازش درخواست، مدیران ما با شما تماس خواهند گرفت"
یعنی وقتی کاربر روی دکمه کلیک می کند به صفحه application.php هدایت می شود. این یک صفحه کامل است و باید به آن استایل دهید.