[RISOLTO] Allineare campi form

[Salvų]

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? 

[vales]

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

[Salvų]

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!

[vales]

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.

[Salvų]

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 

[Salvų]

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"><><>


[vales]

Controlla il codice perchč sembra ci siano delle imprecisioni tipo <> credo al posto della chiusura di alcune </div>

[Salvų]

Il codice io lo incollo correttamente, č il forum che lo fa visualizzare male...

Ora lo incollo su pastebin...

[Salvų]

Ecco il codice corretto: http://pastebin.com/rbp1Rz7f

[vales]

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>

[Salvų]

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! 

[Salvų]

Mi piacerebbe fosse pių compatto...

Cosė: http://img826.imageshack.us/img826/7277/schermata20130221alle11.png

[vales]

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;
}


[Salvų]

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?

[Salvų]

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?

[Salvų]

Tutto risolto! Grazie mille!!!