() translation by (you can also view the original English article)
कोई फर्क नहीं पड़ता कि आप किस तरह की वेबसाइट के मालिक हैं या मैनेज करते हैं, आपको संभवत कॉन्टैक्ट फॉर्म की आवश्यकता होती है। कॉन्टैक्ट फॉर्म आपके विजिटर्स को क्वोट की रिक्वेस्ट करने में मदद कर सकता है, इंफॉर्मेशन के लिए पूछ सकता है, या आपकी वेबसाइट का उपयोग करते समय किसी भी सुझाव या समस्याओं को शेयर कर सकता है।
इस ट्यूटोरियल में, हमारा ध्यान शुरू से अंत तक PHP में एक पूरी तरह से काम करने वाले कांटेक्ट फॉर्म पर होगा। हम उन सभी फील्ड्स के मार्कअप से शुरुआत करेंगे जिन्हें हमें जोड़ने की जरूरत है और कांटेक्ट फॉर्म की बेसिक स्टाइलिंग भी। उसके बाद, हम इसकी फंक्शनैलिटी को इंप्लीमेंट करने के लिए PHP कोड पर आगे बढ़ेंगे।
बेशक, कॉन्टैक्ट फॉर्म बनाने का सबसे आसान तरीका CodeCanyon से एक पेशेवर कांटेक्ट फॉर्म डाउनलोड करना होगा।
लेकिन अगर आप इस बारे में सीखना चाहते हैं की कांटेक्ट फॉर्म कैसे बनाया जाता है, तो आगे पढ़ें! यह आपकी सोच से आसान हो सकता है।
हमारे HTML कॉन्टैक्ट फॉर्म का मार्कअप
मार्कअप को कोड करना हमारे खुद के कांटेक्ट फॉर्म बनाने का पहला कदम है। हम इसे करना शुरू कर देंगे, एक बार हमारे पास हम सभी एलिमेंट्स की एक लिस्ट हो जो हम अपने फॉर्म के अंदर चाहते हैं। हमें उस व्यक्ति के नाम के लिए एक इनपुट फील्ड्स की आवश्यकता होगी जो हमसे संपर्क कर रहा है, और हमें उनके ईमेल ऐड्रेस के लिए एक फील्ड की आवश्यकता होगी ताकि जरूरत पड़ने पर हम उन्हें वापस उत्तर भेज सकें। हमें इसके साथ ही एक इनपुट फील्ड की आवश्यकता होगी ताकि लोग आपसे कांटेक्ट कर सकें और एक textarea की भी जहां यूजर अपने मैसेज को टाइप कर सके।
यदि आप जिस वेबसाइट को मैनेज कर रहे हैं वह बहुत लोकप्रिय है, तो आपको कांटेक्ट फॉर्म के माध्यम से बहुत सारी ईमेल मिलेंगे। यह सुनिश्चित करने के लिए की सही लोग उन ईमेल को जल्दी से पढ़ने और जल्दी से रिस्पांस दे, आपको कुछ और फील्ड्स की आवश्यकता पढ़ती है। उदाहरण के लिए, आप एक ऐसी फील्ड जोड़ सकते हैं जो यह निर्धारित कर सकती है कि विजिटर किस डिपार्टमेंट से मार्केटिंग, सपोर्ट, या बिलिंग जैसे कांटेक्ट करना चाहता है। यह जानकारी बाद में उचित रूप से ईमेल को रूट करने के लिए भी उपयोगी जा सकती है। अंततः यह आपको बहुत तेजी से उत्तर देने और ईमेल को अधिक कुशलता से क्रमबद्ध करने में मदद कर सकता है।
कॉन्टैक्ट फॉर्म में आप कितने फील्ड जोड़ते हैं, यह आपके द्वारा चलाए जाने वाली वेबसाइट के टाइप पर निर्भर करता है, लेकिन सुनिश्चित करें कि आपने इसे ज्यादा नहीं किया है। विजिटर्स को बहुत सारी इनफार्मेशन भरने के लिए मजबूर करना आपसे पूरी तरह से कांटेक्ट करने से हतोत्साहित कर सकता है।
आइए उन सभी फील्ड्स को जोड़ने के लिए HTML कोड लिखे जो मैंने अभी-अभी अपने कांटेक्ट फॉर्म में उल्लेखित किए हैं।
1 |
<form action="contact.php" method="post"> |
2 |
<div class="elem-group"> |
3 |
<label for="name">Your Name</label> |
4 |
<input type="text" id="name" name="visitor_name" placeholder="John Doe" pattern=[A-Z\sa-z]{3,20} required> |
5 |
</div>
|
6 |
<div class="elem-group"> |
7 |
<label for="email">Your E-mail</label> |
8 |
<input type="email" id="email" name="visitor_email" placeholder="john.doe@email.com" required> |
9 |
</div>
|
10 |
<div class="elem-group"> |
11 |
<label for="department-selection">Choose Concerned Department</label> |
12 |
<select id="department-selection" name="concerned_department" required> |
13 |
<option value="">Select a Department</option> |
14 |
<option value="billing">Billing</option> |
15 |
<option value="marketing">Marketing</option> |
16 |
<option value="technical support">Technical Support</option> |
17 |
</select>
|
18 |
</div>
|
19 |
<div class="elem-group"> |
20 |
<label for="title">Reason For Contacting Us</label> |
21 |
<input type="text" id="title" name="email_title" required placeholder="Unable to Reset my Password" pattern=[A-Za-z0-9\s]{8,60}> |
22 |
</div>
|
23 |
<div class="elem-group"> |
24 |
<label for="message">Write your message</label> |
25 |
<textarea id="message" name="visitor_message" placeholder="Say whatever you want." required></textarea> |
26 |
</div>
|
27 |
<button type="submit">Send Message</button> |
28 |
</form>
|
आगे बढ़ने से पहले, मैं ऊपर दिए गए मार्कअप में कुछ अटरीब्यूट्स के अर्थ को संक्षेप में बताना चाहूंगा। फॉर्म में action एट्रिब्यूट यह निर्धारित करता है कि फॉर्म डाटा को कहां भेजा जाना है। यदि आपके पास action अटरीब्यूट नहीं है, तो डाटा वापस उसी URL पर भेज दिया जाता है। यहां हमने contact.php का उपयोग किया है, इसलिए उस स्क्रिप्ट पर फॉर्म डाटा भेजा जाएगा।
फॉर्म में अलग-अलग इनपुट एलिमेंट्स के लिए name अटरीब्यूट का उपयोग सर्वर साइड पर एलिमेंट वैल्यूज तक पहुंचने के लिए किया जाता है। उदाहरण के लिए, ऊपर दिए गए फॉर्म में, आप contact.php में $_POST[‘visitor_name’] का उपयोग करके आपसे कांटेक्ट करने वाले विजिटर का नाम प्राप्त कर सकते हैं।
हम यूजर्स को फॉर्म में हर एक फील्ड के लिए आपेक्षित इनपुट का एक बेसिक आईडिया देने के लिए placeholder अटरीब्यूट का उपयोग करते हैं। required एट्रिब्यूट यह सुनिश्चित करता है कि यूज़र द्वारा फॉर्म पर सबमिट बटन हिट करने से पहले कोई महत्वपूर्ण फील्ड खाली नहीं छोड़ी गई है। pattern ट्रिब्यूट का उपयोग कुछ नियमों को उन वैल्यूज पर लागू करने के लिए किया जाता है जो कुछ फील्ड्स के अंदर जा सकते हैं। हमारे मामले में, हम केवल यूजर्स को उनके द्वारा सबमिट किए गए नामों में अक्षरों और स्पेस कैरक्टर का उपयोग करने की अनुमति देते हैं। हम स्वीकार करने योग्य करेक्टर्स की कुल संख्या को भी 3 से 20 तक सीमित करते हैं। आपके द्वारा उपयोग किए जाने वाला पैटर्न यूजर्स से इच्छित इनपुट की टाइप पर निर्भर करेगा।
निम्नलिखित CodePen डेमों हमें दिखाता है कि ऊपर दिए गए मार्कअप और CSS के साथ हमारा कांटेक्ट फॉर्म कैसा दिखता है।
PHP का उपयोग करके हमारे HTML कॉन्टैक्ट फॉर्म को फंक्शनल बनाना
अभी, हमारा फॉर्म बिल्कुल भी उपयोगी नहीं है। विजिटर इसे भर सकते हैं और सेंड मैसेज बटन को हिट कर सकते हैं, लेकिन हमें कुछ भी प्राप्त नहीं होगा क्योंकि फॉर्म द्वारा प्रदान की गई जानकारी को संभालने के लिए कोई सर्वर साइड कोड नहीं है। इस सेक्शन में, हम PHP का उपयोग करके अपने कांटेक्ट फॉर्म को फंक्शनल बनाएंगे।
contact.php फाइल को बनाकर और इसके अंदर निम्न कोड डालकर शुरू करें।
1 |
<?php
|
2 |
|
3 |
if($_POST) { |
4 |
$visitor_name = ""; |
5 |
$visitor_email = ""; |
6 |
$email_title = ""; |
7 |
$concerned_department = ""; |
8 |
$visitor_message = ""; |
9 |
|
10 |
if(isset($_POST['visitor_name'])) { |
11 |
$visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING); |
12 |
}
|
13 |
|
14 |
if(isset($_POST['visitor_email'])) { |
15 |
$visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['visitor_email']); |
16 |
$visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL); |
17 |
}
|
18 |
|
19 |
if(isset($_POST['email_title'])) { |
20 |
$email_title = filter_var($_POST['email_title'], FILTER_SANITIZE_STRING); |
21 |
}
|
22 |
|
23 |
if(isset($_POST['concerned_department'])) { |
24 |
$concerned_department = filter_var($_POST['concerned_department'], FILTER_SANITIZE_STRING); |
25 |
}
|
26 |
|
27 |
if(isset($_POST['visitor_message'])) { |
28 |
$visitor_message = htmlspecialchars($_POST['visitor_message']); |
29 |
}
|
30 |
|
31 |
if($concerned_department == "billing") { |
32 |
$recipient = "billing@domain.com"; |
33 |
}
|
34 |
else if($concerned_department == "marketing") { |
35 |
$recipient = "marketing@domain.com"; |
36 |
}
|
37 |
else if($concerned_department == "technical support") { |
38 |
$recipient = "tech.support@domain.com"; |
39 |
}
|
40 |
else { |
41 |
$recipient = "contact@domain.com"; |
42 |
}
|
43 |
|
44 |
$headers = 'MIME-Version: 1.0' . "\r\n" |
45 |
.'Content-type: text/html; charset=utf-8' . "\r\n" |
46 |
.'From: ' . $visitor_email . "\r\n"; |
47 |
|
48 |
if(mail($recipient, $email_title, $visitor_message, $headers)) { |
49 |
echo "<p>Thank you for contacting us, $visitor_name. You will get a reply within 24 hours.</p>"; |
50 |
} else { |
51 |
echo '<p>We are sorry but the email did not go through.</p>'; |
52 |
}
|
53 |
|
54 |
} else { |
55 |
echo '<p>Something went wrong</p>'; |
56 |
}
|
57 |
|
58 |
?>
|
हमने पहले ही यूजर इनपुट के कुछ क्लाइंट साइड वैलिडेशन किए हैं। हालांकि, यह हमेशा सर्वर साइड वैलिडेशन के रूप में अच्छी तरह से सुरक्षित रहते हैं। हम यूजर द्वारा प्रदान किए गए नाम को सैनिटाइज करने के लिए filter_var() फंक्शन का उपयोग करते हैं। इसी तरह से, हम $email_title और $concerned_department की वैल्यू को भी सैनिटाइज करते हैं। आप सभी प्रकार के यूजर इनपुट को वैलिडेट या सैनिटाइज करने के लिए filter_var() फंक्शन का उपयोग कर सकते हैं। हम हमें भेजे गए विजिटर के मैसेज में सभी स्पेशल HTML कैरेक्टर्स को एनकोड करने के लिए htmlspecialchars() फंक्शन का भी उपयोग करते हैं।
$recipient की वैल्यू वेरिएबल $concerned_department की वैल्यू पर आधारित है। इस तरह, हम यह सुनिश्चित करते हैं कि केवल वे लोग जो वास्तव में इस मामले को देखना चाहते हैं ईमेल प्राप्त करते हो।
अंत में हम एक ईमेल भेजने के लिए mail() फंक्शन का उपयोग करते हैं जिसमें वह जानकारी शामिल होती है जो विजिटर चाहता है कि हम उसे जाने। ई-मेल के सफल डिलीवरी होने पर, हम विजिटर्स को बताते हैं कि हमने उनका ईमेल प्राप्त कर लिया है और उन से जल्द ही संपर्क किया जाएगा।
जब आप यूजर डाटा या इनपुट के साथ काम कर रहे होते हैं तो सिक्योरिटी सर्वोपरि है। आप यूजर इनपुट को वैलिडेट या सैनिटाइजर न करें या ना करें, यह इस बात पर निर्भर करता है कि इनपुट क्या है और आप इसका उपयोग कैसे करना चाहते हैं। वैलिडेशन केवल यह जाँचता है कि यूजर इनपुट नियमों के एक निश्चित सेट का अनुसरण करता है या नहीं। उदाहरण के लिए, वैलिडेशन यह जांच सकता है कि किसी व्यक्ति के नाम में कोई संख्या ना हो। सैनिटाइजेशन का उपयोग किसी भी ऑफेंडिंग कैरेक्टर को हटाने के लिए किया जाता है जो एक सिक्योरिटी रिस्क पैदा करता हो। उदाहरण के लिए, फॉर्म के माध्यम से आप से कांटेक्ट करने का प्रयास करने वाला मेल्शियस यूजर आपको एक हानिकारक स्क्रिप्ट डाउनलोड करने के लिए textarea में एक script टैग जोड़ सकता है। यह विशेष रूप से चिंताजनक है जब आप की वेबसाइट में पब्लिक फोरम पर सभी की पहुंच हो।
हालांकि, यूजर इनपुट में अनवांटेड कैरेक्टर से छुटकारा पाने के लिए आपको बहुत सावधान रहना होगा। उदाहरण के लिए, आप सभी टैग्स को अलग करने और स्पेशल कैरेक्टर्स को एनकोड करने के लिए कुछ इनपुट पर filter_var($user_input, FILTER_SANITIZE_STRING); का उपयोग करने का निर्णय ले सकते हैं। हालांकि, यह फ्लैग लेजिटीमेट यूजर द्वारा हानि रहित कैरेक्टर इनपुट भी निकालता है। यहां एक उदाहरण है:
1 |
<?php
|
2 |
|
3 |
$string = 'One of your posts about inequalities mentioned that when x < y and y < z then x < z.'; |
4 |
|
5 |
// Output: One of your posts about inequalities mentioned that when x
|
6 |
echo filter_var($string, FILTER_SANITIZE_STRING); |
7 |
|
8 |
// Output: One of your posts about inequalities mentioned that when x < y and y < z then x < z.
|
9 |
echo htmlspecialchars($string); |
10 |
|
11 |
?>
|
यदि आपकी वेबसाइट में गणित से संबंधित बहुत सारे टॉपिक्स हैं, तो यूजर्स के लिए कांटेक्ट फॉर्म या फोरम पोस्ट में < या > लिखना आम बात होती है। filter_var() फंक्शन के साथ FILTER_SANITIZE_STRING फ्लैग का उपयोग करना इस मामले में मैसेज से आवश्यक जानकारी को ले लेगा।
मैं जिस बिंदु को समझाने की कोशिश कर रहा हूं, वह यह है कि भले ही आपको यूजर डाटा को हमेशा वैलिडेट या सैनिटाइज करना होता है, सुनिश्चित करें कि आप इस प्रक्रिया में महत्वपूर्ण जानकारी को हटा नहीं रहे हैं।
अंतिम विचार
एक बार आप बेसिक को जान ले तो PHP में कॉन्टैक्ट फॉर्म बनाना अपेक्षाकृत आसान होता है। आप यूजर के नाम, ईमेल एड्रेस, फोन नंबर, आदि जैसी जानकारी को लेने के लिए इनपुट एलिमेंट बनाने के लिए आवश्यक HTML लिखना शुरू करते हैं। अगले स्टेप CSS को लिखना है ताकि यह सुनिश्चित हो सके कि कॉन्टैक्ट फॉर्म बाकी वेबसाइट के साथ पूरी तरह से ब्लेंड हो जाए। अंतिम स्टेप में PHP कोड लिखना शामिल होता है जो कांटेक्ट फॉर्म से जानकारी लेगा और आपको इसे सुरक्षित रूप से मेल कर देगा।
इसका उद्देश्य यह सुनिश्चित करना है कि विभिन्न प्रकार के एलिमेंट ऐसे तरीके से बनाए गए हैं जो लोगों को भ्रमित नहीं करते हो और यूजर इनपुट को संबंधित पार्टीज को मेल करने से पहले वैलिडेट और सैनिटाइज किया जाता है। यदि यह सब आपके लिए नया है या यदि आप पेशेवर दिखने वाले कांटेक्ट फॉर्म को बनाने में बहुत समय बिताना नहीं चाहते हो, तो आपको निश्चित रूप से इन टॉप रेटेड कॉन्टैक्ट फॉर्म PHP स्क्रिप्ट की जांच करनी चाहिए।
यदि आपके कोई प्रश्न है, तो बेझिझक मुझे कमैंट्स में बताएं। मेरा अगला ट्यूटोरियल आपको दिखाएगा कि कांटेक्ट में स्पैम को दूर रखने में मदद करने के लिए अपने खुद के CAPTCHA को कैसे लागू किया जाए।
यदि आप पेशेवर क्वालिटी वाले PHP फॉर्म स्क्रिप्ट में रुचि रखते हैं, जिसका कि आप आज ही अपनी साइट पर उपयोग करना शुरू कर सकते हो, तो हमारे कुछ अन्य पोस्ट देखें।
