यूज़र सबमिट पर क्लिक करता है। इसके बाद क्या होता है? ब्राउज़र डेटा को सर्वर पर भेजता है। सर्वर उसे प्रोसेस करता है। फिर? क्या पेज रीलोड होता है? क्या पेज पर कुछ दिखता है? क्या यूज़र को कहीं और भेज दिया जाता है?
फ़ॉर्म सबमिशन हैंडलिंग फ्रंटएंड और बैकएंड के बीच का पुल है। इसे गलत करें तो यूज़र उलझ जाता है। सही करें तो अनुभव सहज और सोचा-समझा लगता है। इस लेख में फ़ॉर्म सबमिशन संभालने के अलग-अलग तरीके बताए गए हैं।
पारंपरिक फ़ॉर्म सबमिशन
पारंपरिक फ़ॉर्म सबमिशन में ब्राउज़र फ़ॉर्म के action और method एट्रिब्यूट से फ़ॉर्म डेटा सर्वर पर भेजता है।
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
जब यूज़र बटन पर क्लिक करता है, तो ब्राउज़र फ़ॉर्म डेटा को एनकोड करके /submit पर भेजता है। सर्वर उसे प्रोसेस करता है और नया पेज जवाब में देता है। ब्राउज़र वह पेज लोड करता है। यूज़र को नया URL और नया कंटेंट दिखता है।
पारंपरिक सबमिशन सरल है, हर जगह चलता है और JavaScript के बिना भी चलता है। इसकी मुख्य कमी यह है कि पेज रीलोड होता है, जो धीमा लगता है भले ही वह धीमा न हो, यूज़र की स्क्रॉल पोज़िशन चली जाती है और फ़ॉर्म के फ़ील्ड खाली हो जाते हैं।
रीडायरेक्ट के साथ फ़ॉर्म सबमिशन
फ़ॉर्म प्रोसेस करने के बाद सर्वर आमतौर पर यूज़र को सक्सेस पेज पर या वापस फ़ॉर्म पर भेज देता है।
सर्वर पर फ़ॉर्म प्रोसेस करने के बाद return redirect('/thank-you') इस्तेमाल करें। यह HTTP 303 रीडायरेक्ट रिस्पॉन्स भेजता है, जिससे ब्राउज़र रीडायरेक्ट को फ़ॉलो करके /thank-you पेज लोड करता है, जहां यूज़र को नए URL पर नया कंटेंट दिखता है। फ़ायदा यह है कि यूज़र को पता चल जाता है कि फ़ॉर्म प्रोसेस हो गया, और नया पेज साफ़ बताता है कि कुछ हुआ। कमी यह है कि पेज रीलोड होता है, जिसमें सर्वर को दो रिक्वेस्ट जाती हैं (एक फ़ॉर्म सबमिशन की, एक रीडायरेक्ट वाले पेज की), इसलिए अनुभव ज़रूरत से ज़्यादा धीमा लगता है।
AJAX फ़ॉर्म सबमिशन
AJAX (Asynchronous JavaScript and XML) से आप पेज रीलोड किए बिना फ़ॉर्म डेटा भेज सकते हैं, form.addEventListener('submit', async (e) => { e.preventDefault(); const data = new FormData(form); const response = await _blocked_('/submit', { method: 'POST', body: data }); if (response.ok) { showMessage('Form submitted successfully'); form.reset(); } }); के साथ। ब्राउज़र _blocked_ से फ़ॉर्म डेटा भेजता है, सर्वर उसे प्रोसेस करके जवाब देता है, और JavaScript जवाब लेकर पेज को अपडेट करती है, बिना रीलोड या रीडायरेक्ट के। यूज़र उसी पेज पर रहता है पर उसे पुष्टि दिखती है। फ़ायदा यह है कि यह तेज़ है, अनुभव सहज देता है, पेज रीलोड नहीं होता और आगे क्या होगा, इस पर आपका पूरा नियंत्रण रहता है। कमी यह है कि इसे JavaScript चाहिए, और अगर JavaScript फ़ेल हो जाए तो फ़ॉर्म सबमिट नहीं होता, हिस्ट्री अपडेट नहीं होती (URL वही रहता है), और यूज़र को हर फ़ीडबैक आपको खुद संभालना पड़ता है।
AJAX के साथ प्रोग्रेसिव एन्हांसमेंट
प्रोग्रेसिव एन्हांसमेंट का मतलब है कि फ़ॉर्म JavaScript के बिना भी चलता है, पर उसके साथ बेहतर चलता है। पहले पारंपरिक फ़ॉर्म बनाएं जो JavaScript के बिना चलता हो, जहां फ़ॉर्म सबमिट होता है और पेज थैंक यू पर रीडायरेक्ट हो जाता है। फिर, अगर JavaScript उपलब्ध है, तो if (supportsJavaScript) { form.addEventListener('submit', handleAjaxSubmission); } के साथ addEventListener से सबमिट इवेंट को रोकें, ताकि AJAX से भेजा जाए और उसी पेज पर मैसेज दिखे। अब फ़ॉर्म दोनों स्थितियों में चलता है। JavaScript के साथ वह AJAX से सबमिट होता है और यूज़र पेज पर ही रहता है। JavaScript के बिना वह पारंपरिक तरीके से सबमिट होता है और रीडायरेक्ट होता है। फ़ायदा यह है कि फ़ॉर्म सबके लिए चलता है, और JavaScript वाले यूज़र को सहज अनुभव मिलता है जबकि बिना JavaScript वालों के लिए भी फ़ॉर्म काम करता है। कमी यह है कि कोड ज़्यादा लिखना पड़ता है, क्योंकि आपको दोनों सबमिशन रास्ते संभालने होते हैं।
फ़ॉर्म सबमिशन की एरर संभालना
जब सर्वर फ़ॉर्म सबमिशन को रिजेक्ट करता है (वैलिडेशन फ़ेल, डेटाबेस एरर वगैरह), तो आपके पास दो तरीके हैं। पारंपरिक सबमिशन में सर्वर एरर मैसेज के साथ फ़ॉर्म दोबारा बनाता है और यूज़र को दिखाता है। AJAX सबमिशन में सर्वर एरर स्टेटस कोड (400, 422) और एरर मैसेज के साथ जवाब देता है, और JavaScript पेज पर एरर दिखाती है, _blocked_('/submit', { method: 'POST', body: data }).then(response => { if (!response.ok) { return response.json().then(data => { showErrors(data.errors); }); } return response.json(); }); के साथ। एरर हमेशा उन फ़ील्ड के पास दिखाएं जिनकी वजह से वे आईं, किसी सारांश में छिपाकर नहीं, ताकि यूज़र ठीक-ठीक देख सके कि क्या गलत हुआ और कहां सुधारना है।
लोडिंग स्टेट संभालना
जब फ़ॉर्म सबमिट हो, तो सबमिट बटन को डिसेबल कर दें ताकि यूज़र उसे दो बार क्लिक न करे, और लोडिंग स्पिनर या मैसेज दिखाएं, form.addEventListener('submit', async (e) => { e.preventDefault(); button.disabled = true; button.textContent = 'Sending...'; const response = await _blocked_('/submit', { method: 'POST', body: data }); button.disabled = false; button.textContent = 'Send'; }); के साथ। बटन को तुरंत डिसेबल करें, क्योंकि अगर रिक्वेस्ट में 5 सेकंड लगें, तो यूज़र यह सोचकर दोबारा क्लिक कर सकता है कि काम नहीं हुआ।
सफल सबमिशन के बाद क्या करें
फ़ॉर्म सफलतापूर्वक सबमिट होने के बाद आपके पास कई विकल्प हैं। आप फ़ॉर्म के फ़ील्ड खाली कर सकते हैं, थैंक यू मैसेज दिखा सकते हैं, थैंक यू पेज पर रीडायरेक्ट कर सकते हैं, यूज़र को ईमेल भेज सकते हैं, उन्हें पिछले पेज पर लौटा सकते हैं, या फ़ॉर्म पर ही रखकर उन्हें दोबारा सबमिट करने दे सकते हैं। अपने फ़ॉर्म के मकसद के हिसाब से चुनें। कॉन्टैक्ट फ़ॉर्म को थैंक यू मैसेज दिखाना चाहिए, बुकिंग फ़ॉर्म को बुकिंग कन्फ़र्मेशन पर रीडायरेक्ट करना चाहिए, और न्यूज़लेटर साइनअप को यूज़र को उसी पेज पर लौटाना चाहिए जहां वे थे।
WEMASY में फ़ॉर्म सबमिशन
WEMASY में फ़ॉर्म टूल है, जिससे आप अपनी वेबसाइट पर फ़ॉर्म बना सकते हैं।
आपके प्लान में कौन-से फ़ीचर शामिल हैं, यह जानने के लिए अपना WEMASY प्लान देखें।