Page 1 of 1

[OPGELOST] template formbuilder

Posted: Wed Jan 18, 2012 4:13 pm
by rodeto
Ik heb een nieuw formulier toegevoegd en alles netjes gestyled zoals ik het hebben wil. Wat ik echter niet voor elkaar krijg is om twee invulvelden naast elkaar te krijgen.
Ik heb nu zes velden die ingevuld moeten worden en die staan nu gewoon onder elkaar met de titel linksboven. Ik wil deze zes velden nu in twee blokken van drie laten verschijnen.
Iemand enig idee hoe ik dit kan doen?

Re: template formbuilder

Posted: Thu Jan 19, 2012 3:25 pm
by stv
Dit lijkt me een css verhaal. Je kan per fielditem een css class meegeven. Kijk even in dit voorbeeld. Wellicht dat je hier iets aan hebt.

http://jsfiddle.net/htFcW/

Re: template formbuilder

Posted: Thu Jan 19, 2012 3:32 pm
by rodeto
Ja, klopt. Maar als ik dat in een template wil verwerken dan wordt elke entry maar één keer gegeven. Als ik deze in een apart <div> stop dan geldt dat voor elke entry en komen ze nog onder elkaar.
Op welke wijze kan ik dan de ene entry (naam en invulveld) links laten komen en de andere entry (naam en invulveld) rechts?

Re: template formbuilder

Posted: Thu Jan 19, 2012 3:43 pm
by stv
Je hoeft niks in je template/formuliersjabloon aan te passen. Onder geavanceerde instellingen van een willekeurige veldnaam (bijv. naam) kan je een css classe meegeven. 'CSS-klasse voor dit veld:'

Kan je anders even een url of wat code posten van je html en css?

Re: template formbuilder

Posted: Thu Jan 19, 2012 4:53 pm
by rodeto
Probleem is en blijft dat elke entry apart vermeld wordt, zowel de naam als het textvak erachter. Die komen allemaal apart in een div of waar dan ook in. Als ik dan een css class meegeef aan een bepaald veld dan krijgen zowel de naam als het tekstvak deze class mee. Dan valt er nog onvoldoende uit te lijnen.
Wat ik wil is het volgende en ik heb geen idee hoe ik dat moet verwezenlijken:

Code: Select all

naam                        telefoonnummer
[__________]                [_______________]
adres                        woonplaats
[__________]                [_______________]
Mededeling
[___________________________________________]

SUBMIT

Re: template formbuilder

Posted: Fri Jan 20, 2012 1:15 pm
by stv
oke ik begin even vanaf het begin.

1. Maak een contactformulier of pas een bestaand formulier aan in formbuilder. Creëer velden. In jouw geval naam telefoonnummer etc.
2. Selecteer je formulier en ga naar tabblad formuliersjabloon. Selecteer 'standaardsjabloon'. Dit is een css template zonder tables. En sla het op.
3. Ga terug naar tabblad start en klik op je eerste item (naam). Onder tabblad geavanceerde instellingen voeg je bij veld-alias 'column' toe. Doe dit ook bij woonplaats. Voeg bij telefoonnummer en adres de class 'columnclear' toe en bij mededeling 'clear'.

De output die cmsms voor je genereert is als volgt:

Code: Select all

<div class="column">
    <label>Naam*</label>
    <input type="text" name="m62b34fbrp__33" value="" size="25" maxlength="128"  id="your_name" />
</div>
    
<div class="column">
    <label>Telefoonnummer</label>
    <input type="text" name="m62b34fbrp__33" value="" size="25" maxlength="128"  id="your_name" />
</div>
    
<div class="columnclear">
    <label>Adres</label>
    <input type="text" name="m62b34fbrp__33" value="" size="25" maxlength="128"  id="your_name" />
</div>
    
<div class="column"> 
    <label>Woonplaats</label>
    <input type="text" name="m62b34fbrp__33" value="" size="25" maxlength="128"  id="your_name" />
</div>
    
<div class="clear">
    <label>Mededeling</label>
    <textarea name="m62b34fbrp__6" cols="60" rows="5" class="cms_textarea" id="message"></textarea>
</div>
    
4. Voeg het volgende toe aan je css stylesheet:

Code: Select all

.column, .columnclear {width:200px;}
.column {float:left}
.columnclear {float:left; clear:left;}
.clear {clear:both}
label {display:block}
Laat me even weten bij welke stap het fout gaat.

Voorbeeld: http://jsfiddle.net/8zDqx/

Re: template formbuilder

Posted: Fri Jan 20, 2012 4:02 pm
by rodeto
Hallo stv,

Dank voor de uitgebreide hulp. Het is nu inderdaad gelukt om het te krijgen zoals ik het hebben wilde. Ik heb nog wat moeten tweaken zo her en der maar de basis was duidelijk. Dank daarvoor.

In de bijlage staat het resultaat.

Re: template formbuilder

Posted: Fri Jan 20, 2012 4:08 pm
by stv
Super!! Vergeet niet [opgelost] voor je topic te zetten ;)