Aanpassen layout van een standaard form

Johnvp · **Joined:** Wed Apr 11, 2012 5:42 pm **Posts:** 7

Hallo, kan iemand mij helpen aan b.v. een handleiding om de layout van een contactformulier (gemaakt met form builder) aan te passen.
Ik heb er een gemaakt met de standaard instellingen maar alle velden staan vertikaal te kort op elkaar. (Op elkaar gepropt dus)
(zelfde probleem met de gastenboek module)

Als iemand mij al kan zeggen waar in de code wat aangepast dient te worden zal mij al een eind op weg helpen.

Gregor · **Posted:** Wed Apr 18, 2012 2:13 pm

Hallo,

Je 'moet' dit zoeken in de de stylesheet van de beide modules. Als je een link naar je site hebt, dan kunnen we meekijken en wellicht adviseren wat te doen. Eventueel helpt het als je het stylesheet gedeelte dat bij de respectievelijke formulieren hoort, als code post.

De formulieren van de beide modules hoef je vooralsnog niet aan te passen; afhankelijk of je tevreden bent met de formulieren.

Grt., Gregor

Johnvp · **Joined:** Wed Apr 11, 2012 5:42 pm **Posts:** 7

Hallo Gregor, de url is http://www.plezierritten.nl/index.php?page=contact.
De standaard template code is:

/* Sample FormBuilder CSS base */
form {
margin-top: 0
}
form, td, th, li {
font-size: 100%
}
form div {
margin-bottom: 0
}
fieldset div {
margin-bottom: 0.5em;
margin-left: 1em;
}
fieldset div div {
margin-top: 0.5em;
margin-left: 1em
}
fieldset {
margin-bottom: 1em;
border: 1px solid #F60;
padding: 0.5em
}
fieldset label {
width: auto;
}
legend {
color: #FFF;
background: #F60;
font-style: italic;
font-size: 1.2em;
margin-bottom: 0.5em;
padding: 0.2em;
width: auto;
border: 1px solid #CCC
}
textarea {
margin: 0.5em 0;
width: 98%;
height: 6em
}
/* Apply this class to text/select input fields with shorter labelsto help alignment */
.short-label label {
float: left;
width: 10em
}
.short-label fieldset div input, .short-label fieldset div select {
width: 16em
}
/* Pretty up your Captcha image output */
.captcha {
margin: 0.5em 0;
width: 200px;
text-align: center
}
.captcha img {
border: 1px solid #F60;
margin-bottom: 0.5em
}
.captcha input {
width: 196px;
margin-top: 0.5em
}
/* Just a bit more room for the Submit button */
.submit {
margin-top: 0.5em
}
.contactform input {
border: 1px solid #f60;
}
.contactform input.checkbox {
border: none;
}
.contactform label {
display: block;
float: left;
width: 150px;
}
.contactform label.label {
display: inline;
float: none;
width: 50px;
font-size: 10px;
}
.contactform textarea {
background-color: #ffc;
border: 1px solid #f60;
}
.formbuilderform .message {
line-height: 16px;
padding: 0 0 8px 0;
}

Hoop dat je hier iets mee kunt.
(css is formbuilderform)

timdebuurman · **Posted:** Wed Apr 18, 2012 4:51 pm

Als je de standaard stylesheet van het formulier niet aan je sjabloon koppelt en het volgende aan je 'gewone' stylesheet toevoegt, ben je al een heel eind:

Code:

label {
    display: block;
    float: left;
    width: 200px;
}

input {
    height: 25px;
    margin-bottom: 5px;
    margin-left: 3px;
    width: 200px;
}

textarea {
    height: 100px;
    margin-left: 3px;
    width: 375px;
}

.submit {
    float: right;
    margin-right: 20px;
    margin-top: 5px;
}

.submit input {
    width: 100px;
}

Hoogtes en breedtes kun je dan nog makkelijk aanpassen.

Johnvp · **Joined:** Wed Apr 11, 2012 5:42 pm **Posts:** 7

Voor mij is dit allemaal nieuw want, wat bedoel je met "gewone" stylesheet. Ik heb met form builder een contact-form aangemaakt waarin ik terug kan vinden "css-klasse voor dit formulier: formbuilderform". Bovenin staan tabbladen met diverse sjablonen.
Bij de stylesheets vindt ik alleen de bovenstaande terug met voor mij een relatie met de form builder module.
Hoop dat je het nog wat duidelijker voor me wilt maken.
Vast bedankt.

timdebuurman · **Posted:** Wed Apr 18, 2012 8:49 pm

Ga naar "Opmaak"-> "Sjablonen"

Aan de rechterkant zie je een soort tekstballonnetjes met 'css' erin.
Als je daarop klikt, kun je aan stylesheet aan je sjabloon koppelen.

De stylesheets die je aan je sjablo(o)n(en) kunt koppelen, vind je terug bij "Opmaak" -> "Stylesheets"

Zodra je een formulier hebt gemaakt met Formbuilder, heb je bij de stylesheets automatisch 1-tje, die heet "Formbuilder Default Style"

Dat is wat Johnvp je liet zien. Die styles kun je naar wens aanpassen.

Wat ook kan, zoals ik dus doe, is die "Formbuilder Default Style" - stylesheet losmaken van de sjabloon, dan open ik de stylesheet waar de rest van de styles in staat, en daar voeg ik dan de elemanten aan toe die nodig zijn om het formulier naar m'n zin te stylen.

Johnvp · **Joined:** Wed Apr 11, 2012 5:42 pm **Posts:** 7

dan open ik de stylesheet waar de rest van de styles in staat, en daar voeg ik dan de elementen aan toe die nodig zijn om het formulier naar m'n zin te stylen.

Beste buur... ;-)

, bovenstaande is de kern van mijn vraag, hier zou ik graag een voorbeeld van hebben. Welke stylesheet? en met welke elementen kun je op welke manier de layout beinvloeden. Welk element zorgt bv voor de ruimte tussen 2 vertikale velden?

Ik zou ook al geholpen zijn met link naar een heldere uitleg op een website. Jammer dat er niet zoiets is als wysiwyg voor de cmsms form builder.

Rolf · **Posted:** Thu Apr 19, 2012 6:51 pm

Over het stylen van formulieren zal ik binnenkort een tut maken...
Het is zo makkelijk als je het maar weet. Maar ook voor mij iedere keer weer zoeken in oude sites...

Grtz. Rolf

Johnvp · **Joined:** Wed Apr 11, 2012 5:42 pm **Posts:** 7

Rolf, bedankt voor je reactie. Ik wacht met spanning op de tut.

timdebuurman · **Posted:** Thu Apr 19, 2012 7:54 pm

@Johnvp

Als het goed is, is de sjabloon die je gebruikt gekoppeld aan een stylesheet.

Die stylesheet bedoel ik met "de stylesheet waar de rest van de styles in staat"

Onder "Opmaak" -> "Stylesheets" kun je op die stylesheet klikken om die aan te passen.

Als je daar dan de code invoert in m'n eerdere post, dan ben je al een best eind met stylen van je formulier.

@Rolf,
Goed idee, zo'n tut. Veel vragen op het forum te vinden hierover.

Rolf · **Posted:** Fri Apr 20, 2012 10:56 am

Rolf wrote:

Over het stylen van formulieren zal ik binnenkort een tut maken...

viewtopic.php?f=52&t=60763

grt. Rolf

Johnvp · **Joined:** Wed Apr 11, 2012 5:42 pm **Posts:** 7

Rolf en Buurman hartelijk bedankt voor jullie reactie. Ik denk dat ik voldoende informatie heb om in het weekend het e.e.a. in de formulieren aan te passen. Rolf, ik hoop dat je de tijd en zin nog eens vindt om om de tut af te ronden. Je zult veel cmsms gebruikers hiermee een dienst bewijzen.

timdebuurman · **Posted:** Fri Apr 20, 2012 4:13 pm

Rolf,

Deze variant in de stylesheet kende ik nog niet:

.formbuilder input[type="button"] {
}
.formbuilder input[type="checkbox"] {
}
.formbuilder input[type="file"] {
}
.formbuilder input[type="option"] {
}
.formbuilder input[type="radio"] {
}
.formbuilder input[type="submit"] {
}
.formbuilder input[type="text"] {
}

Dus de type-aanroep erachter.
Kan dat alleen in CMSMS, of is dat algemeen?

Rolf · **Posted:** Fri Apr 20, 2012 4:18 pm

Dit is algemeen CSS maar niet erg bekend.
Net wat ik zei, als je dit soort trucjes weet is het echt niet moeilijk.

grt. Rolf

Aanpassen layout van een standaard form

Who is online