Hvordan bygge et responsivt kontaktskjema med PHP

Kontaktskjemaer brukes ofte i webapplikasjoner fordi de lar besøkende på nettstedet kommunisere med eieren av nettstedet. For de fleste nettsteder kan responsive kontaktskjemaer enkelt nås fra forskjellige typer enheter som stasjonære maskiner, bærbare datamaskiner, nettbrett og mobiltelefoner.

I denne opplæringen implementeres et responsivt kontaktskjema, og de innsendte dataene sendes som en e -post ved hjelp av PHP. Phpmailer -pakken brukes i denne opplæringen for å sende kontaktmeldingen som en e -post til nettstedseieren; Tre filer brukes til å sende e -posten fra Localhost ved hjelp av PHP:

1. Phpmailerautoload.PHP
2. klasse.Phpmailer.PHP
3. klasse.SMTP.PHP

Du kan laste ned disse filene fra https: // github.com/phpmailer/phpmailer/.

Opprette det responsive kontaktskjemaet

Bruk koden nedenfor for å opprette en indeks.HTML -filen i /var/www/html/php mappe for å designe et responsivt kontaktskjema. Skjemaet vil inneholde fire felt: Navn, E -post, Årsak til kontakt og Beskjed.

indeks.html

KONTAKT SKJEMA

Fullt navn*







E -post*







Årsak til kontakt*







Beskjed*

Kjør følgende URL fra hvilken som helst nettleser for å vise kontaktskjemaet:
http: // localhost/php/contactform/

Opprett en JS -fil for validering og innlevering av skjema

Bruk koden nedenfor for å opprette en JS -fil som heter kontakt.JS For å validere kontaktskjemaet. Her er alle felt obligatoriske, og e -postfeltet må inneholde en gyldig e -postadresse. Hvis SENDE MELDING Knappen trykkes når det er et tomt felt eller en ugyldig e -postadresse, så vises en feilmelding. Hvis skjemaet er validert riktig, vil skjemaets data bli sendt til kontakt.PHP bruker Ajax () metode. Hvis dataene fra kontaktskjemaet sendes vellykket, vil en suksessmelding bli skrevet ut; ellers. En feilmelding vil bli skrevet ut som et varsel.

kontakt.JS

$ (funksjon ()
// sjekk validatorfeilene
$ ('#cform').Validator ();
// etter skjemainnleveringen
$ ('#cform').på ('Send', funksjon (e)
// Hvis validatoren ikke forhindrer skjemaet sendes inn
hvis (!e.isDefaultPrevented ())
var url = "Kontakt.php ";
// POST VERDIER I BAKGRUNNEN Skriptets url
$.Ajax (
Type: "Innlegg",
URL: URL,
Data: $ (dette).Serialize (),
Suksess: Funksjon (data)

var Successalert = '×' + Data + '';
$ ('#msg').HTML (Successalert);

);
return falsk;

)
);

Opprett en PHP -fil for å lese skjemaets data og sende en e -post

Bruk koden nedenfor for å opprette en PHP -fil som heter kontakt.PHP For å lese skjemadataene og sende en e -post med dataene ved hjelp av Phpmailer -pakken. Her brukes SMTP -serveren til Gmail -kontoen til å sende en e -post. Du må aktivere mindre sikker app Alternativ for å sende en e -post ved hjelp av Gmail. Angi Gmail -adressen din som Brukernavn og passordet ditt som Passord i koden. Bruk en gyldig e -postadresse for mottaker for å erstatte 'Mottaker e -postadresse'. Hvis autentisering gjøres riktig, blir e -posten sendt vellykket. En melding som formidler suksess eller fiasko vil bli returnert til JS -filen fra PHP -filen.

kontakt.PHP

// inkluderer nødvendig skript
krever 'phpmailerautoload.php ';
// Lag et objekt
$ mail = new Phpmailer ();
// Aktiver SMTP
$ mail-> issMtp ();
$ mail-> smtpauth = true;
// Aktiver sikker overføring
$ mail-> smtpsecure = 'tls';
// $ mail-> smtpautotls = falsk;
// Sett SMTP vertsnavn
$ mail-> host = 'smtp.Gmail.com ';
// Angi SMTP -port
$ mail-> port = 587;
// Sett opp følgende konfigurasjon for SMTP -godkjenning
$ mail-> smtpoptions = array (
'SSL' => Array (
'Verify_peer' => falsk,
'verify_peer_name' => falsk,
'tillater_self_signed' => true
)
);
// Angi Gmail -e -postadressen din som SMTP -brukernavn
$ mail-> brukernavn = 'gmail adresse';
// Angi e -postpassordet ditt som SMTP -passord
$ mail-> passord = 'gmail p';
// angi avsenderadressen
$ mail-> setfrom ($ _ post ['e-post'], $ _post ['name']);
// angi svaradressen
$ mail-> addReplyTo ($ _ post ['e-post']);
// angi mottakeradressen
$ Mail → AddAddress ('mottaker e -postadresse');
// angi emnet for e -posten
$ mail-> emne = $ _post ['grunn'];
// Angi meldingen til e -posten
$ mail-> body = $ _post ['melding'];
// Ring send () -funksjonen for å sende e -posten
if ($ mail-> send ())
Echo 'melding er sendt.';
annet
Echo 'Mailer Feil:' . $ mail-> errorInfo;
// ekko 'feil ved å sende melding';

?>

Kjør nettadressen som er nevnt ovenfor, fyll ut skjemaet med riktige data og klikker på SENDE MELDING knapp for å sende inn skjemaet etter validering.

Hvis skjemaet ble sendt riktig og e -posten ble sendt til mottakeren, vises følgende melding øverst i skjemaet for å informere brukeren om at meldingen ble sendt riktig.

Konklusjon

I denne opplæringen designet vi en enkel responsiv form og sendte en e -post med skjemadata fra localhost ved hjelp av PHP -kode. Kontaktskjemaet er en essensiell del av ethvert nettsted fordi det lar besøkende nå ut til eieren av nettstedet for å koble til eller stille spørsmål. Feltene i skjemaet kan variere basert på kravene til nettstedet.