استفاده از Contact Form 7 برای جمع آوری ایمیل و موبایل
افزونه Contact Form 7 در وردپرس بر خلاف ظاهر سادهای که دارد، قابلیتهای فراوانی برای ایجاد فرمهای گوناگون دارد. البته استفاده از قابلیتهای آن نیازمند داشتن کمی مهارت در کدنویسی است. در این آموزش میخواهیم از افزونه Contact Form 7 برای جمعآوری ایمیل یا شماره موبایل به عنوان خبرنامه استفاده کنیم.
قدم اول: نصب افزونه فلامینگو
افزونه Contact Form 7 به تنهایی قابلیت ذخیرهسازی اطلاعات دریافت شده از کاربر را ندارد. برای اضافه شدن این قابلیت، لازم است تا افزونه Flamingo که توسط همین توسعهدهنده برنامهنویسی شده است را نیز نصب نمایید.
قدم دوم: ساخت فرم و انجام تنظیمات آن
در این مرحله یک فرم تماس ساده و تنها با یک فیلد متنی ایجاد میکنیم. این فیلد میتواند برای موبایل یا ایمیل باشد. ما فرم را به شکل زیر ایجاد کردیم:
|
1 2 |
[text* mobile] [submit "ثبت شود"] |
این فیلد متنی ساده برای دریافت شماره موبایل طراحی شده است. با اضافه کردن تنظیمات زیر میتوانیم طول آن را بین ۱۰ و ۱۱ حرف محدود کنیم و همچنین مقدار پیشفرضی به آن بدهیم و همچنین یک کلاس css برای نمایش صحیح اعداد به آن اضافه نماییم:
|
1 2 |
[text* mobile minlength:10 maxlength:11 class:ltr placeholder "09xxxx"] [submit "ثبت شود"] |
قدم سوم: انجام تنظیمات برای عدم ارسال ایمیل و ارتباط با فلامینگو
فرم تماس ما به صورت خودکار پس از پر شد فرم، آن را برایمان ایمیل میکند. با اضافه کردن مقدار زیر به بخش تنظیمات اضافی، از ارسال ایمیل جلوگیری میکنیم:
|
1 |
skip_mail: on |
افزونه فلامینگو به صورت پیشفرض نام فیلد ما که mobile است را نمیشناسد و نمیتواند روی آن پردازش لازم را انجام دهد. جهت بهبود ارتباط دو افزونه با هم تنظیمات اضافی زیر را هم به فرم میافزاییم:
|
1 2 3 |
flamingo_email: "--" flamingo_name: "--" flamingo_subject: "[mobile]" |
با اضافه کردن چهار خط تنظیمات گفته شده، فرم ما ایمیلی ارسال نمیکند و شماره موبایل دریافت شده از کاربر را به عنوان موضوع در افزونه فلامینگو نمایش میدهد.
باخبر شدن از ثبت فرم توسط جاوااسکریپت
افزونه Contact Form 7 این قابلیت را دارد که برخی رویدادها از جمله ارسال موفقیتآمیز فرم را به اطلاع شما برساند. برای مثال فرض کنیم هنگام ثبت شدن شماره موبایل بخواهیم کاربر را به صفحهای دیگر هدایت کنیم یا هر فعالیت دلخواه دیگر را انجام دهیم. انجام این کار با کدهایی مشابه کدهای زیر در جاوااسکریپت قابل انجام است:
|
1 2 3 |
$( '#form_parent .wpcf7' ).on( 'wpcf7mailsent', function( event ) { alert( 'فرم ارسال شد' ); } ); |
در کد بالا ابتدا با استفاده از یک Selector برای پیدا کردن فرمی که داخل عنصر شناسه «form_parent» قرار گرفته استفاده میکنیم و رویداد «wpcf7mailsent» آن را مانیتور میکنیم. هر زمان فرم با موفقیت ارسال شود، یک پیام هشدار به کاربر نشان داده خواهد شد.