Page 1 of 1
Formulier opmaken
Posted: Fri Apr 20, 2012 10:54 am
by Rolf
Een eerste opzet voor een tutorial om formulieren te stylen.
Hierbij een aantal voorbeelden voor een FormBuilder formulier met de class "formbuilder" kan dus ook "contactform" of "guestbook" zijn...
Een class toevoegen is hier noodzakelijk, want anders zou deze kunnen botsen met bijvoorbeeld een formulier voor FrontEndUsers of andere modules.
Code: Select all
.formbuilder fieldset {
}
.formbuilder form {
}
.formbuilder input {
}
.formbuilder input:hover {
}
.formbuilder input[type="button"] {
}
.formbuilder input[type="checkbox"] {
}
.formbuilder input[type="email"] {
}
.formbuilder input[type="file"] {
}
.formbuilder input[type="option"] {
}
.formbuilder input[type="radio"] {
}
.formbuilder input[type="submit"] {
}
.formbuilder input[type="text"] {
}
.formbuilder label {
/*width: 250px;
float: left;*/
}
.formbuilder legend {
}
.formbuilder optgroup {
}
.formbuilder select {
}
.formbuilder textarea {
}
Code: Select all
.guestbook fieldset {
}
.guestbook form {
}
.guestbook input {
}
etc.
etc.
Code: Select all
.feu fieldset {
}
.feu form {
}
.feu input {
}
etc.
etc.
Als ik een keer tijd en zin heb dan zal ik dit uitwerken en aan Stikki mailen zodat hij dit (als hij dat wil) kan toevoegen aan FormBuilder zelf.
Have fun,
Rolf
Re: Formulier opmaken
Posted: Wed Apr 25, 2012 10:10 am
by Johnvp
Ben heel benieuwd naar de beschrijving om dit binnen mijn cmsms site te gebruiken.
(Compliment voor het design van de site "Smakelijk eten zonder zout")
MvG,
John
Re: Formulier opmaken
Posted: Fri Dec 27, 2013 7:49 pm
by Rolf
Hier een voorbeeld FormBuilder sjabloon en Stylesheet
http://www.cmscanbesimple.org/blog/form ... stylesheet
Re: Formulier opmaken
Posted: Thu Mar 13, 2014 6:01 pm
by rodeto
Hallo Rolf, dank voor je mooie en heldere uitleg.
Ik heb het formulier gebruikt op een pagina en het ziet er mooi uit.
Er is echter een dingen dat mij niet lukt. En dat is de plaatsing van de captcha image. Deze staat op een of andere manier met een marge aan de linkerkant waardoor in een klein scherm (smartphone) er ineens een horizontale scroller in beeld komt. Het lukt mij niet om dat aan te passen.
Enig idee hoe dat op te lossen zou zijn? Een testversie van de pagina is
hier te zien
Re: Formulier opmaken
Posted: Thu Mar 13, 2014 6:37 pm
by Rolf
In het formulier staat links van de captcha afbeelding een "label", deze zal naar boven schuiven op kleine schermen. Heb je hier iets gewijzigd?
Re: Formulier opmaken
Posted: Thu Mar 13, 2014 6:58 pm
by rodeto
Die heb ik inderdaad verwijderd maar dat had in het resultaat geen ander effect dan wat het nu is. Het betreffende label heb ik weer even teruggezet.
Re: Formulier opmaken
Posted: Thu Mar 13, 2014 10:22 pm
by rodeto
Ik heb alle templates er opnieuw ingezet en alleen wat aanpassingen gedaan in de css voor kleuren etc maar binnen het captcha deel schuift het nog steeds niet goed naar binnen
Re: Formulier opmaken
Posted: Fri Mar 14, 2014 7:02 am
by Rolf
Ik heb het formulier getest op mobiel, maar weet zo niet meer of de captcha er toen ook in zat. Ik zal het eens moeten testen...
Re: Formulier opmaken
Posted: Fri Mar 14, 2014 8:23 am
by rodeto
Dank daarvoor.
Ik kan er niet achter komen waar het aan ligt maar ik denk dat dat aan mijn beperkte kennis ligt.....
Vooralsnog heb ik de captcha maar even verwijderd.
Re: Formulier opmaken
Posted: Fri Mar 14, 2014 11:54 am
by Rolf
rodeto wrote:Ik kan er niet achter komen waar het aan ligt maar ik denk dat dat aan mijn beperkte kennis ligt.....
Daar kun je wat aan doen natuurlijk... Googlen, proberen, vallen en opstaan...
Re: Formulier opmaken
Posted: Fri Mar 14, 2014 11:57 am
by rodeto
Rolf wrote:Daar kun je wat aan doen natuurlijk... Googlen, proberen, vallen en opstaan...
Dat gebeurt zeker! Ik ben al een x aantal uren bezig om dit goed te krijgen. Helaas nog zonder succes.