Back to top

Autore Topic: [RISOLTO] Allineare campi form  (Letto 9926 volte)

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
[RISOLTO] Allineare campi form
« il: 19 Feb 2013, 18:31:33 »
Ciao a tutti  :)

ho un problema che finora non sono riuscito proprio a risolvere con i campi di Chronoform.

Sul mio sito, come potete vedere (http://www.bagheriabenecomune.org/index.php?option=com_content&view=article&id=106&Itemid=195), ho un form di chronoforms allineato a sinistra con un campo per riga.

Io invece vorrei realizzare una cosa del genere (http://imageshack.us/photo/my-images/20/allegato1e.png/) ovvero due campi per riga e vorrei che questo allineamento rimanga invariato in proporzione anche guardando il sito dai dispositivi mobili.

C'č qualcuno che sa darmi una mano?  :'(
« Ultima modifica: 24 Feb 2013, 11:18:53 da Salvų »

Offline vales

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8012
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #1 il: 20 Feb 2013, 19:34:52 »
Se usi la versione di V4 di chronforms nei campi trovi varie opzioni da settare, fra queste quella che permette l'allineamento orizzontale dei campi.

Fra le opzioni dei campi nella tab Other trovi Start a Multi field row con essa si da inizio all'allineamento orizzontale dei campi. Quindi al primo campo da allineare setti questa opzione.

Per i campi successivi da allineare (in genere due) setti invece Add to a Multi field row.

Per allineare una nuova riga ripeti la stessa procedura.

Per guadagnare spazio puoi mettere l'etichetta sopra il campo e non alla sua sinistra settando l'opzione  Label Over
Download e demo di Albo Pretorio On Line per Joomla 1.5 e Joomla 2.5 e 3
Moduli scuola On Line v1 per Joomla 3
http://valesweb.altervista.org

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #2 il: 20 Feb 2013, 19:41:08 »
Ciao Vales  :)

grazie per l'aiuto. Allora, ho seguito alla lettera le tue indicazioni e come puoi vedere tu stesso sono riuscito ad inserire due campi per riga...

Ho altri due problemi:

1. Come allineo i campi "Nome", "Cognome", "Email" e "Telefono" esattamente centrali rispetto al testo "premendo il pulsante "sono un volontario" dichiari di aver letto ecc...?  :'( :'(

2. Inoltre, come faccio a togliere questo fastidiosissimo grassetto da questo testo?  :'( :'(

Grazie mille!

Offline vales

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8012
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #3 il: 20 Feb 2013, 19:56:16 »
Credo che il grassetto lo prendanda dal css del template quindi dovresti inserire un css personalizzato nel form che corregge l'impostazione di default.

Per l'allineamento centrale una volta definito il form agirei nel codice html generato da chronform nella tab code che vedi cliccando sul nome del form.

Dovrebbero esserci delle div che contengono le righe dei campi allineati. A quelle div imposti l'allineamento centrale.

Fatto questo nella dropdown sopra il codice devi mettere Custom al posto di Wizard.
Download e demo di Albo Pretorio On Line per Joomla 1.5 e Joomla 2.5 e 3
Moduli scuola On Line v1 per Joomla 3
http://valesweb.altervista.org

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #4 il: 20 Feb 2013, 20:00:45 »
Sono contento che si possa risolvere questo problema!!!  :) 

E' l'unica cosa che mi manca prima di poter inaugurare questa nuova versione del sito  :)

Purtroppo perō ti devo chiedere maggiori info perché non saprei da dove iniziare  :'( :'(

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #5 il: 20 Feb 2013, 20:25:54 »
Questo č l'Html code del form "Aderisci":

Codice: [Seleziona]

<div class="ccms_form_element cfdiv_text label_over multiline_start" id="input_text_11_container_div" style=""><label>Nome*</label><input maxlength="150" size="25" class=" validate['required']" title="" type="text" value="" name="input_text_1" />
<div class="clear"><><div id="error-message-input_text_1"><><><div class="ccms_form_element cfdiv_text label_over multiline_add" id="input_text_21_container_div" style=""><label>Cognome*</label><input maxlength="150" size="25" class=" validate['required','alphanum']" title="" type="text" value="" name="input_text_2" />
<div class="clear"><><div id="error-message-input_text_2"><><><div class="ccms_form_element cfdiv_text label_over multiline_start" id="input_text_31_container_div" style=""><label>E-mail*</label><input maxlength="150" size="25" class=" validate['required','email']" title="" type="text" value="" name="input_text_3" />
<div class="clear"><><div id="error-message-input_text_3"><><><div class="ccms_form_element cfdiv_text label_over multiline_add" id="input_text_51_container_div" style=""><label>Telefono</label><input maxlength="150" size="25" class=" validate['number']" title="" type="text" value="" name="input_text_5" />
<div class="clear"><><div id="error-message-input_text_5"><><><div class="ccms_form_element cfdiv_header" id="1_container_div" style=""><p style="text-align: justify;">Premendo il pulsante "Sono un volontario" dichiari di aver letto e approvato <strong><span style="color: #ed691d;"><a href="index.php?option=com_content&amp;view=article&amp;id=107:privacy&amp;catid=2:uncategorized"><span style="color: #ed691d;">l'informativa sulla privacy</span>[/url]</span></strong> e riceverai la Newsletter di Bagheria Bene Comune con tutte le ultime notizie e le informazioni utili pių recenti.</p><div class="clear"><><><div class="ccms_form_element cfdiv_submit" id="10_container_div" style="text-align:center"><input name="SONO UN VOLONTARIO" id="10" class="" value="SONO UN VOLONTARIO" type="submit" />
<div class="clear"><><div id="error-message-SONO UN VOLONTARIO"><><>

Offline vales

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8012
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #6 il: 20 Feb 2013, 21:43:08 »
Controlla il codice perchč sembra ci siano delle imprecisioni tipo <> credo al posto della chiusura di alcune </div>
Download e demo di Albo Pretorio On Line per Joomla 1.5 e Joomla 2.5 e 3
Moduli scuola On Line v1 per Joomla 3
http://valesweb.altervista.org

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #7 il: 20 Feb 2013, 21:47:48 »
Il codice io lo incollo correttamente, č il forum che lo fa visualizzare male...

Ora lo incollo su pastebin...
« Ultima modifica: 20 Feb 2013, 21:49:58 da Salvų »

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #8 il: 20 Feb 2013, 21:49:32 »
Ecco il codice corretto: http://pastebin.com/rbp1Rz7f

Offline vales

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8012
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #9 il: 20 Feb 2013, 22:49:21 »
Dovrebbe andare pių o meno cosė

Codice: [Seleziona]
<div style="width:550px; margin: 0 auto;">
<div class="ccms_form_element cfdiv_text label_over multiline_start" id="input_text_11_container_div" style=""><label>Nome*</label><input maxlength="150" size="25" class=" validate['required']" title="" type="text" value="" name="input_text_1" />
<div class="clear"></div><div id="error-message-input_text_1"></div></div><div class="ccms_form_element cfdiv_text label_over multiline_add" id="input_text_21_container_div" style=""><label>Cognome*</label><input maxlength="150" size="25" class=" validate['required','alphanum']" title="" type="text" value="" name="input_text_2" />
<div class="clear"></div><div id="error-message-input_text_2"></div></div>
</div>
<div style="width:550px; margin: 0 auto;">
<div class="ccms_form_element cfdiv_text label_over multiline_start" id="input_text_31_container_div" style=""><label>E-mail*</label><input maxlength="150" size="25" class=" validate['required','email']" title="" type="text" value="" name="input_text_3" />
<div class="clear"></div><div id="error-message-input_text_3"></div></div><div class="ccms_form_element cfdiv_text label_over multiline_add" id="input_text_51_container_div" style=""><label>Telefono</label><input maxlength="150" size="25" class=" validate['number']" title="" type="text" value="" name="input_text_5" />
<div class="clear"></div><div id="error-message-input_text_5"></div></div>
</div>
<div class="ccms_form_element cfdiv_header" id="1_container_div" style=""><p style="text-align: justify;">Premendo il pulsante "Sono un volontario" dichiari di aver letto e approvato <strong><span style="color: #ed691d;"><a href="index.php?option=com_content&amp;view=article&amp;id=107:privacy&amp;catid=2:uncategorized"><span style="color: #ed691d;">l'informativa sulla privacy</span></a></span></strong> e riceverai la Newsletter di Bagheria Bene Comune con tutte le ultime notizie e le informazioni utili pių recenti.</p><div class="clear"></div></div><div class="ccms_form_element cfdiv_submit" id="10_container_div" style="text-align:center"><input name="SONO UN VOLONTARIO" id="10" class="" value="SONO UN VOLONTARIO" type="submit" />
<div class="clear"></div><div id="error-message-SONO UN VOLONTARIO"></div></div>
Download e demo di Albo Pretorio On Line per Joomla 1.5 e Joomla 2.5 e 3
Moduli scuola On Line v1 per Joomla 3
http://valesweb.altervista.org

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #10 il: 20 Feb 2013, 23:12:09 »

Alla fine, abbiamo deciso di mettere i campi con questa disposizione:

Pagina Aderisci: http://www.bagheriabenecomune.org/aderisci

Pagina Le tue proposte: http://www.bagheriabenecomune.org/inviaci-le-tue-proposte

Pagina Newsletter: http://www.bagheriabenecomune.org/newsletter

Volevo chiederti, come faccio a ridurre gli spazi che chronoform crea? Vorremmo qualcosa di pių compatto...

Inoltre, nella pagina "Le tue proposte", come faccio ad allineare il campo messaggio come il campo nome ed email? Vorrei che partisse sempre da sinistra...

Infine, come faccio a togliere in tutti e tre form quel fastidiosissimo grassetto?

Spero di non chiedere troppo!  :)
« Ultima modifica: 22 Feb 2013, 21:33:02 da Salvų »

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #11 il: 20 Feb 2013, 23:22:17 »
« Ultima modifica: 21 Feb 2013, 11:59:36 da Salvų »

Offline vales

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8012
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #12 il: 23 Feb 2013, 09:51:38 »
Prova ad inserire un'action CSS con codice tipo questo

Codice: [Seleziona]
.ccms_form_element {
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 0;
}
.ccms_form_element label {
    font-weight: normal;
}
« Ultima modifica: 23 Feb 2013, 09:59:32 da vales »
Download e demo di Albo Pretorio On Line per Joomla 1.5 e Joomla 2.5 e 3
Moduli scuola On Line v1 per Joomla 3
http://valesweb.altervista.org

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #13 il: 23 Feb 2013, 11:45:32 »
Ciao Vales  :)

Grazie ai codici che mi hai dato, ora il form č compatto come volevo!  :)

Il grassetto non se ne andava ma con firebug ho individuato una regola sul file frontform.css e sono andato a modificarlo da li!  :)

Ho tutto ciō che volevo e ti ringrazio!  :)  Solo un'ultima cosa: secondo te č possibile mettere una proporzione nei form? Perché ho notato che da cellulare ad esempio le proporzioni non si mantengono e tutto si confonde...

Oppure anche su diversi browser non č lo stesso...

Si puō mettere una proporzione?

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #14 il: 23 Feb 2013, 12:06:14 »
Ah dimenticavo... per lasciare 1px di spazio tra l'ultimo campo e il testo che parla dell'informativa sulla privacy, quale delle regole che mi hai dato devo modificare?

Offline Salvų

  • Appassionato
  • ***
  • Post: 387
  • Sesso: Maschio
    • Mostra profilo
Re:Allineare campi form
« Risposta #15 il: 23 Feb 2013, 15:28:27 »
Tutto risolto! Grazie mille!!!  :)
« Ultima modifica: 24 Feb 2013, 11:18:39 da Salvų »

 



Web Design Bolzano Kreatif