كيفية التعامل مع النماذج الثابتة - طريقة جانب العميل

النماذج هي عناصر تفاعلية تستخدم للحصول على مدخلات من المستخدم لمزيد من المعالجة. في معظم الأوقات ، تُستخدم النماذج فقط لتلقي المدخلات التي لا تتطلب معالجة بل مجرد تلقي البيانات ، وقد يكون هذا نموذج اتصال ، أو RSVP ، أو الحصول على عرض أسعار ، إلخ.

تقليديًا ، تتم إدارة النماذج بمساعدة خادم (يُعرف أيضًا باسم جانب الخادم) ، ولكن هذا يكون أكثر فاعلية عند معالجة البيانات من النموذج ، ربما نموذج تسجيل مستخدم حيث يتم التحقق من صحة بيانات النموذج ومصادقتها وحفظها في قاعدة بيانات.

عندما تقوم بإنشاء نموذج بسيط حيث تتلقى البيانات فقط من المستخدم ولا تقوم بمعالجتها (أي نموذج الاتصال) ، فإن الهدف هو الحصول على البيانات من النموذج وإرسالها إلى البريد الإلكتروني لدعم شركتك (على سبيل المثال info @ ... ، support @…)

استخدام الخادم هنا ليس مثاليًا وهو مجرد مبالغة ، والطريقة الشائعة جدًا للقيام بذلك هي عبر PHPMailer (مكتبة إرسال البريد الإلكتروني الكلاسيكية لـ PHP). يستخدم PHPMailer مع PHP ويتطلب الكثير من تكوينات الخادم المملة. ماذا لو كنت تقوم ببناء موقع ثابت؟ يجب أن تكون هناك طريقة أسهل للقيام بهذا الجانب العميل بشكل صحيح؟

في هذه المقالة ، سأقدم لك طريقتين للتعامل مع جانب عميل بيانات النموذج في المواقع الثابتة. هناك طرق أخرى ولكني استخدمت هاتين الطريقتين واعتبرتهما الأفضل والأسهل (بدون مشاعر قاسية :)).

لا تكوينات محمومة ، ولا خوادم ، ولا أشياء جادة ، فقط قم ببناء النموذج الخاص بك ، وقم ببعض التعديلات الصغيرة ، ويقوم المستخدم بإرساله ويتجه مباشرة إلى بريدك الإلكتروني المخصص. :)

استمارة البداية

لغرض هذه المقالة ، قمت بإنشاء نموذج أساسي باستخدام HTML5 و Bootstrap 4 ، يمكنك تفرعها من Codepen أدناه.

حاليًا ، لا يستخدم هذا النموذج أيًا من الطرق التي سنتحدث عنها ، في نهاية المقالة ، سأقدم codeلك كلتا الطريقتين بالكامل ، ثم يمكنك تحديث النموذج والاختبار. لقد أضفت القليل من التحقق ، لا تقلق بشأن ذلك

الآن ، لنبدأ !!

الطريقة الأولى

يوفر Formspree نماذج HTML وظيفية عبر نظامهم الأساسي بدون PHP أو JavaScript. أرسل النموذج الخاص بك إلى عنوان URL الخاص بهم وسيتم إعادة توجيهه إلى بريدك الإلكتروني. لا حاجة إلى PHP أو Javascript أو التسجيل - مثالي للمواقع الثابتة!

انتظر انتظر انتظر!!! إنه مفتوح المصدر أيضًا

استمارة التعامل مع FORMSPREE

  • قم ببناء النموذج الخاص بك ، لقد فعلنا ذلك بالفعل

(اتبع الخطوة التالية وقم بتحديث هذا النموذج لاستخدام هذه الطريقة)

الآن دعنا ننتقل إلى الأشياء الجديدة المضافة أعلاه.

  • قمنا بتغيير سمة //formspree.io/[email protected]الإجراء الخاصة بالنموذج إلى [استبدل [email protected] بالبريد الإلكتروني الخاص بك.] وهذا ببساطة يرسل بيانات النموذج إلى formspree ثم إلى بريدك الإلكتروني. تعمل Formspree كطرف ثالث هنا.
  • لقد أضفت بعض سمات الاسم إلى حقول الإدخال. هذا هو فقط تكوين كل حقل حتى نتمكن من الحصول على البيانات وإرسالها إلى formspree.

- بالنسبة إلى عنوان البريد الإلكتروني ، أضفت سمة _replyto (هذا يعني فقط أنك ستتمكن من الرد بسرعة على المستخدم الذي أرسل في الأصل عبر البريد الإلكتروني)

- لقد أضفت سمة _subject . تُستخدم هذه القيمة لموضوع البريد الإلكتروني بحيث يمكنك الرد بسرعة على عمليات الإرسال دون الحاجة إلى تحرير سطر الموضوع في كل مرة.

- لقد أضفت سمة _next . بشكل افتراضي ، بعد إرسال النموذج ، يظهر للمستخدم صفحة Formspree "شكرًا لك". يمكنك تقديم عنوان URL بديل لتلك الصفحة مثل:

  • أضفنا سمة قيمة إلى زر الإرسال [ value = ”Send” ]

هذا هو ثانوس الخاص بنا ، بنقرة واحدة على هذا الزر ويتم مسح النموذج الخاص بك وإرسال بياناته إلى بريدك الإلكتروني.

هذا كل شيء لاستخدام formspree :) بالرغم من وجود إعدادات تكوين أخرى للعديد من الميزات الأخرى ، يمكنك التحقق هنا.

أشياء يجب ملاحظتها!

  • لست بحاجة إلى التسجيل لاستخدام formspree ، فقط أضف سمة الإجراء الخاصة بك وأنت على ما يرام. يمكنك التسجيل فقط إذا كنت تريد خطة مدفوعة.
  • تأكد من أن النموذج الخاص بك لديه method=”POST”السمة
  • يستخدم Formspree reCAPTCHA لتحديد عمليات إرسال البريد العشوائي. بعد أن ينقر المستخدم على Thanos الخاص بنا ، سيتعين عليه إجراء بعض التحقق من CAPTCHA. طريقة رائعة لوقف عمليات إرسال البريد العشوائي.
  • بعد ذلك ، يتم إرسال النموذج إلى بريدك الإلكتروني المحدد ويتم عرض صفحة النجاح المخصصة!
  • لا يقرأ Formspree بيانات النموذج الخاص بك ، وليس لديهم إمكانية الوصول إليها ، إنها مجرد خدمة توصيل ، فأنت ترسل طردك مختومًا إليهم ، ويقومون بتسليمه إلى عميلك ، أليس كذلك؟ :)
  • Formspree مجاني لتقديم 50 طلبًا لكل نموذج شهريًا فقط! إذا كنت بحاجة إلى المزيد ، يمكنك الترقية إلى الباقة المدفوعة.
  • Formspree لديها خطط مجانية ومدفوعة. تحتوي الخطط المدفوعة على العديد من الميزات الأخرى مثل لوحة تحكم المسؤول ، وعمليات الإرسال غير المحدودة ، ومعالجة AJAX ، إلخ ، ويمكن العثور على الخطط المدفوعة وميزاتها هنا

إذا كنت تقوم ببناء موقع أساسي ، فلا داعي للقلق بشأن الخطط المدفوعة ، فالخطط المدفوعة مطلوبة في الغالب بواسطة تطبيقات الشركات والشركات ، وستغطي الخطة المجانية جميع احتياجاتك. أنا أستخدم هذا لبعض مشاريع العملاء أيضًا :)

  • يمكن لمستخدمي Formspree المتميزين إرسال النماذج عبر AJAX. ما عليك سوى تعيين رأس Accept على application / json. إذا كنت تستخدم jQuery ، فيمكن القيام بذلك على النحو التالي:
 $.ajax({ url: "//formspree.io/FORM_ID", method: "POST", data: {message: "hello!"}, dataType: "json" }); 

حسنًا ، هذا للمستخدمين مدفوع الأجر :)

إذا كنت لا تستخدم jQUERY مثلي وتعبت من بناء جملة AJAX الافتراضي الطويل ، فراجع مكتبة simpleAJAX ، وهي مكتبة بسيطة قمت بإنشائها للتعامل مع طلبات HTTP. مثل ذلك:

const http = new simpleAJAX; const data = { "name": "Bolaji Ayodeji", "email": "[email protected]", "message": "hi" }; http.post('//formspree.io/FORM_ID', data, (err, user) => { if(err) { console.log(err) } else { console.log(user); } }); 

نجم يجعلني سعيدا! :)

إذا كنت تستخدم React ، فإن ZEIT لديها دليل شامل حول استخدام Formspree مع تطبيق Create React ، مع استكمال تعليمات النشر. ينصح به بشده!

الطريقة الثانية

تقدم Netlify معالجة النماذج للمواقع المنشورة على نظامها الأساسي.

FORM HANDLING WITH NETLIFY

  • Create an account on Netlify and deploy your site there.

Please watch this 14min video by @JamesQuick below if you don’t know what Netlify is. Learn about all of the awesome features in Netlify like Continuous Deployment, Lambda Functions, Split Testing, Preview Branches, and more!

  • Now that you have deployed your site, let’s create the form again

Now let’s go over the new stuff I added above.

  • Netlify is quite easier, you simply add the netlify attribute data-netlify="true"to the tag, and you can start receiving submissions in your Netlify site admin panel.
  • Here, the action attribute serves as your custom success page

That’s all, your form submissions goes straight to your Netlify admin panel

Settings > Build & deploy > Environment > Environment variables

(Watch the video above if you don’t understand what the panel means)

Things to note!

  • Your site must be hosted on netlify to use this method
  • You must add the netlify attribute for the form to work
  • You can find all submissions to your Netlify forms in the Forms tab of your site dashboard. Settings > Forms
  • Netlify has free and paid plans too
  • Netlify has several built-in notification options for verified form submissions, including email and Slack notifications. (Only available in Paid plans). You can find them in Settings > Forms > Form notifications.
  • Netlify also integrates with Zapier, so you can set up triggers that send your verified form submissions to any of the 500+ applications in their catalogue.
  • All notification emails are sent from [email protected], and any replies to a notification will go to that address. If you would like to respond to a form submitter, you will need to enter their address manually.
  • Netlify Forms can receive files uploads via form submissions too :).

To do this, add an input with type="file" to any form. When a form is submitted, a link to each uploaded file will be included in the form submission details.

  • Netlify is limited to 100 submissions per month and 10MB uploads per month for the FREE plan, If you want more, you’ll need to upgrade

And that’s all!!

FINAL HTML FORM CODE

 Name: Name must be between 2 and 20 characters Email: Enter a valid email address Telephone: Enter a valid number 
 Name: Name must be between 2 and 20 characters Email: Enter a valid email address Telephone: Enter a valid number 

CONCLUSION

شيء واحد يجب ملاحظته حول formspree هو أن الإصدار المجاني يترك عنوان بريدك الإلكتروني مكشوفًا للبرامج الكاشفة والروبوتات ، لذا قد ترغب في إعداد عنوان بريد إلكتروني مؤقت يمكن التخلص منه أثناء استخدامه. إذا كنت تريد إخفاء عنوان بريدك الإلكتروني افتراضيًا ، فستحتاج إلى ترقية خطتك.

هل تريد ممارسة اضافية؟ شاهد هذا الفيديو التعليمي أدناه بواسطة Brad Traversy وتعرف على كيفية إضافة جهة اتصال أو أي نوع من النماذج إلى موقع الويب الخاص بك باستخدام ميزة نموذج Netlify بما في ذلك تحميل الملفات وتصفية البريد العشوائي. [دليل كامل + كود عملي]

روابط مفيدة

  • netlify.com/docs/form-handling
  • forestry.io/blog/5-ways-to-handle-forms-on- ..
  • gridsome.org/docs/guide-forms
  • zeit.co/guides/deploying-react-forms-using- ..
  • zeit.co/guides/deploying-statickit-with-zei ..

شكرا للقراءة!