अजाक्स-आधारित HTML5 / CSS3 संपर्क फ़ॉर्म कैसे बनाएं

 
 
  
आपका ईमेल भेज दिया गया था हुज़्ज़ाह!
  

  
फॉर्म जमा करने में त्रुटि
  
 
 नाम   
  
 
 ईमेल   
  
 
 संदेश <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 हमें मेल भेजो!  
 
  

आपने देखा होगा एक और भी है सशर्त ब्लॉक सीधे शुरू होने के बाद। यह एक चर नाम की जाँच करता है $ hasError और पुष्टि पर एक त्रुटि संदेश प्रदर्शित करेगा। यह पतन विधि है केवल प्रयोग किया जाता है अगर जावास्क्रिप्ट अक्षम है ब्राउज़र में और इस तरह गतिशील त्रुटियों को उत्पन्न नहीं कर सकता.

सभी तरह से नीचे हम पा सकते हैं अलग-अलग PHP चर जाँच की जा रही है। बयानों को विनियमित कर रहा है यदि फॉर्म पहले से ही केवल आंशिक मात्रा में भरे गए डेटा के साथ प्रस्तुत किया गया है। यह एक और गिरावट प्रणाली है जो पहले से ही भरे हुए क्षेत्रों की सामग्री को प्रदर्शित करता है - उचित उपयोगकर्ता अनुभव के लिए एक अच्छी चाल!

प्रत्यक्ष रूप से हमारे फॉर्म के पूरा होने के बाद कुछ है jQuery के कार्य हमने लिखा है। हम इन पर पहले बात करेंगे क्योंकि ये पैगामेलो पर डिफ़ॉल्ट कार्यान्वयन हैं। हालाँकि यदि ब्राउज़र जावास्क्रिप्ट को स्वीकार नहीं करता है तो डिफ़ॉल्ट रूप से हम अपने PHP कोड पर भरोसा कर सकते हैं.

JQuery के लिए खुला

इस विषय पर बात करने का सबसे आसान तरीका सही में गोता लगाना होगा। मैं अलग-अलग ब्लॉकों को लाइन-बाय-लाइन तोड़ दूंगा ताकि आप देख सकें कि स्क्रिप्ट वास्तव में किस चीज़ की जाँच कर रही है.

हालांकि अगर आप बस खो जाते हैं प्रोजेक्ट कोड फ़ाइलों की समीक्षा करें. सभी पूर्ण ब्लॉक jQuery की वेबसाइट में पूर्व लिखित और अच्छी तरह से प्रलेखित हैं। आरंभ करने के लिए हम किसी अन्य के समान अपना कोड खोलते हैं:

अगर आप परिचित हैं कॉलबैक आप देख सकते हैं पद() फ़ंक्शन में मापदंडों का एक अंतर्निहित सेट होता है। कॉलबैक छोटे कार्य हैं जिन्हें कहा जाता है किसी अन्य फ़ंक्शन से डेटा की प्रतिक्रिया पर.

इसलिए उदाहरण के लिए, जब हमारे jQuery.post () फ़ंक्शन सफलतापूर्वक ई-मेल शूट करता है यह स्लाइडिंग एनीमेशन को प्रदर्शित करने के लिए अपने स्वयं के आंतरिक फ़ंक्शन को कॉल करेगा। इस कोड के सभी अपने ब्लॉक में लिखा जा सकता है और कहीं और चले गए। हालाँकि इस ट्यूटोरियल के लिए इनलाइन फ़ंक्शन के रूप में कॉलबैक लिखना बहुत आसान है.

हमारे PHP अतीत तोड़कर

उल्लेख करने के लिए अंतिम बाधा है तर्क हमारे PHP प्रोसेसर के पीछे। यह बैकएंड सिस्टम है जो वास्तव में होगा एक मेल फ़ंक्शन को कॉल करें तथा संदेश भेजें. नीचे दिए गए उदाहरणों में उपयोग किए गए सभी कोड सीधे हमारे मुख्य के शीर्ष पर पाए जा सकते हैं .php फ़ाइल, किसी भी HTML आउटपुट से पहले.

कुछ आंतरिक शैलियाँ भी हैं जो पृष्ठ को ताजा करती हैं। यहाँ कुछ भी विशेष रूप से नया नहीं है इसलिए हम किसी भी विवरण में नहीं जाएंगे। हालांकि styles.css दस्तावेज़ को प्रोजेक्ट कोड में शामिल किया गया है और इसमें अल्पविकसित CSS3 तकनीक शामिल हैं.

 
शुरू करने के लिए हम अपने PHP क्लॉज को खोलते हैं और जांचते हैं यदि फॉर्म जमा भी किया गया था.  पद परिवर्तनशील “प्रस्तुत” वास्तव में हमारे फॉर्म के अंत में एक छिपा हुआ इनपुट फ़ील्ड जोड़ा गया था। यह एक उपयोगी तरीका है जांचें कि उपयोगकर्ता ने कुछ भी जमा किया है या नहीं अभी तक हम सर्वर संसाधनों को बर्बाद नहीं करते हैं.
 
इसके बाद हमारे पास 3 अलग-अलग हैं यदि नहीं तो देखने के लिए बयान की जाँच यदि प्रत्येक इनपुट फ़ील्ड को भर दिया गया है. मैं यहाँ प्रत्येक तर्क को शामिल नहीं करूँगा क्योंकि वे सभी बहुत ही दोहराव वाले हैं। हालाँकि, आपको एक संक्षिप्त उदाहरण देने के लिए मैंने नीचे ई-मेल सत्यापन खंड शामिल किया है:
 
// वैध ईमेल की आवश्यकता है अगर (ट्रिम ($ _ POST ['ईमेल') === ") $ emailError = 'अपने ई-मेल पते में दर्ज करना भूल गए।'; $ hasError = true; if if (pre-pre_match) ("/ ^ ^ ई.नि.नैलम: लीडिंग इस्टा-z0-9_.-des*@aa-z0-9.-des+\. ईज़ादिंगलाइड्स 2,4जीएएसएसओओआई /", ट्रिम ($) _POST ['ईमेल']))) $ emailError = 'आपने एक अवैध ईमेल पता दर्ज किया है। "; $ hasError = true; और $ email = trim ($ _ POST [' email '];); 
 
PHP वैल्यू से सभी व्हाट्सएप को ट्रिम कर देगी और देख सकती है कि कुछ बचा है या नहीं। यदि ऐसा है तो हमारे पास एक विस्तृत जानकारी है नियमित अभिव्यक्ति (रेगेक्स) यह देखने के लिए कि क्या हमारे उपयोगकर्ता का इनपुट स्ट्रिंग ई-मेल पैटर्न के साथ मेल खाता है.
 
आपको निश्चित रूप से यह समझने की आवश्यकता नहीं है कि कैसे () के इस स्क्रिप्ट को बनाने का काम करता है। यह एक उपयोगी कार्य है एक सफल प्रकार के डेटा के लिए नियम और आवश्यकताएं निर्धारित करें, लेकिन वास्तव में समझ के लिए उन्नत प्रोग्रामिंग ज्ञान आदेश। इस परिदृश्य में हम यह सुनिश्चित कर रहे हैं कि उपयोगकर्ता केवल कुछ चुनिंदा वर्णों का ही इनपुट करे, इसमें शामिल हैं @ इसके बाद प्रतीक 2-4 वर्ण का प्रतिनिधित्व करते हुए शीर्ष स्तर के डोमेन.
 
हमारे सभी तर्क पास होने के बाद और हम अपना संदेश भेजने के लिए कोई भी त्रुटि नहीं करते हैं! यह बिट कोड हमारे ई-मेल संदेश को अनुकूलित करने और कुछ सेटअप करने के लिए अलग-अलग चर सेट करेगा मेल हेडर प्रक्रिया के लिए.
 
// कोई विफलता त्रुटियों पर अब ईमेल करें! अगर (isset ($ hasError)) $ emailTo = '[email protected]'; $ विषय = 'से प्रस्तुत संदेश'। $ नाम; $ sendCopy = ट्रिम ($ _ POST ['sendCopy']); $ शरीर = "नाम: $ नाम \ n \ n उपनाम: $ ईमेल \ n \ n टिप्पणियाँ: $ टिप्पणियाँ"; $ हेडर = 'से:'। ' <'.$emailTo.'>'। "आर ए \ n"। 'को उत्तर: ' । $ ईमेल; मेल ($ emailTo, $ विषय, $ शरीर, $ हेडर); // हमारे बूलियन पूर्णता मूल्य को TRUE $ emailSent = true पर सेट करें;  
 
यदि आप सोच रहे थे कि कोड आपके ई-मेल पते का पता कैसे लगाएगा, तो यह भरने का हिस्सा है। हमारे सेट में पहला चर शीर्षक है। $ emailTo और इनमें से जो भी होना चाहिए ई-मेल पता, जो संदेश प्राप्त करने वाला है.
 
हमारे अंदर $ शरीर परिवर्तनशील का हम लाभ उठाते हैं \ n संदेश में नई लाइनें जोड़ने के लिए परिसीमन करें। इस के लिए छोटे प्लेसमेंट जोड़ता है भेजने वाले का नाम, ईमेल पता, उनके लिए एक ब्रेक के बाद संदेश की सामग्री. बेशक आप प्रदर्शन को सुंदर बनाने में समय बिता सकते हैं, लेकिन यह संरचना ठीक काम करती है.
 
निष्कर्ष
 
यह एक उन्नत संपर्क फ़ॉर्म के लिए हमारे ट्यूटोरियल को बंद कर देता है। यदि आप अपने तत्वों को मेरे संबंध में शैली देना चाहते हैं तो आप मेरा उदाहरण देख सकते हैं styles.css परियोजना कोड के भीतर। हालाँकि, पृष्ठ की संरचना इतनी अच्छी तरह से की गई है कि आप अपने स्वयं के रूप और डिजाइन को बहुत आसानी से महसूस कर सकते हैं.
 
स्रोत कोड को डाउनलोड करने के लिए स्वतंत्र महसूस करें और मैंने जो थोड़ा सा करीब किया है उसकी जांच करें। एक ट्यूटोरियल का पालन करना अच्छा है लेकिन परियोजना स्रोत तक सीधी पहुंच होना अमूल्य हो सकता है। मैंने कस्टमाइज़ेशन को हवा देने के लिए एक संक्षिप्त स्टाइलशीट भी शामिल की है, आपके विचार के लिए धन्यवाद!