संपर्क फॉर्म तयार करण्यासाठी FormDesigner हा एक आदर्श उपाय आहे. ॲडमिन पॅनेलमध्ये फॉर्म तयार करणे

नमस्कार मित्रांनो! या धड्यात आपण फीडबॅक फॉर्म तयार करण्याबद्दल किंवा लोक "संपर्क फॉर्म" देखील म्हणतात त्याबद्दल बोलू.

आज आम्ही तुम्हाला माझे आवडते संपर्क फॉर्म 7 प्लगइन वापरून काही मिनिटांत एक सोपा, सुंदर आणि कार्यात्मक फीडबॅक फॉर्म कसा तयार करू शकता ते दाखवू.

मी संपर्क फॉर्म स्थापित करण्याच्या सर्व चरणांचे शक्य तितके तपशीलवार वर्णन करण्याचा प्रयत्न करेन आणि या संदर्भात धडा बराच मोठा असेल :)

WordPress मध्ये संपर्क फॉर्म तयार करणे

अगदी सुरुवातीस, मला हे लक्षात घ्यायचे आहे की संपर्क फॉर्म 7 प्लगइन Russified आहे आणि आपल्याला त्यात कोणतीही अडचण येणार नाही. माझ्या शब्दांचा पुरावा म्हणून हे प्लगइन 25 दशलक्ष वेळा डाउनलोड केले गेले आहे हे तथ्य असू शकते!!!

तर, चला सुरुवात करूया. फीडबॅक फॉर्म तयार करण्यासाठी तुम्हाला पुढील गोष्टी करण्याची आवश्यकता आहे:

1. संपर्क फॉर्म 7 प्लगइन स्थापित आणि सक्रिय करा. आपण करू शकता प्लगइन कसे स्थापित करावे.

2. एकदा सक्रिय झाल्यावर संपर्क फॉर्म 7 -> फॉर्म वर जा.

3. उघडणाऱ्या विंडोमध्ये, इन्सर्शन कोडसह ओळ कॉपी करा.

४. कॉपी केलेला कोड ज्या पेजवर आम्हाला फीडबॅक फॉर्म जोडायचा आहे त्यावर पेस्ट करा. तुम्ही कोड टाकल्यानंतर, "अपडेट" बटणावर क्लिक करून बदल जतन करण्यास विसरू नका.

संपर्क फॉर्म जोडण्याचा हा परिणाम आहे:

तयार! तुम्ही तुमच्या वेबसाइटवर कार्यरत फीडबॅक फॉर्म स्थापित केला आहे!

तुम्ही बघू शकता, फक्त काही मिनिटांत तुम्ही तुमच्या वेबसाइटवर फीडबॅक फॉर्म सहजपणे इन्स्टॉल करू शकता. आपण हे समाप्त करू शकता, परंतु जे मानक फॉर्मसह समाधानी नाहीत आणि ज्यांना भिन्न फील्ड आणि क्षमतांसह पूर्णपणे नवीन संपर्क फॉर्म तयार करायचा आहे त्यांच्यासाठी मी धडा शेवटपर्यंत वाचण्याची शिफारस करतो.

नवीन फॉर्म तयार करण्यासाठी, प्रथम आपल्याला त्यात कोणते फील्ड हवे आहेत हे ठरवावे लागेल. या धड्यात, उदाहरण म्हणून, आम्ही एक साधा कॉलबॅक विनंती फॉर्म तयार करू.

हे करण्यासाठी, आम्हाला खालील फील्ड भरण्यासाठी फॉर्मची आवश्यकता आहे:

• नाव (आवश्यक फील्ड)
• आडनाव
• फोन (आवश्यक फील्ड)
• कॉल करण्यासाठी सोयीस्कर वेळेच्या निवडीसह फील्ड

आम्ही फील्डवर निर्णय घेतल्यानंतर, आम्ही फॉर्म तयार करण्यासाठी पुढे जाऊ:

1. संपर्क फॉर्म 7 वर जा -> नवीन जोडा.

2. उघडणाऱ्या विंडोमध्ये, “नवीन जोडा” बटणावर क्लिक करा. आवश्यक असल्यास, खालील ड्रॉपडाउन सूचीमधून भाषा निवडा. डीफॉल्टनुसार भाषा रशियन असेल.

3. बटणावर क्लिक केल्यानंतर, तुम्हाला फॉर्म संपादक असलेल्या पृष्ठावर नेले जाईल.

पृष्ठाच्या अगदी शीर्षस्थानी एक फील्ड आहे ज्यामध्ये आपण नवीन फॉर्मचे नाव लिहितो. फॉर्म टेम्प्लेटमध्ये आपल्याला मानक फॉर्म फील्ड दिसतात जे डीफॉल्टनुसार तयार केले जातात.

वेबसाइटवरील फॉर्मवरून कोणीतरी ऑर्डर सबमिट केल्यानंतर तुमच्या ईमेलवर येणाऱ्या पत्रासाठी आम्ही खाली सेटिंग्ज पाहतो. या सेटिंग्जमध्ये, उदाहरणार्थ, तुम्ही तुमच्या वेबसाइटवरील फॉर्ममधील विनंत्या पाठवल्या जातील ते ई-मेल बदलू किंवा जोडू शकता. अक्षर टेम्प्लेट पत्राच्या आत प्रदर्शित होणारी माहिती कॉन्फिगर करते.

4. संपादकाच्या संरचनेशी आपल्याला वरवरची ओळख झाल्यानंतर, आपण आपला नवीन फॉर्म तयार करण्याकडे वळतो. हे करण्यासाठी, आम्हाला "सबमिट" बटण वगळता फॉर्म टेम्प्लेटमधून सर्व ओळी काढून टाकाव्या लागतील आणि अक्षर टेम्पलेटमधील सर्वकाही पूर्णपणे हटवावे लागेल. काढून टाकल्यानंतर तुम्हाला असे काहीतरी मिळाले पाहिजे:

5. आता आपल्याला नवीन फील्ड तयार करण्याची आवश्यकता आहे: नाव (आवश्यक), आडनाव, फोन (आवश्यक), सोयीस्कर कॉल वेळ.

आम्ही नाव प्रविष्ट करण्यासाठी फील्ड तयार करून प्रारंभ करतो, जे आवश्यक असले पाहिजे. हे करण्यासाठी, "टॅग व्युत्पन्न करा" बटणावर क्लिक करा आणि मजकूर फील्ड निवडा.

नवीन फील्डच्या सेटिंग्जमध्ये, एक चेकमार्क ठेवा, जो फील्ड भरणे आवश्यक असल्यासच आवश्यक आहे. पुढे, व्युत्पन्न केलेला कोड उजवीकडील फॉर्म टेम्प्लेटमध्ये कॉपी करा आणि खालील कोड अक्षर टेम्प्लेटमध्ये कॉपी करा. अधिक चांगल्या प्रकारे समजून घेण्यासाठी टिप्पण्या आणि बाणांसाठी खालील प्रतिमा पहा.

6. आम्ही नाव प्रविष्ट करण्यासाठी फील्ड जोडल्यानंतर, “जनरेट टॅग” -> मजकूर फील्डवर क्लिक करा आणि समानतेनुसार, फॉर्म टेम्पलेट आणि अक्षर टेम्पलेटमध्ये कोड कॉपी आणि पेस्ट करून आडनाव आणि फोन फील्ड तयार करा. फरक एवढाच आहे की आडनाव फील्डसाठी अनिवार्य फील्डवर टिक करण्याची आवश्यकता नाही.

नाव, आडनाव आणि फोन फील्ड जोडल्यानंतर, फॉर्म संपादक असे दिसेल:

7. आता सोयीस्कर कॉल टाइम फील्ड तयार करा.

हे करण्यासाठी, "टॅग व्युत्पन्न करा" वर क्लिक करा आणि "ड्रॉप-डाउन मेनू" निवडा.

निवड फील्डमध्ये, एका ओळीत एक पर्याय लिहा, आमच्या बाबतीत ही वेळ 8-00 ते 18-00 पर्यंत दोन तासांच्या अंतराने आहे. भरल्यानंतर, कोडच्या संबंधित ओळी फॉर्म टेम्पलेट आणि अक्षर टेम्पलेटमध्ये कॉपी करा.

परिणामी, आपण यासारखे काहीतरी समाप्त केले पाहिजे:

9. फॉर्म कोड कॉपी करा आणि तुम्हाला फॉर्म आवश्यक असलेल्या पेजवर पेस्ट करा. आपण सर्वकाही योग्यरित्या केले असल्यास, आपल्याकडे कॉलबॅक विनंती फॉर्म असा असावा:

वापरकर्त्याने तुमच्या वेबसाइटवरून कॉलबॅक ऑर्डर दिल्यानंतर, तुम्हाला खालील सामग्रीसह ईमेल प्राप्त होईल:

तयार! येथे आम्ही सुरवातीपासून कॉल बॅक ऑर्डर करण्यासाठी एक फॉर्म तयार केला आहे.

बहुतेक प्रकरणांमध्ये, मानक फीडबॅक फॉर्म, जो प्लगइनच्या स्थापनेनंतर आणि सक्रिय झाल्यानंतर लगेचच डीफॉल्टनुसार तयार केला जातो, पुरेसा असतो.

मला आशा आहे की हे ट्यूटोरियल तुमच्यासाठी उपयुक्त असेल आणि तुम्हाला संपर्क फॉर्म 7 प्लगइन समजले असेल.

फॉर्म तयार करताना तुम्हाला काही प्रश्न असल्यास किंवा काहीतरी कार्य करत नसल्यास, टिप्पण्यांमध्ये लिहा आणि प्रश्न विचारा.

आणि लक्षात ठेवा की साइटवरील फीडबॅक फॉर्म संपर्क पृष्ठावरील आवश्यक गुणधर्म आहे.

नमस्कार मित्रांनो! या धड्यात आपण फीडबॅक फॉर्म तयार करण्याबद्दल किंवा लोक "संपर्क फॉर्म" देखील म्हणतात त्याबद्दल बोलू. आज आम्ही तुम्हाला माझे आवडते संपर्क फॉर्म 7 प्लगइन वापरून काही मिनिटांत एक सोपा, सुंदर आणि कार्यात्मक फीडबॅक फॉर्म कसा तयार करू शकता ते दाखवू, मी संपर्क फॉर्म स्थापित करण्याच्या सर्व टप्प्यांचे शक्य तितके तपशीलवार वर्णन करण्याचा प्रयत्न करेन त्यामुळे धडा बराच लांब होईल :) वर्डप्रेसमध्ये संपर्क फॉर्म तयार करणे अगदी सुरुवातीला, मला हे लक्षात घ्यायचे आहे की संपर्क फॉर्म 7 प्लगइन रस्सीफाइड आहे आणि तुम्हाला त्यात कोणतीही अडचण येणार नाही. माझ्या शब्दांचा पुरावा म्हणून हे प्लगइन हे तथ्य असू शकते...

धड्यासाठी पुनरावलोकन मत

100

ग्रेड

निकाल: प्रिय वाचकांनो! मत देण्यात आळशी होऊ नका आणि टिप्पणी द्या. अशा प्रकारे मी धडे आणि लेखांची उपयुक्तता समजू शकेन आणि भविष्यात त्यांची गुणवत्ता सुधारू शकेन. आगाऊ धन्यवाद!

या लेखात, तुम्ही AJAX वापरून डेटा सबमिट करणारा संपर्क फॉर्म कसा तयार करायचा ते शिकाल. ईमेलद्वारे फॉर्म डेटा पाठवण्यासाठी आम्ही jQuery आणि एक साधी PHP ईमेल स्क्रिप्ट वापरू.

HTML फॉर्म तयार करणे

आमचे पहिले कार्य HTML फॉर्म सेट करणे आहे. घटकाचा आयडी ajax-contact वर सेट करा, post ची पद्धत विशेषता आणि mailer.php वर कृती विशेषता सेट करा.

नाव: ईमेल: संदेश: पाठवा

आम्ही तुमचे वापरकर्तानाव, ईमेल पत्ता आणि संदेश प्रविष्ट करण्यासाठी फील्डसह एक फॉर्म तयार केला आहे. लक्षात ठेवा की प्रत्येक फॉर्म फील्डमध्ये एक आवश्यक विशेषता आहे. HTML5 फॉर्म प्रमाणीकरणास समर्थन देणाऱ्या ब्राउझरमध्ये, फील्ड रिक्त ठेवल्यास त्याचा वापर डेटा सबमिट करण्यास अनुमती देणार नाही.
पुढे, तुम्हाला एक संदेश तयार करण्याची आवश्यकता आहे जो त्रुटी किंवा यशस्वी सबमिशन संदेश प्रदर्शित करण्यासाठी वापरला जाईल आणि हा घटक टॅगच्या वर ठेवा आणि त्यास फॉर्म-मेसेजेसचा आयडी द्या.

आता तुम्हाला कोडची उदाहरणे डाउनलोड करावी लागतील आणि तुमच्या प्रोजेक्ट डिरेक्टरीमध्ये style.css फाइल कॉपी करा. तुम्हाला ब्राउझरला CSS फाइल लोड करण्यास सांगणारा घटक देखील जोडण्याची आवश्यकता आहे.

तुम्हाला jQuery लायब्ररी आणि app.js फाइलचा संदर्भ देणारे दोन घटक तयार करावे लागतील. क्लोजिंग टॅगच्या आधी त्यांना जोडा.

प्रथम jquery-2.1.0.min.js फाइल डाउनलोड करणे महत्त्वाचे आहे कारण app.js स्क्रिप्टसाठी jQuery आवश्यक आहे.
हा सर्व HTML कोड आहे ज्याची तुम्हाला आवश्यकता असेल. आता JavaScript पाहू.

AJAX वापरून फॉर्म डेटा सबमिट करणे

तुमच्या प्रोजेक्ट डिरेक्टरीमध्ये app.js नावाची नवीन फाइल तयार करा. त्यात AJAX वापरून फॉर्म डेटा सबमिट करण्यासाठी आवश्यक असलेला कोड समाविष्ट असेल.
खालील कोड तुमच्या app.js फाइलमध्ये कॉपी करा.

आम्ही दोन व्हेरिएबल्स फॉर्म आणि formMessages तयार केले आहेत जे संबंधित HTML घटकांचा संदर्भ देतात.
पुढे, तुम्हाला एक श्रोता तयार करण्याची आवश्यकता आहे जो फॉर्मवर सबमिट केलेल्या इव्हेंटमध्ये अडथळा आणेल हे jQuery सबमिट पद्धत वापरून केले जाऊ शकते.

// संपर्क फॉर्मसाठी श्रोता सेट करा. $(फॉर्म).सबमिट(फंक्शन(इव्हेंट) ( // ब्राउझरमध्ये फॉर्म डेटा सबमिशन अवरोधित करा. event.preventDefault(); // TODO ));

आम्ही सबमिट पद्धतीला एक फंक्शन पास करतो जे वापरकर्त्याने फॉर्म डेटा सबमिट केल्यावर कार्यान्वित केले जाईल. आम्ही ब्राउझरला इव्हेंटवर प्रीव्हेंटडीफॉल्ट पद्धतीवर कॉल करून नेहमीप्रमाणे फॉर्म सबमिट करू नये असे देखील सांगितले.
आता आपल्याला फॉर्म डेटा अनुक्रमिक करणे आवश्यक आहे. हे AJAX विनंतीद्वारे पाठवल्या जाणाऱ्या की/व्हॅल्यू स्ट्रिंगमध्ये रूपांतरित केले जातील. फॉर्म डेटा सीरियलाइज करण्यासाठी jQuery ची सीरिअलाइझ पद्धत वापरा आणि नंतर फॉर्मडेटा व्हेरिएबलमध्ये निकाल संग्रहित करा.

// फॉर्म डेटा अनुक्रमिक करा. var formData = $(फॉर्म).सिरियलाइज();

आता फॉर्म डेटा सर्व्हरला पाठवण्यासाठी आणि प्रतिसादावर प्रक्रिया करण्यासाठी जबाबदार असलेला कोड लिहू. खालील कोड तुमच्या app.js फाइलमध्ये कॉपी करा.

// AJAX वापरून फॉर्म डेटा सबमिट करा. $.ajax(( प्रकार: "POST", url: $(form).attr("कृती"), डेटा: formData ))

नवीन AJAX विनंती तयार करण्यासाठी, jQuery ची ajax पद्धत वापरा. आम्ही ऑब्जेक्ट अजाक्स पद्धतीने पास केले आहे, ज्यामध्ये विनंती सानुकूलित करण्यासाठी वापरलेल्या अनेक गुणधर्मांचा समावेश आहे. प्रकार गुणधर्म HTTP पद्धत निर्दिष्ट करते जी विनंती पाठवण्यासाठी वापरली जाईल. आमच्या बाबतीत, ही POST पद्धत आहे.
url गुणधर्म हे स्क्रिप्टचे स्थान आहे जे फॉर्म डेटावर प्रक्रिया करेल. आम्ही फॉर्ममधून ॲक्शन विशेषता पुनर्प्राप्त करून या मालमत्तेसाठी मूल्य सेट करतो. डेटा प्रॉपर्टीचे मूल्य आम्ही आधी तयार केलेल्या फॉर्मडेटा व्हेरिएबलचा वापर करून सेट केले आहे.
मग तुम्हाला सर्व्हरकडून मिळालेल्या यशस्वी प्रतिसादावर प्रक्रिया करणे आवश्यक आहे. Ajax कॉलच्या क्लोजिंग ब्रॅकेट नंतर थेट खालील कोड कॉपी करा. कृपया लक्षात घ्या की मी जाणूनबुजून अर्धविराम सोडले आहेत.

पूर्ण झाले(फंक्शन(प्रतिसाद) ( // formMessages div मध्ये "यशस्वी" वर्ग असल्याची खात्री करा. $(formMessages).removeClass("error"); $(formMessages).addClass("यश"); // मजकूर सेट करा संदेश (formMessages) (""))

विनंती यशस्वीरित्या पूर्ण झाल्यास पूर्ण केलेली पद्धत कॉल केली जाईल. प्रथम, आम्ही तपासतो की formMessage च्या घटकामध्ये सक्सेस क्लास आहे. मग आम्ही मेल स्क्रिप्टद्वारे परत केलेला डेटा वापरून घटकाची मजकूर सामग्री सेट करतो. मग आम्ही प्रत्येक फॉर्म फील्डची मूल्ये साफ करतो.
JavaScript कोडच्या शेवटच्या तुकड्यात, एरर आल्यास काय व्हायचे ते लिहायचे आहे. खालील कोड तुमच्या app.js फाइलमध्ये कॉपी करा.

Fail(function(data) ( // formMessages div मध्ये "error" वर्ग असल्याची खात्री करा. $(formMessages).removeClass("success"); $(formMessages).addClass("error"); // सेट करा संदेश मजकूर जर (data.responseText !== "") ( $(formMessages).text(data.responseText); ) इतर ( $(formMessages).टेक्स्ट("अरेरे! एक त्रुटी आली आणि तुमचा संदेश पाठवला जाऊ शकला नाही. ."); )));

जर मेल स्क्रिप्ट एरर परत करत असेल तर फेल पद्धत म्हणतात. प्रथम, formMessages घटकामध्ये त्रुटी वर्ग आहे हे तपासू. मग AJAX विनंती प्रतिसादपाठ परत करते का ते आम्ही तपासतो. तसे असल्यास, formMessages घटकाची सामग्री सेट करण्यासाठी मजकूर वापरा.
अन्यथा, मानक त्रुटी संदेश वापरला जातो.

AJAX संपर्क फॉर्म तयार करण्यासाठी हे सर्व HTML आणि JavaScript कोड आवश्यक आहेत. पुढील विभागात, आम्ही एक स्क्रिप्ट तयार करू जी फॉर्म डेटावर प्रक्रिया करण्यासाठी आणि ईमेल पाठवण्यासाठी जबाबदार आहे.

PHP ईमेल स्क्रिप्ट तयार करणे
ही साधी स्क्रिप्ट फॉर्म डेटा प्रमाणित करण्यासाठी आणि ईमेल पाठवण्यासाठी जबाबदार आहे. एखादी त्रुटी आढळल्यास, JavaScript कार्यान्वित करण्यासाठी मेल स्क्रिप्ट योग्य स्थिती कोडसह प्रतिसाद देईल.