ساخت فرم تماس با ما اسلایدی با jQuery

ساخت فرم تماس با ما اسلایدی با jQuery

در این آموزش, قصد داریم به شما نحوه ساخت فرم تماس با ما اسلایدی با jQuery را نشان بدیم.در اینجا, ما یک دکمه تماس با ما در بالای محتوای صفحه داریم. با کلیک روی این دکمه, فرم تماس با ما با افکت slide و توابع slideDown() و slideUp() نمایش داده می شوند. در آموزش jQuery قبلی, نحوه ساخت منوی اسلایدی را دیدیم.

زمانی که کاربر اطلاعات را تکمیل و دکمه submit را می زند, تابع ajax فراخوانی می شود. این تابع, درخواست را به فایل php به منظور ارسال فرم تماس با ما به ایمیل مشخص شده, فراخوانی می کند. بعد از اجرای اسکریپت ارسال ایمیل, کد PHP وضعیت ایمیل ارسال شده را برگشت می دهد. بعد از نمایش پاسخ (response) در مرورگر, فرم تماس با ما slideUp یا مخفی می شود.

من از تابع خود php برای ارسال ایمیل استفاده کردم که می توانید با آن را با ارسال ایمیل با gmail smtp جایگزین کنید.

کد HTML ساخت فرم تماس با ما اسلایدی

این کد HTML شامل یک لینک تماس با ما که برای اجرای تابع jQuery استفاده می شود, است. بعد از پر کردن فیلدهای فرم, دکمه سابمیت ورودی های فرم تماس با ما را اعتبارسنجی و با استفاده از ajax به فایل PHP ارسال می کند.

تابع Slide Down/Up جی کوئری

اسکریپت jQuery زیر برای فراخوانی توابع slideDown() و slideUp() به منظور نمایش فرم تماس باما, استفاده شده است. همچنین, کد مورد نظر برای ارسال درخواست به اسکریپت ارسال ایمیل با php به هنگام سابمیت فرم را مشخص کردیم. با سابیمت شدن فرم, اسکریپت php ما به درخواست ajax پاسخ می دهد. این پاسخ برای نمایش پیام به کاربر استفاده شده است. بعد از نمایش پیام, فرم تماس با ما بصورت اسلایدی مخفی می شود.

خروجی : ساخت فرم تماس با ما اسلایدی با jQuery

اسکرین شات زیر به شما خورحی فرم تماس با ما به هنگام نمایش با کلیک روی دکمه Contact Me را نشان می دهد.

ساخت فرم تماس با ما اسلایدی با jQuery

امیدوارم از آموزش ساخت فرم تماس با ما اسلایدی با jQuery نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی

    دانلود رایگان کتاب آموزش PHP

    صفر تا صد PHP و MySQL را یکجا یاد بگیرید
    همین الان دانلود کن
    نگران نباشید. ایمیل‌های مزاحم نمی‌فرستیم
    close-link