[risolto] Form contatti + descrizione + google map captcha + responsiva

[d3vi]

Come da oggetto mi serve una contact form con captcha con mappa inclusa (da usare senza google api) se è responsiva è meglio: ne conoscete per j3.2.1?
 Lo so che mi direte di cercare nel forum, su joomla.org bla bla... è quello che sto facendo da 2 giorni ma la maggior parte sono a pagamento e di quelle free alcune contengono solo form, altre form + mappa, altre non sono responsive e così via.
Suggerimenti?

[giusebos]

lo realizzi con chronoform

[d3vi]

E con chronoform posso creare form responsive con captcha e google map?

[giusebos]

lo crei personalizzato con tutto ciò che desideri, poi con i css lo rendi responsive.

[BelinBelan]

Ciao d3vi,

seve altro o va bene così?  A parte gli scherzi, Giusebos ti ha dato un buon consiglio e io lo seguirei.

Però se sei pocco avvezzo ad usare Chronoforms sappi che, a mio modesto avviso, potresti fare invece l'override del compoente Contatti standard di Joomla! questo perché:

il codice è già pronto.
devi aggiungere (se presenti) le classi "responsive" per le TEXTAREA del Form contatti.

Che template stai usando? Perché per rendere "responsiva" una form contatti devi calcolare la larghezza dei campi che andrai a popolare, io ad esempio, usando GANTRY mi sono riscritto (override) un sacco di componenti usando le classi standard del framework.

Ricapitolando, a te basta solo dare un valore "percentuale" alla larghezza delle TextArea indipendentemente dal Framework, template che stai usando :-)

[d3vi]

Ciao BelinBelan il consiglio di giusebos è importante ma non è che non sono avvezzo, il problema è che non ho tempo perchè il 31 devo consegnare e non so come devo fare, per cui mettermi a studiare chronoform non se ne parla. Per me andrebbe bene se ci fosse qualcosa di pronto ma mi sa che la strada da seguire è l'override. ma per farlo basta copiare la cartella com_contacts da component a gantry/html?

[BelinBelan]

si copi la carterlla tmpl nel suo percorso che ricostruisci sotto Gantry, metti la classe delle textarea a small o medium o xxlarge o come preferisci, salvi e fai il test e vedrai che ora stringendo lo schermo si restringeranno anche queste ultime, se hai voglia infine dai al form contatti l'aspetto "pro" che si ottiene utilizzando tutte le apposite classi CSS che Gantry stesso mette a disposizione. Tempo di esecuzione, max 30 minuti 

[d3vi]

Ma il com_contact non ha il captcha nè googlemaps che dovrei comunque aggiungere... Dato che sto usando un modulo invece del componente, se sposto la cartella da modules ad html, la overrida lo stesso?

[BelinBelan]

il componente contatti ha il captcha.

la google maps la puoi inseriee come un "iframe" usando il codice di google maps stesso.

Ti allego un contatto "gantry" responsivo come esempio. 

[allegato eliminato automaticamente dopo un anno]

[d3vi]

Overrando  ci sono quasi riuscito come m i hai suggerito.C ome posso mettere la mappa google di fianco ai campi "Nome" "Email" ecc. in modo che poi si sposti sotto in modo responsivo?

[d3vi]

Ti allego un contatto "gantry" responsivo come esempio. 

Come hai fatto a realizzarlo?

[d3vi]

metti la classe delle textarea a small o medium o xxlarge o come preferisci,

Cioè?

[BelinBelan]

Ciao D3vi,


nel sito di Gantry, nei Template gratuiti, nelle "demo" c'é sempre una pagina detta Typography che illustra le "classi" CSS e gli effetti che producono.


Se ti sposti nella sezione FORMS vedrai quanti e quali classi CSS sono previste in questo caso.


Io non ho fatto altro che aggiungere tali classi nel codice della form contatti per darle quell'aspetto "pro" previsto da chi intende usare quel tipo di Framework.


Tutto qui, niente di meno, niente di più! 

[d3vi]

Grazie per i preziosi consigli ma ho risolto in questo modo:
1. ho overridato il com_contact e personallizzato, inserendo la desrizione nel file default.php;
2. per il captcha ho attivato il plugin recaptcha;
3. per la google maps: nel file default_forms.php ho inserito sia l'iframe sia la form in due div con rispettivamente float: left e float: right; in questo modo sono diventati responsivi nel senso che sui monitor stanno affiancati mentre sui display mobili sono in colonna.
Sono bravino eh?    Chi si loda da solo non vale un fagiuolo... 
L'unico scoglio è spero che piaccia al cliente sennò tanto lavoro buttato via... 
Grazie a tutti.

[BelinBelan]

Ottimo!!! ricordati di mettere [risolto] nel titolo di questo topic