فرم تماس آژاکسی

دسته‌ها : فرم ها علی میرزائی 42 دیدگاه‌ها

فرم تماس آژاکسی

استفاده از یک فرم تماس زیبا و قدرتمند برای سایتهایی که ارتباطی پیوسته با کابران خود دارند همیشه از اهمیت خاصی بر خوردار است.
در وردپرس بی نهایت افزونه (همچون contact form 7) برای راه اندازی یک فرم تماس وجود دارد، اما عموما استفاده از این افزونه ها به دلیل برخورداری از اسکریپت های متعدد، می تواند در سرعت و بهینگی سایت تأثیر منفی داشته باشد.
با این مقدمه، اسکریپت امروز را به یک فرم تماس ساده و مستقل اختصاص دادیم که با استفاده از آن دیگر نیاز به هیچ پلاگینی ندارید و با حذف حجمی از اسکریپت ها از قالب اصلی خود، سرعت بارگذاری سایت را افزایش می دهید.
این فرم با کدنویسی html5، css3 و بهره گیری از قابلیت Ajax دارای انعطافی بالا و حجمی کم است و می تواند همه ی نیاز شما را از یک فرم تماس جذاب و قدرتمند برآورده سازد.

جهت استفاده از این اسکریپت، کافی است تا فایل پیوست شده را در هاست خود آپلود نموده و در فایل contact (داخل پوشه ی assets) ایمیل خود را رو به روی دستور emailTo وارد کنید.

دیدگاه کاربران در مورد این نوشته

  1. سلام و درود
    زکات علم آموزش آن به دیگران است.
    واقعا خسته نباشید، کارتون عالیه! جامعه مجازی ما فارسی زبان ها به امثال شما نیاز داره.
    موفق و موید باشید.

    توسط حسین دولت آبادی پاسخ

    1. سلام آقای دولت آبادی،
      از لطف و نظر گرمتون خیلی خیلی ممنونم. (واقعا هرچی خستگی بود رو از تنمون خارج کردید)
      ایشالا که همیشه موفق و پیروز باشید…

      توسط علی میرزائی پاسخ

  2. سلام من هر کاری کردم نتونستم این افزونه رو نصب کنم حتی از توی سیپنل هم اقدام کردم اما نشد
    میشه راهنمایی کنید لطفا

    توسط محمد پاسخ

    1. سلام آقا محمد، در توضیحات نوشته هم اشاره شد که این یه بسته ی اسکریپتیه و با افزونه وردپرس تفاوت داره. برای استفاده از این بسته، میتونید فایل اصلی رو در پوشه public_html بارگذاری کنید و سپس به نام اون فایل لینک بدید. مثلا:
      www.example.com/contact-file

      توسط علی میرزائی پاسخ

  3. علی آقا
    کد هدر متحرک تون رو هم می تونین بدین؟
    یا حداقل نمونه مشابه

    توسط Guney پاسخ

    1. برای این کار، میتونید از اسکریپت Spritely استفاده کنید:
      http://tiny.alimir.ir/HT

      توسط علی میرزائی پاسخ

  4. ممنون آقا علی :)

    توسط Guney پاسخ

  5. سلام
    علی آقا یه سوال مهمی داشتم
    الان وقتی داخل کادرهای نظر خواهی سایتت کلیک میکنیم حاشیه کادر رنگ آبی میشه
    می خواستم ببینم چطوری میتونم این قابلیت را به کادر خودم بیفزایم
    خواهش می کنم آقای میرزائی جواب بدین خیلی بخدا برام مهمه
    منتظر لطف شما هستم :)

    توسط Guney پاسخ

    1. سلام،
      با استفاده از سلکتور focus (در css)، میتونید در فیلدهاتون، این نوع از استایل رو ایجاد کنید.
      یه نمونه مشابه رو تو لینک زیر براتون آماده کردم:
      http://jsfiddle.net/9a7ef

      توسط علی میرزائی پاسخ

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

    ممنونم

    توسط محمد پاسخ

    1. خواهش میکنم، باعث خوشحالیه که از این اسکریپت خوشتون اومده {گل}

      توسط علی میرزائی پاسخ

  7. سلام و سپاس!
    تو همه مرورگرها کار میکنه?؟! (خصوصا IE6!)؟
    اگر کار کنه که عالیه..

    توسط سجاد پاسخ

    1. سلام سجاد عزیز،
      بله، صد در صد 😉
      در IE8 به خوبی کار میکنه، اما در IE6 تست نکردم!
      میتونید خودتون دمو رو به صورت آنلاین در IE6، آزمایش کنید.

      توسط علی میرزائی پاسخ

  8. ممنون از مطالب خوب و آموزنده ات / ادم حیفش میاد استفاده کنه و تشکر نکنه ….

    توسط من! پاسخ

    1. ممنونم، لطف داری عزیز :)

      توسط علی میرزائی پاسخ

  9. آقا جدا خسته نباشی
    اگه چند نفر دیگه مثل شما تو جامعه اینترنت داشتیم دیگه غم نداشتیم
    اسکریپتت خیلی مفید واقع شد و بکارم اومد
    مرسی
    موفق باشی

    توسط سجاد وثوق پاسخ

    1. ممنونم، لطف دارید.
      ایشالا که لیاقت تعریفتون رو داشته باشیم و بتونیم بیش از پیش به وب پارسی خدمت کنیم.
      پیروز و پاینده باشید…

      توسط علی میرزائی پاسخ

  10. سلام.
    arize.ir
    خیلی ممنون. دست شما درد نکنه.

    توسط محمود پاسخ

  11. با تشکر از اسکریپت خودتون
    یه سوال داشتم من میخوام این فرم رو درون صفحه سایتم بیارم مثل کاری که contact form 7 انجام میده
    لطفاً راهنمایی کنید؟

    توسط سجاد پاسخ

    1. سلام،
      برای این کار باید از قابلیت “قالب برگه ها” استفاده کنید و کدهای اسکریپت رو به فایل تعریف شده انتقال و ویرایش های لازم رو اعمال کنید.
      در مورد قالب برگه ها هم آموزش های زیادی در سطح وب موجوده، اگه عمری بود حتما در آینده ای نزدیک آموزش ساخت یک فرم تماس برگه ای رو منتشر میکنیم.

      توسط علی میرزائی پاسخ

  12. سلام
    من از این فرم استفاده کردم فقط ییک مشکل دارم:

    من ایمیل هامو با برنامه gmail notifier pro چک میکنم و تو این برنامه نوشته های فارسی رو خراب نشان می دهد ( اینجوری ط§غŒظ† غŒع© طھط³طھ ط§ط³طھ ) ولی وقتی با مرورگر چک میکنم درسته!!
    این مشکل از چیه؟

    توسط Majid پاسخ

    1. سلام،
      احتمالا اون برنامه از utf-8 پشتیبانی نمیکنه، به همین خاطر رشته های فارسی به اون صورت نشون داده میشن.

      توسط علی میرزائی پاسخ

      1. همه ایمیل ها رو درست نشون میده حتی نظراتی که تو سایتم میدن با این برنامه چک میکنم و درست نشون میده فقط این فرم تماس مشکل داره

        توسط Majid پاسخ

        1. متأسفانه با این نرم افزار آشنایی ندارم، ولی خوب اگه مشکلی در اسکریپت بود حتما در مرورگرها هم این مسأله ایجاد میشد…

          توسط علی میرزائی پاسخ

  13. سلام.اول از همه ممنون از شما و سایت خوبتون.
    دو این که با این که میدونم این جا جاش نیست ولی مخواستم بدونم جچوری برای پس زمینه برای سایتم درست کنم.هر چی درست میکنم موقع ریپیت شدن حاشیه هاش معلوم میشه.
    پیشاپیش از زحماتتون ممنون

    توسط رضا پاسخ

    1. سلام،
      لطفا سؤالتون رو در سامانه پرسش و پاسخ سایت مطرح کنید.

      توسط علی میرزائی پاسخ

  14. خیلی عالیه .
    شما فرم ثبت نام به صورته ایجکس برای ویبولتین هم دارید.

    توسط فروشگاه برنامه نویس پاسخ

    1. متأسفانه تو این سیستم کار نکردم.
      ولی مطمئنا وجود داره، باید سرچ کنید :)

      توسط علی میرزائی پاسخ

  15. سلام
    این کدهاروبزارم تو style??
    چطور فراخوانیش کنم؟؟
    html یا css ؟؟؟

    توسط امیر پاسخ

    1. سلام،
      محتوای آی دی social-sidebar رو در ایندکس یا فوتر قرار بده.
      برای استایل دهی هم فقط از سلکتورهای social-sidebar باید استفاده کنی. (البته برای نمایش اون آیکون ها خط مربوط به @import هم باید منتقل بشه).

      توسط علی میرزائی پاسخ

  16. درسته
    آفرین
    اما این کدا رو من چیکار کنم؟؟؟
    هنگ کردم 😀

    توسط امیر پاسخ

  17. سلام علی جان
    شاهکاره
    دمت گرم
    میخوام گوشه صفحم اما هماهنگ با اسکرول یه کوچولو بنویسم تماس با ما,بعدکه روش کلیک میکنن,این رو همون صفحه بیاره,مثل فرم ثبت نام که گذاشتی تو همون صفحه انجام میده
    کمکم میکنی؟؟؟

    توسط امیر پاسخ

    1. سلام،
      ممنونم امیر عزیز.
      اگه درست متوجه شده باشم تو میخوای گوشه ی سایتت باکسی رو با عنوان “تماس با ما” به صورت فیکس داشته باشی که با کلیک بر روی اون کابرات رو به صفحه ی فرم تماس انتقال بدی! درسته؟
      نمونه:
      http://cssdeck.com/labs/we0ne481

      توسط علی میرزائی پاسخ

  18. بسیار عالی بود مرسی

    توسط وحید پاسخ

    1. قابلی نداشت دوست عزیز :)

      توسط علی میرزائی پاسخ

  19. سلام
    تو کدوم پوشه آپ کنم؟؟؟
    توی پ.شه اصلی هاست گذاشتم اما چیزی نشد!
    چجوری بزارمش تو برگه های سایتم؟؟؟

    توسط احسان پاسخ

    1. سلام،
      1- تو هر پوشه ای میتونید ازش استفاده کنید، تنها نکته آدرس (لینک) که با توجه به محل قرارگیری فایل ایندکس مشخص میشه. ( یه راه خوب هم اینه که یک زیر دامنه بسازید و در پوشه ی ایجاد شده، فایل های اسکریپت رو بارگذاری کنید.)
      2- برای استفاده در برگه ها باید از خاصیت “قالب برگه ها” استفاده کنید و تمامی کدها و فایل های مربوط به اسکریپت رو به قالب انتقال بدید. (برای این کار باید یه مقدار با کدنویسی و عناصر html آشنایی داشته باشید.)

      توسط علی میرزائی پاسخ

  20. بازم که شاهکار کردی علی جون؟!!!
    خسته نباشید.
    عالی بود

    توسط Mohammad پاسخ

دیدگاه خود را بیان کنید