Formulieren vormgeven met css

[simpel_cms]

Ik ben nu bezig om een contact formulier te maken.
Dit lukt aardig alleen krijg ik het niet voor elkaar om tussen veldnaam en tekstveld ruimte te krijgen.

Mijn gebruikte css code is:

Code: Select all

div.form
{
	font-weight : bold;
	float:left;
	width:500px;
	margin: 0px 0px 0px 0px;
	text-align:left;
}

Wie kan mij hier mee helpen ?

[bterkuile]

Er zijn meerdere manieren om dit voor elkaar te krijgen. De niet hele nette, maar snelste en meest effectieve manier is om je formulier met een tabel te maken. Geef de eerste rij van de eerste kolom een breedte die groter is dan de langste tekst en je bent er. Voorbeeld:

Code: Select all

<form ....>
<table>
<tr>
<td style="width:120px">Naam:</td><td><input type="text" name="form_naam" /></td>
</tr>
<tr>
<td>email:</td><td><input type="text" name="form_email" /></td>
</tr>
......
</table>
</form>

Voordeel hiervan is dat alle invoer velden netjes onder elkaar staan.
Een andere manier om extra ruimte tussen te tekst en het invoer veld te doen is doormiddel van spaties. Deze moet je echter doen met de   invoer. Gewone spaties werken niet.
Je kan ook de het invoer veld in een element zetten (bijvoorbeeld een span) waar je een padding aan geeft. Bijvoorbeeld:

Code: Select all

Naam:<span style="padding-left:20px;"><input .../></span>

Zou allemaal moeten werken. Ik denk dat er nog honderden andere manieren zijn, maar hier zal je het wel mee redden denk ik.

Succes!

[simpel_cms]

bedankt voor je tip maar ik gebruik de  FormBuilder module. Hier kan je de verschillende mogelijk heden aanklikken.
Waar moet ik dan de code plaatsen ? Bij de sjabloon layout opties ?.

[bterkuile]

Ik heb nog geen ervaring met de formbuilder, maar heb hem net uigeprobeerd. Elke form heeft een template die je aan kan passen. Maar  de meest eenvoudige css methode is denk ik:

Code: Select all

label{
margin-right:8px;
}

maar dan pas je wel alle labels aan. als je een div om je formulier heen zet kan je specifieker zijn. Voorbeeld:

Code: Select all

<div class="ruim_formulier">
{cms_module module='FormBuilder' form='sample_form'}
</div>

en dan als css:

Code: Select all

div.ruim_formulier label{
margin-right:8px;
}

Ik heb het niet uitgetest, dus kan nog een foutje in zitten, maar zo zou het met css moeten kunnen.

[simpel_cms]

bedankt het is bijna gelukt. De meeste velden staan nu netjes naast elkaar.
Alleen krijg ik het niet voor elkaar om de tekst bericht die naast een tekstveld (30 rows en 10 cols ) staat naar boven te verplaatsen. Deze staat helemaal onder aan. Hoe krijg ik deze gelijk met het tekstveld ?

En hoe krijg ik het plaatje van Captcha script onder een ander invoerveld ?
Hoe kan ik deze met css aanspreken ?

[bterkuile]

Ik heb een beetje met de formbuilder gespeeld en dit zijn mijn bevindingen. Ik begrijp niet 100% de vraag, maar hoop dat dit antwoord het wel oplost 

Eerst het stylen van een textarea, Deze krijg een label ervoor en dan de textarea met cols en rows. De eerste optie om de naam of tekst bij een textarea is natuurlijk de naam verbergen en zelf voor of achter een text in de form plaatsen. (Hide Label is een optie in de advanced settings van de textarea).
Maar het kan ook op andere manieren. Ik zou dan wel de textarea een class geven (Advanced settings) bijvoorbeeld textarea_vraag. Dan wordt deze in een div geplaats met deze class. Als je bijvoorbeeld te tekst rechts van de textarea wilt, kan je iets doen van:

Code: Select all

div.textarea_vraag{
float:right;
width:50px;
}

Als de textarea er dan naast past komt deze er naast te staan (niet getest).

Dan nu over de captcha. Het lijkt er op dat deze automatisch onderaan het formulier geplaatst wordt. Dus met alleen css en de formbuilder kan je de lokatie denk ik niet wijzigen. Wel kan je hem een beetje stylen. De captcha wordt in een div geplaatst met als class captcha, dus je kan zoiets doen als:

Code: Select all

div.captcha img{
float:right;
}
div.captcha input{
border:3px dashed red;
}

[simpel_cms]

Bedankt voor je reactie. Dit is alleen nog niet wat ik wil.

Als je in de admin opent en klikt op content vervolgens op nieuws. En dan op voeg artikel toe dan zie je daar een formulier staan om nieuws toe te kunnen voegen. Zo moet het formulier er uit gaan zien.

Iemand nog een idee ?   :)