Forma zvorotny zv'yazok modx evo style. Crea una richiesta di aiuto FormIt. Reindirizzato al lato della vikonanny di successo

Zvorotniy zv'azok

[+messaggio di convalida+]

Il tuo nome

E-mail: e-mail:email:1" />

Argomento

Richiesta di informazioni
Supporto tecnico
proposizione

Testo di avviso

Inserisci il tuo codice:

De [+messaggio di convalida+]- vodpovidaє per vivendennya voіdomlenya sul perdono delle forme nadsilannya dell'ora zapovnennya.
azione="[~[*id*]~]- indica che il modulo sarà quel lato, de chiamando lo snippet. Sostituisci [~[*id*]~] MODX Invia l'URL del documento in streaming.
Specificare l'identificatore del modulo, che possiamo indicare l'ora del commento dello snippet.
chiave di accesso all'etichetta- Installa l'accesso agli elementi del modulo per ulteriori pulsanti di scelta rapida.
eform="Indirizzi email:email:1"- descrivere il campo per l'inserimento dell'indirizzo postale, indicare il tipo di dati da inserire e assicurarsi che il campo sia vincolante per l'inserimento. Infine, il template per la compilazione del parametro offensivo: eform="[descrizione campo]:[tipo di dati da inserire]:[tipo di campo dati da inserire]:[informazioni per la grazia all'inserimento]:[regola di riscrittura l'entrata]" . Ale, abbiamo più di tre valori. Allo stesso modo, eform="Im'ya::1" viene compilato nel parametro th.
[+verimageurl+] garantisci il captcha.

Creiamo un pezzo dalle notifiche sulle notifiche

Crea pezzo grazie-tpl

Dyakuyu, scho si è precipitato sotto forma di zvorotnoy zv'yazku sul nostro sito.

La tua introduzione verrà esaminata nel più breve termine e, di fatto, la porterai fuori dalla lingua.

Informazioni aggiornate:

• Il tuo nome:[+autore+]


• La tua email:[+e-mail+]


• Testo avviso:[+testo+]

Creiamo un pezzo con il modulo della notifica inviata

Crea pezzo rapporto-tpl e nello yoga invece di usare il seguente codice:

Questo avviso gli è stato inviato dall'impiegato [+autore+] per un ulteriore modulo di chiamata di ritorno.

Nome:	[+autore+]
E-mail::	[+e-mail+]
Appunti:	[+testo+]

In questa occasione, come in quella precedente, tutte le informazioni immesse in forma abbreviata vengono trasmesse con un segnaposto aggiuntivo nella forma [+autore+]. In questo caso il nome dello skin segnaposto è ricavato dal valore dell'attributo name del campo variabile nella forma del link di ritorno (name="author", name="email" name="text" ).

Creiamo un pezzo dal viklikom forma un collegamento vorticoso

Crea un pezzo per im'yam modulo e metti lì una costruzione:

[! modulo elettronico? &formid=`Invia` &tpl=`form-tpl` &to=` [email protetta],[email protetta],[email protetta]` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Segnala al mio sito`!]

De &formid=`Invia`- identificatore del modulo, che abbiamo specificato nei canti form-tpl
&tpl=`form-tpl`- un modello per formare uno zvorotny zv'yazka
&a=` [email protetta],[email protetta],[email protetta]` - Indirizzi email per ulteriori informazioni
&mailselector=`dipartimento`- impostare il campo modulo da utilizzare nella scelta di un unico indirizzo dalla lista dell'indirizzo delle distribuzioni a cui (,) accanto al parametro &a. La nostra mente ha una lista di cosa vedere y chanci form-tpl, de Dipartimento priymaє znachennya 1.2 chi 3, maggese con obranoї vіdvіduvachem quelli.
&report=`report-tpl`- un modello di informazioni che viene applicato
&grazie=`grazie-tpl`- informazioni su cosa fare dopo la somministrazione dei dati
&vercode=`1`- Includere il codice di verifica. Il modello è responsabile del campo di verifica e del segnaposto [+vercode+].
&subject=`Informazioni sul mio sito`- il tema della podomlennya, cosa si sta rafforzando

Si prega di utilizzare il wiki per creare un collegamento di ritorno al modello

Crea pezzo contatto, in qualsiasi modo il codice successivo sia:

il nostro indirizzo

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



Email: ххххх@ххххх.ххх

Ufficio Addendum

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



Email: ххххх@ххххх.ххх

((modulo))

Sul lato Contatti, posizioniamo il blocco contacty contacty:

((contatto))

Cambiare gli stili

Conosciamo le descrizioni dei nostri pulsanti nel file con gli stili:

margine sinistro: 108px;
imbottitura: 5px 10px;
sfondo: #cece;
bordo: 1px solido #888888;
}

Attraverso quelle che abbiamo inserito iscrizioni russe ai pulsanti Nadislat e Throw, il fetore è stato distrutto. Un'altra cosa non è adatta, che quando il cursore è posizionato sopra il pulsante, la vista del cursore non cambia, voglio aggiustarlo. Per prima cosa, facciamo in modo che il pulsante cambi il colore quando si passa il cursore sopra. Bene, rompiamo il captcha a destra. Otzhe, invece di descrivere lo stile, che ho creato io, possiamo inserire l'asse di cosa:

#contact_form form.submit_btn (
margine sinistro: 55px; /*Cambia l'accesso sinistro per i pulsanti*/
imbottitura: 5px 10px;
sfondo: #cece;
bordo: 1px solido #888888;
}
#modulo_contatto .submit_btn:hover (
margine sinistro: 55px;
imbottitura: 5px 10px;
sfondo: #505050; /* Specificare il colore del pulsante quando si passa sopra il cursore */
bordo: 1px solido #888888;
colore: #fff; /* Minimizza il colore del testo */
cursore: puntatore; /*Cambia l'aspetto del cursore*/
}
#modulo_contatto img(
imbottitura: 0 0 0 90px; /*schiaccia l'immagine con il codice a destra*/
}

Yakscho all zrobili correttamente, la forma di uno sguardo offensivo:

Ora proviamo a compilare il form e ad inviare il foglio. Oskіlki mi vikoristovuemo server locale, tutte le foglie di cui hai bisogno, puoi ammirare il papato C:\xampp\tmp\sendmail\ . Ricordi, abbiamo creato questa cartella per l'ora di installazione di XAMPP?

Puoi impostare il tuo elenco di parole da risolvere in captcha, prova sul lato della configurazione del sistema Strumenti >> Configurazione >> Koristuvachі >> Parole per creare codici CAPTCHA :

Su questo sito, l'integrazione del design del nostro sito web MODX è quasi completa. Abbiamo perso il nostro sito sul mio hosting. Prendiamoci cura di Tsim mi alla prossima lezione.

Durante la compilazione della lezione, abbiamo raccolto materiali dal sito

Ho già alcune lezioni su come creare moduli su FormIt al link - al link del link - come un vantaggio: correggere i moduli senza riadattarli, є vykno, cosa canti, cosa è stata inviata la notifica, ecc. Bene, e ovviamente svantaggi: il codice viene aggiunto js i file css che dà un meno alla velocità e il js renderizzato non ha bisogno di un tipo per un wiki, attraverso quello nuovo il validatore mostra un forward - in html 5 non è necessario mostrarlo.

Pertanto, io virіshiv robiti si forma su FormIt puro, la stessa lezione di oggi.

Il markup HTML del modulo alla volta può essere seguito dal codice seguente:

Niente di speciale, quindi sposta lo standard con il markup bootstrap 4.

[[!FormIt? &hooks=`spam,email` &emailTpl=`email-tpl` &emailTo=`[[++emailsender]]` &emailSubject=`Foglio dal sito [[++site_url]]` &validate=`workemail:blank,name:required , email:email:richiesto,messaggio:richiesto:stripTags,telefono:richiesto` &successMessage=`

Dyakuyu, il tuo animale è stato mandato.

` ]] [[!+fi.successMessage:default=``]]

Il tuo nome*: [[!+fi.nome.errore]]

Il tuo numero di telefono*: [[!+fi.error.telefono]]

La tua email*: [[!+fi.error.email]]

Appunti: [[!+fi.messaggio.errore]]

Nadislati

Analizzando il codice, andiamo alla bestia in fondo:

&hooks - qui vengono aggiunti diversi hook, inclusi quelli scritti da sé: il nostro viewpad ne ha 2 standard: Schermata postale. A proposito di reshta khukiv, riporto sul video.

&emailTpl - un pezzo del layout di pagina, potrebbe essere il seguente codice:

Tipo di persona: [[+nome]]

Telefono: [[+telefono]]

E-mail: [[+e-mail]]

Notifiche: [[+messaggio]]

&emailTo - indirizzi e-mail, in cui i moduli vengono sostituiti, in a questo particolare tipo ordinato aggiustamento sistemico(chiave) ++mittente di posta elettronica

&emailSubject - l'oggetto del foglio che viene applicato

&validate - campi della lingua personalizzati per il riempimento e spesso campi per la protezione dallo spam

&successMessage - notifica dopo un superamento riuscito

Non analizzerò il codice del modulo, chi se ne frega del video e leggo la documentazione: docs.modx.com/extras/revo/formit

File allegati al modulo

Per poter allegare e modificare l'allegato è necessario scrivere nel tag del modulo

Enctype="multipart/form-data"

ed è necessario aggiungere campi per allegare un file

Caselle di controllo e opzione di elaborazione

Dekіlka si forma su un lato

Basta scrivere nei wiki della forma della pelle

&submitVar='Sono in forma inglese'

la forma della pelle ha il suo nome.

Combatti contro lo spam

Non dirlo, ma stai decisamente spammando modo efficiente per combatterlo - così puoi provarlo tu stesso.

Praticamente su tutti i siti commerciali è presente una pagina dei contatti, su cui è inserito un form di contatto, attraverso il quale è possibile scrivere l'amministrazione del sito. Oggi vedremo come creare rapidamente un modulo di contatto. Implementare il modulo di una chiamata di ritorno per chiedere aiuto al pacchetto formato al link con il pacchetto Modulo Ajax, installali, come se la puzza non fosse stata installata.

La creazione del modulo di collegamento di ritorno su MODX Revo con il consenso al trattamento dei dati personali è soggetta alla legge n. 152-FZ "Sui dati personali" del 27.07.2006.

Creiamo prima un pezzo, per salvare il modulo stesso, non mettiamo il blocco "modulo di contatto" e mettiamo il modulo standard nel nuovo codice, lavoro principalmente sul sito con wiki bootstrap, quindi prenderò il preparazione standard dei troch e rifarlo, її il codice statico sarà così:

Adatto al trattamento dei dati personali

Koristuvalnytska zona

Nadislati

Il tuo vecchio aspetto sarai sorpreso che la mia forma sia stilizzata per il progetto, stili CSS vikladati non bachu sensu.

Axis qui puoi guardare oltre altri moduli getbootstrap.com/css/#forms

E ora possiamo ricostruire il codice in modo dinamico con una sintassi migliorata formatoі Modulo Ajax, Seguilo passo dopo passo.

[[+fi.nome.errore]]

[[+fi.email.errore]]

[[+fi.error.pfone]]

[[+fi.messaggio.errore]]

Adatto al trattamento dei dati personali
[[+fi.error.opd]]

Autorizzo il trattamento dei miei dati personali ai sensi della legge n. 152-ФЗ "Sui dati personali" del 27/07/2006 e accetto la mente

Nadislati[[+fi.success:is=`1`:then=`

[[+fi.successMessage]]

`]] [[+fi.validation_error:is=`1`:then=`

[[+fi.validation_error_message]]

`]]

Ora creiamo un altro pezzo, un foglio di modulo, chiamiamolo tpl-contact-form con il prossimo:

Nome: [[+nome]]

E-mail: [[+e-mail]]

Telefono: [[+pfone]]

Notifiche: [[+messaggio]]

Bene, è diventato necessario coltivare visnovok nel posto necessario:

[[!AjaxForm? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email` &emailSubject=`Avviso sito [[++site_url]]` &emailTo=` [email protetta]` &validate=`name:required,email:required` &validationErrorMessage=`Form in attesa di grazia!` &successMessage=`Notifica inviata con successo!` ]]

Non dimenticare di modificare il valore invia una email a alla tua posta.

Documentazione dei componenti:

1. FormIt — docs.modx.com/extras/revo/formit
2. Modulo Ajax — docs.modx.pro/components/ajaxform

Asse di principio e tutto!

Lezione su come osservare la formazione del cancello in CMF MODX Revo soluzione, componenti vittoriosi, AjaxForm e FormIt.

Assegnazione di componenti a FormIt e AjaxForm

FormIt è un componente (snippet) per MODX Revolution, incarichi di gestione dei moduli lato server. È possibile modificare i campi del modulo (convalida) prima figli lontani, proteggere il sito dall'eliminazione dello spam, modificare i dati del modulo via e-mail, salvare una copia dei moduli compilati, impostare un reindirizzamento su un altro lato (ad esempio, dopo un invio corretto del modulo all'e-mail), disabilitare la funzione di invio automatico e altro .

Ma per lavorare con FormIt tramite AJAX, devi modificare componente additivo ajaxform.

Il principio della formazione robotica di un legame sano

Prima di passare allo sviluppo del collegamento MODX Revolution, diamo un'occhiata all'algoritmo di base del suo lavoro.

Dopo aver inserito il lato finale con il modulo (vengono presi dal blocco specificato nel parametro &form della chiamata dello snippet AjaxForm quando il lato viene formato sul server), quindi procedi alla finale. Dopo aver completato il caricamento, fai clic sul pulsante "Invia" e sul componente AjaxForm ( codice JavaScript) invialo al server per la guida di AJAX. Sul server, il componente esegue lo snippet FormIt e passa i dati del modulo. Dopo aver raccolto i dati, lo snippet FormIt viene formato come conferma, poiché viene trasmesso al cliente tramite il componente AjaxForm e visualizzato a lato della pagina. Vidpovіd può essere positivo (significa che il modulo ha superato la convalida e, ad esempio, i dati sono stati inviati correttamente alla posta) o negativo (ad esempio, quando il modulo è stato completato, il coristuvach è stato graziato).

Forma di creazione uno zvorotnyy zvezku

Per la creazione della sagoma del cancello MODX Revolution, è necessario legare i seguenti passaggi principali:

Diamo un'occhiata alle sezioni 2 e 4 della relazione.

Creazione di moduli HTML in Chanzi

La creazione del modulo HTML del collegamento di callback può essere creata copiando inoltre il modello tpl.AjaxForm.example. Ad esempio, aggiungiamo il blocco copiato denominato tpl.AjaxForm. Questo pezzo è già pronto per creare un modulo HTML composto da 3 campi: Nome, E-mail e Messaggio. Le principali divisioni, che richiedono un lavoro con il modulo, saranno principalmente portate all'aggiunta di nuove categorie o all'eliminazione di quelle essenziali. Sotto la categoria, intendiamo il gruppo di elementi correlati tra loro: label (label), elemento form (input, select, textarea) ed elemento span (occhiolino per la visualizzazione della convalida dell'indulto).

Punti principali:

• Testo etichetta (elemento etichetta). Chiamata da prendere o dal dizionario (per siti bugatonici) o da indicare senza intermediari per il testo aggiuntivo.
• L'elemento span è responsabile dell'attributo della classe padre del valore di error_name , nel qual caso la frase del nome dovrebbe essere cambiata nel valore dell'attributo del nome dell'elemento del modulo, per un certo ordinamento.

Rispetto: placeholder [[+fi.name]] come valore dell'attributo value dell'elemento form del [[+fi.error.name]] poiché il contenuto dell'elemento span è rilevante solo per il lavoro FormIt classico, questo è. senza AJAX. Il fetore è vittorioso per aver riempito il modulo con ripetuti potenziamenti al fine di salvare il valore dell'introduzione della coristuvachy e sembrare un perdono di convalida.

Ad esempio, dodamo dentro Modulo HTML Campo di inserimento numero di telefono:

Il risultato di questo blocco ha il seguente codice HTML:

sono io*

E-mail*

Telefono

Avviso*

Chiaro Nadislati

Creazione di un codice per vendicare lo snippet AjaxForm

Vіdkrivaєmo template, quale risorsa vikoristovuvatime e inserisci il codice, che dovrebbe essere tutto zdіisnyuvati.

[[!AjaxForm? &form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm,email` &emailSubject=`Notifica di prova` &emailTo=` [email protetta]`&emailDa=` [email protetta]` &emailTpl=`tpl.email` &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^` &validationErrorMessage=`Form in attesa di grazia!` &successMessage=`Notifica inviata con successo` ] ]

Diamo un'occhiata ai parametri principali:

• &form - Rispondi per un pezzo per spazzare un modulo (tpl.AjaxForm).
• &snippet - snippet che completa il modulo (FormIt).
• &hooks – hook per concatenare lo snippet di FormIt dopo una riscrittura riuscita del modulo (1 - FormItSaveForm, 2 - email). Gli hook sono script che vengono avviati dopo la convalida del modulo. Le puzze sono ordinate da chi e vengono lanciate in sequenza una per una. Come se in uno di loro ci fosse il perdono, gli altri non iniziano. Questa classe vittoriana ha 2 ganci. Aggancia le assegnazioni di FormItSaveForm per salvare i moduli nel database. Hook per le assegnazioni e-mail per forzare i moduli di dati a inviare e-mail.
• &emailSubject, &emailTo, &emailFrom, &emailTpl - Parametri per l'hook del tag email. Sono designati per l'inserimento tramite gli argomenti del foglio (&emailSubject), l'indirizzo di modifica (&emailTo), l'intestazione From (&emailFrom), il modello del foglio (&emailTpl).
• &validate è un parametro che dipende dal valore della convalida del modulo. Il valore del parametro è un elenco di elementi divisi tra loro da zolle. L'elemento in pelle è composto dal nome dell'elemento della forma (che è necessario per riverberare) e dalle regole (per la maggior parte), divise tra loro per il segno aggiuntivo del doppio. Ad esempio, il validatore name:minLength=^2^ verifica che il campo del nome sia lungo almeno 2 caratteri. Il validatore email:email:required controlla che il campo mail non corrisponda all'indirizzo email. Puoi conoscere le regole di base per la creazione di validatori nella pagina "Convalida FormIt".
• &validationErrorMessage - per vendicare un perdono, come se fosse mostrato, come se il modulo avesse un perdono.
• &successMessage - notifica, se vuoi chattare con un koristuvach, se la notifica verrà inviata correttamente.

Mi è appena mancato la creazione di un blocco tpl.email, che è un buon modello per un foglio.

Consiglio

Tipo di persona: [[+nome]]

E-mail: [[+e-mail]]

Telefono: [[+telefono]]

Notifiche: [[+messaggio]]

MODX - Chunk tpl.email

Uvaga: per vedere il valore dei campi, forma dei segnaposto visivi.

Dimostrazione della forma robotica di un informatore

I principali momenti e ore di lavoro con l'aiuto di tali immagini verranno mostrati sotto forma di un collegamento laterale.

MODX - Modulo di collegamento di ritorno che non ha superato la convalida