Page 1 of 1
Formulieren vormgeven met css
Posted: Sat Aug 25, 2007 8:52 am
by 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 ?
Re: Formulieren vormgeven met css
Posted: Sat Aug 25, 2007 1:19 pm
by 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!
Re: Formulieren vormgeven met css
Posted: Sat Aug 25, 2007 2:05 pm
by 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 ?.
Re: Formulieren vormgeven met css
Posted: Sat Aug 25, 2007 2:24 pm
by 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:
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.
Re: Formulieren vormgeven met css
Posted: Sat Aug 25, 2007 5:01 pm
by 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 ?
Re: Formulieren vormgeven met css
Posted: Sun Aug 26, 2007 7:51 am
by 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;
}
Re: Formulieren vormgeven met css
Posted: Mon Sep 03, 2007 7:46 pm
by 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 ? :)