On mahdotonta kuvitella nykyaikaista verkkosivustoa ilman lomaketta palautetta. Tämä on olennainen osa, jonka pitäisi olla kaikilla verkkosivustoilla sen aiheesta riippumatta. Yhteydenottolomakkeen avulla verkkovastaava voi kommunikoida täysin vierailijoidensa kanssa julkaisematta julkisesti tietojaan, kuten sähköpostiosoitetta tai puhelinnumeroa.

Näin voit paitsi vastata vierailijoiden kysymyksiin, myös käsitellä hakemuksia tai tilauksia. Ja tässä on avauksesi sähköpostiosoite on olemassa vaara, että se on pian täynnä roskapostia. Tätä varten roskapostirobotit tutkivat avoimia tiloja ympäri vuorokauden World Wide Web etsimään uusia osoitteita, joihin voit lähettää tarpeetonta tietoa. Sotkun seurauksena postiosoite et voi yksinkertaisesti olla huomaamatta tärkeä kirje. Ja tässä on plugin yhteydenottolomake sillä sivusto ratkaisee tämän ongelman onnistuneesti. Käyttäjä voi vain täyttää erityisen kentän suodattaakseen robotit, esimerkiksi syöttää captcha ja postilaatikko sivuston omistaja saa vain tarvittavan kirjeenvaihdon.

Mitä tehtäviä verkkosivustolla oleva yhteydenottolomake ratkaisee?

Verkko-omistajan mielenrauha ei kuitenkaan ole ainoa tehtävä, jonka yhteydenottolomake onnistuu. Hän onnistuu suorittamaan melko menestyksekkäästi useita muita toimintoja. Tärkeimmät niistä ovat:

Yhteyden ylläpitäminen sivuston yleisöön. On epätodennäköistä, että kukaan kiistää sitä tosiasiaa vastaan, että kukaan ei vain täytä palautelomaketta. Todennäköisesti henkilöllä, joka menee tähän, on jokin kysymys, jonka hän haluaisi kysyä henkilökohtaisesti sivuston kirjoittajalta. Tämän seurauksena sivuston omistaja vastaanottaa jo kiinnostuneen käyttäjän ja ehkä jopa potentiaalinen asiakas

, joka jakoi yhteystietonsa. Eli kaikki riippuu tästä eteenpäin sivuston omistajasta. Toimintakehotus. Mikä on toimintakehotus ja miten se rohkaisee käyttäjiä toimimaan? erilaisia ​​toimia, ei tarvitse selittää. Mutta juuri tämä voidaan linkittää sivustolla olevaan yhteydenottolomakkeeseen. Voit esimerkiksi tarjota hänelle suljetun uutiskirjeen vastineeksi käyttäjän yhteystiedoista

Herätä sivut eloon interaktiivisilla lomakkeilla.

Yhteydenottolomakkeet voivat olla muutakin kuin staattisia. Ponnahdusikkunat, vaikka ne näyttävät häiritseviltä monille verkkosivustojen käyttäjille, voivat "elvyttää" verkkosivustojen sivut. Tärkeintä tällaisten lomakkeiden luomisessa ei ole liioitella sitä.

Kuinka saada yhteydenottolomake? Ei ole vaikeaa tarjota verkkosivustollesi tällainen lomake. Ota yhteyttä html-lomake , jossa on vain muutamia kenttiä, on täysin ratkaistava tehtävä ammattimaisille freelancereille, jotka voivat tehdä sen pienellä summalla. Lisäksi yhteydenottolomakkeen koodi löytyy itsenäisesti Internetistä. Mutta tällaisilla menetelmillä on monia haittoja. Tosiasia on, että tällainen interaktiivinen muoto on sivuston kasvot, mikä tarkoittaa, että sen on oltava houkutteleva. Mitä tehdä, jos jokin asia ei sovi sinulle, varsinkin jonkin ajan kuluttua? Mistä etsiä kehittäjää, joka kirjoitti lomakekoodin, jotta hän voi lisätä tarvittavat muutokset ? Ja jos lähettää php-lomakkeet löytyy avaruudesta globaali verkosto

, eikä ohjelmointitaitoja ole, muodon muuttaminen näyttää täysin mahdottomalta.

Lisäksi yhteydenottolomakkeen tulee toimia kuin kello, sillä kaikkien lähetettyjen viestien tulee saavuttaa vastaanottaja, eivätkä ne saa kadota matkan varrella. Kuvittele, jos suurasiakas lähettäisi yhteistyöehdotuksen palautelomakkeen kautta, mutta sivuston tekijä tai verkkokaupan johtaja ei saanut sitä? Ei luultavasti tarvitse selittää, että hän ei lähetä tarjoustaan ​​uudelleen, vaan menee kilpailijoille, joiden yhteydenottolomake toimii niin kuin pitää. Kaikki tämä on täynnä paitsi rahojen ja asiakkaiden, myös maineen menettämistä, mikä voi lopulta olla vielä pahempaa. FormDesigner - täydellinen ratkaisu

yhteydenottolomakkeen luomiseen Vuorovaikutteisen palautelomakkeen luominen ei ole koskaan ollut helpompaa online-lomakesuunnittelijan FormDesignerilla. Ensinnäkin se on nopea, vain muutama napsautus ja lomake on valmis lähetettäväksi sivustolle. Toiseksi, työskentely suunnittelijan kanssa on uskomattoman yksinkertaista, sinun ei tarvitse olla ohjelmoija tai sinulla ei ole erityisiä taitoja tai tietoja. Lomake sähköpostin lähettäminen kiitos suunnittelija tulee luomaan jopa aloittelija webmaster ansiosta ymmärrettävää ja. Kolmanneksi jo luotuun lomakkeeseen voidaan aina tehdä muutoksia uusien toiveiden tai tarpeiden mukaan. Lomakkeen muokkaaminen on yhtä helppoa kuin uuden luominen, ja muutosten online-näytön ansiosta näet välittömästi kaikki lomakkeeseen tehdyt muutokset. Lisäksi sivusto tarjoaa käyttäjälle muita etuja, kuten:

• Yhteydenottolomakkeiden luominen, joilla on mahdollisuus lähettää tiedosto sivuston omistajalle;
• Virheilmoitukset lomakkeita luotaessa;
• Kyky luoda monikielisiä lomakkeita;
• Luotujen muotojen visuaalinen suunnittelija;
• Yksityiskohtaiset tilastot kaikkiin pyyntöihin ja paljon muuta.

Työskentely FormDesigner-palvelun kanssa

Jotta voit aloittaa työskentelyn kätevän suunnittelijan kanssa, sinun on suoritettava yksinkertainen rekisteröintimenettely. Tämän jälkeen voit siirtyä suoraan tarvitsemasi yhteydenottolomakkeen luomiseen. Muuten, voit rekisteröityä kirjautumalla sisään käyttämällä tili sosiaalisessa verkostossa.

Suunnittelijan ensimmäisessä osassa voit määrittää, miltä palautelomakkeen kautta lähetetyt kirjeet näyttävät, asettaa suojauksen robotteja vastaan ​​ja myös valita toiminnon, joka tapahtuu, kun kirje on lähetetty.

Toinen osio "Elementit" on välttämätön, jotta voit lisätä, poistaa tai yksinkertaisesti muokata täytettäviä kenttiä. Niistä voidaan tehdä paitsi tekstiä myös digitaalisia ja jopa kuvilla. Tässä osiossa voit myös asettaa sosiaalisen median painikkeita.

Tämän jälkeen ei enää tarvitse kuin vastaanottaa oman valmistetun viestintälomakkeen koodi ja asentaa se verkkosivuillaan.

Näin ollen online-lomakesuunnittelijan avulla voit luoda ja muokata yhteydenottolomakkeita mille tahansa verkkosivustolle niiden omistajien toiveiden ja tarpeiden mukaisesti muutamassa minuutissa. Kuka tahansa käyttäjä voi nopeasti muokata lomakkeitaan, lisätä niihin uusia kenttiä tai poistaa niitä tarpeettomia elementtejä, luo omia virheilmoituksia lomaketta käytettäessä. Ja edistyneet käyttäjät ovat varmasti kiinnostuneita kyvystä työskennellä suunnittelun kanssa säätämällä CSS-ominaisuuksia luotu muoto makusi mukaan niin, että se vastaa verkkosivun ulkoasua.

On myös syytä huomata, että jos palvelun kanssa työskennellessäsi herää kysymyksiä, voit ottaa turvallisesti yhteyttä tekniseen tukeen, joka auttaa ratkaisemaan syntyviä ongelmia. Voit aloittaa online-konstruktorin käytön täysin ilmaiseksi, samalla kun pääset käyttämään kaikkea tärkeitä toimintoja online-suunnittelija. FormDesigner-palvelun avulla omien verkkolomakkeiden luominen sivustolle käy uskomattoman yksinkertaiseksi ja nopeaksi.

Video-opastus yhteydenottolomakkeen luomiseen verkkosivustolla

Tässä artikkelissa opit luomaan yhteydenottolomakkeen, joka lähettää tietoja AJAXin avulla. Käytämme jQueryä ja yksinkertaista PHP-sähköpostiohjelmaa lähettääksemme lomaketiedot sähköpostitse.

HTML-lomakkeen luominen

Ensimmäinen tehtävämme on määrittää HTML-lomake. Aseta elementin id:ksi ajax-contact, aseta sen method-attribuutti arvoon postin merkitys, ja action-attribuutille - mailer.php:n arvo.

Nimi: Sähköposti: Viesti: Lähetä

Olemme luoneet lomakkeen, jossa on kentät käyttäjänimen ja osoitteen syöttämistä varten sähköposti ja viestit. Huomaa, että jokainen lomakekenttä sisältää pakollisen attribuutin. HTML5-lomakkeen validointia tukevissa selaimissa sen käyttö ei salli tietojen lähettämistä, jos kentät jätetään tyhjiksi.
Seuraavaksi sinun on luotava viesti, jota käytetään virhe- tai onnistuneiden lähetysviestien näyttämiseen. Aseta tämä elementti tunnisteen yläpuolelle ja anna sille lomakeviestien tunnus.

Nyt sinun on ladattava koodiesimerkit ja kopioitava style.css-tiedosto projektihakemistoosi. Sinun on myös lisättävä elementti, joka käskee selaimen lataamaan CSS-tiedoston.

Sinun on luotava kaksi elementtiä, jotka viittaavat jQuery-kirjasto ja app.js-tiedosto. Lisää ne ennen sulkevaa tagia.

On tärkeää ladata jquery-2.1.0.min.js-tiedosto ensin, koska app.js-skripti vaatii jQueryn.
Tämä on kaikki tarvitsemasi HTML-koodi. Katsotaan nyt JavaScriptiä.

Lomaketietojen lähettäminen AJAXilla

Luo projektihakemistoon uusi tiedosto nimeltä app.js. Se sisältää koodin, jota tarvitaan lomaketietojen lähettämiseen AJAX:n avulla.
Kopioi seuraava koodi app.js-tiedostoosi.

Olemme luoneet kaksi muuttujaa form ja formMessages, jotka viittaavat vastaaviin HTML-elementteihin.
Seuraavaksi sinun on luotava kuuntelija, joka sieppaa lomakkeen lähetystapahtuman. Tämä voidaan tehdä käyttämällä jQuery-lähetysmenetelmää.

// Aseta kuuntelija yhteydenottolomakkeelle. $(form).submit(function(event) ( // Estä lomaketietojen lähettäminen selaimessa. event.preventDefault(); // TODO ));

Välitämme lähetysmenetelmälle toiminnon, joka suoritetaan, kun käyttäjä lähettää lomaketiedot. Sanoimme myös selaimelle, ettei se lähetä lomaketta tavalliseen tapaan kutsumalla tapahtumassa preventDefault-metodia.
Nyt meidän on sarjoitava lomaketiedot. Nämä muunnetaan avain-/arvomerkkijonoksi, joka lähetetään käyttämällä AJAX-pyyntö A. Käyttää jQuery menetelmä serialize sarjoittaaksesi lomaketiedot ja tallentaa sitten tuloksen formData-muuttujaan.

// Sarjaa lomaketiedot. var formData = $(lomake).serialize();

Nyt kirjoitetaan koodi, joka vastaa lomaketietojen lähettämisestä palvelimelle ja vastauksen käsittelystä. Kopioi seuraava koodi app.js-tiedostoosi.

// Lähetä lomaketiedot AJAX:n avulla. $.ajax(( tyyppi: "POST", url: $(form).attr("toiminta"), tiedot: formData ))

Luo uusi AJAX-pyyntö käyttämällä jQueryn ajax-menetelmää. Välitimme objektin ajax-menetelmälle, joka sisältää useita ominaisuuksia, joita käytetään pyynnön mukauttamiseen. Tyyppiominaisuus määrittää HTTP-menetelmä, jota käytetään pyynnön lähettämiseen. Meidän tapauksessamme tämä on POST-menetelmä.
url-ominaisuus on lomaketietoja käsittelevän komentosarjan sijainti. Asetamme tämän ominaisuuden arvon hakemalla toiminta-attribuutti lomakkeesta. Data-ominaisuuden arvo asetetaan aiemmin luomallamme formData-muuttujalla.
Sitten sinun on käsiteltävä palvelimelta saatu onnistunut vastaus. Kopioi seuraava koodi heti ajax-kutsun sulkevan sulun jälkeen. Huomaa, että olen tarkoituksella jättänyt puolipisteet pois.

Done(function(response) ( // Varmista, että formMessages div sisältää "success"-luokan. $(formMessages).removeClass("error"); $(formMessages).addClass("success"); // Aseta teksti viestit $(formMessages).text(response) $("#name").val(""); ("" ))

Valmis-menetelmää kutsutaan, jos pyyntö valmistuu onnistuneesti. Ensin tarkistetaan, että elementti formMessage s sisältää menestysluokan. Sitten asetamme elementin tekstisisällön käyttämällä sähköpostiohjelman palauttamia tietoja. Sitten tyhjennämme kunkin lomakekentän arvot.
Viimeisessä fragmentissa JavaScript-koodi meidän on kirjoitettava, mitä pitäisi tapahtua, jos tapahtuu virhe. Kopioi seuraava koodi app.js-tiedostoosi.

Fail(function(data) ( // Varmista, että formMessages div sisältää "error"-luokan. $(formMessages).removeClass("success"); $(formMessages).addClass("error"); // Aseta viestin teksti if (data.responseText !== "") ( $(formMessages).text(data.responseText); ) else ( $(formMessages).text("Hups! Tapahtui virhe ja viestiäsi ei voitu lähettää ."); ) ));

Fail-menetelmää kutsutaan, jos sähköpostiohjelma palauttaa virheen. Tarkista ensin, että formMessages-elementti sisältää virheluokan. Sitten tarkistamme, palauttaako AJAX-pyyntö vastaustekstin. Jos näin on, aseta formMessages-elementin sisältö tekstin avulla. Muuten sitä käytetään tavallinen viesti
virheestä.

Tämä on kaikki HTML- ja JavaScript-koodi, jota tarvitaan AJAX-yhteyslomakkeen luomiseen. Seuraavassa osiossa luomme skriptin, joka vastaa lomaketietojen käsittelystä ja sähköpostin lähettämisestä.

PHP-sähköpostiohjelman luominen
Tämä yksinkertainen komentosarja on vastuussa lomaketietojen vahvistamisesta ja sähköpostin lähettämisestä. Jos tapahtuu virhe, sähköpostiohjelma vastaa asianmukaisella tilakoodilla JavaScriptin suorittamiseksi.