Page 1 of 1

Form Builder Sjabloon [OPGELOST]

Posted: Fri Nov 09, 2012 3:50 pm
by sjoerdd87
Hallo allemaal,

Ik ben druk bezig geweest om een contact formulier te maken met de Form Bulder module.

Alleen krijg ik het niet voor elkaar om het formulier netjes te centreren, het staat nu nogal rommelig.

Ook zou ik graag het lettertype wat ik overal gebruik <h2> willen gebruiken.

Hoe kan ik het standaard sjabloon aanpassen of zelf een werkend sjabloon aanmaken?

Alvast bedankt!

Gr. Sjoerd

Re: Form Builder Sjabloon

Posted: Fri Nov 09, 2012 3:54 pm
by Rolf

Re: Form Builder Sjabloon

Posted: Fri Nov 09, 2012 4:02 pm
by sjoerdd87
Even een uitleg erbij? snap het niet helemaal.

Re: Form Builder Sjabloon

Posted: Fri Nov 09, 2012 5:46 pm
by Rolf
Met deze stylesheet opbouw kun je de lay-out aanpassen...

Re: Form Builder Sjabloon

Posted: Fri Nov 09, 2012 6:04 pm
by sjoerdd87
Rolf wrote:Met deze stylesheet opbouw kun je de lay-out aanpassen...
Dit moet ik dus in mijn CSS van mijn website plakken om aan te passen? en verder niks doen met het formuliersjabloon?

Re: Form Builder Sjabloon

Posted: Fri Nov 09, 2012 6:06 pm
by Rolf
sjoerdd87 wrote:Dit moet ik dus in mijn CSS van mijn website plakken om aan te passen? en verder niks doen met het formuliersjabloon?
Jep ;)

Re: Form Builder Sjabloon

Posted: Sat Nov 10, 2012 7:10 pm
by sjoerdd87
Misschien iemand anders die het even duidelijk kan uitleggen, kom er niet aan uit er veranderd niks aan mijn formulier.

Gr. Sjoerd.

Re: Form Builder Sjabloon

Posted: Sat Nov 10, 2012 8:30 pm
by velden
Sjoerd, het lijkt erop dat je wat basis-kennis mist dan m.b.t. CMSMS?

Het hele systeem bestaat voornamelijk uit templates die je kunt aanpassen en stylesheets. Dat is bij Formbuilder eigenlijk niet anders.

Waar gaat het fout, wat heb je al wel gedaan? Heb je misschien een url waar we kunnen kijken hoe het er nu uitziet?

Re: Form Builder Sjabloon

Posted: Sat Nov 10, 2012 8:47 pm
by sjoerdd87
velden wrote:Sjoerd, het lijkt erop dat je wat basis-kennis mist dan m.b.t. CMSMS?

Het hele systeem bestaat voornamelijk uit templates die je kunt aanpassen en stylesheets. Dat is bij Formbuilder eigenlijk niet anders.

Waar gaat het fout, wat heb je al wel gedaan? Heb je misschien een url waar we kunnen kijken hoe het er nu uitziet?
Momenteel heb ik geen URL om te kijken, me website staat namelijk even offline, wat ik nu hebt staan is:

Code: Select all

<!-- Start FormBuilder Module (0.7.3) -->

	
	
		
	
	<form id="cntnt01moduleform_1" method="post" action="http://www.dekker-design.nl/contact.html" class="cms_form" enctype="multipart/form-data">
<div class="hidden">
<input type="hidden" name="mact" value="FormBuilder,cntnt01,default,0" />
<input type="hidden" name="cntnt01returnid" value="61" />
<input type="hidden" name="cntnt01fbrp_callcount" value="1" />
</div>

	<div><input type="hidden" id="cntnt01form_id" name="cntnt01form_id" value="4" />
<input type="hidden" id="cntnt01fbrp_continue" name="cntnt01fbrp_continue" value="2" />
<input type="hidden" id="cntnt01fbrp_done" name="cntnt01fbrp_done" value="1" />
</div>
	<div class="formbuilderform">
				        	<fieldset id="fbrp__35"><legend>Contact</legend>     				        	<div><label for="fbrp__36">Je naam</label><input type="text" name="cntnt01fbrp__36" value="" size="25" maxlength="128"  id="fbrp__36" />
</div>     				        	<div><label for="fbrp__37_1">Je E-mailadres</label><input type="text" name="cntnt01fbrp__37[]"  id="fbrp__37_1" value="" size="25" maxlength="128" /><input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__37[]" value="1"  id="fbrp__37_2" />
<label for="fbrp__37_2" class="label">Verzend mij een kopie van het form</label></div>     				        	<div><label for="fbrp__38">E-mail nogmaals</label><input type="email" name="cntnt01fbrp__38" value="" size="25" maxlength="128"  id="fbrp__38" />
</div>     				        	<div><label for="fbrp__39">Onderwerp</label><input type="text" name="cntnt01fbrp__39" value="" size="25" maxlength="128"  id="fbrp__39" />
</div>     				        	<div class="required"><label for="Bericht">Bericht*</label><textarea name="cntnt01fbrp__40" cols="60" rows="5" class="cms_textarea" id="Bericht">Typ je bericht hier</textarea><__script__ type="text/javascript">
var f = document.getElementById('Bericht');
if (f)
{
f.onfocus=function(){
if (this.value==this.defaultValue) {this.value='';}
}
f.onblur=function(){
if (this.value=='') {this.value=this.defaultValue;}
}
}
;</__script>
</div>     							        	</fieldset>     					<div class="captcha"><input type="hidden" name="hncaptcha" value="33131131112133133132112311321233"/>
<input type="hidden" name="hncaptcha_public_key" value="96529"/>
<img class="captchapict" src="/tmp/cache/hn_captcha_96529.jpg" width="120" height="48" alt="This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)" title="">

Bevestig dat u geen script bent door de karakters in het plaatje in te voeren.<br /><input type="text" class="cms_textfield" name="cntnt01fbrp_captcha_phrase" id="cntnt01fbrp_captcha_phrase" value="" size="10" maxlength="255" />
</div>
		<div class="submit"><input class="cms_submit fbsubmit" name="cntnt01fbrp_submit" id="cntnt01fbrp_submit" value="Versturen" type="submit"  /></div>
	</div>
	</form>


<!-- End FormBuilder Module -->
Dit is standaard volgens mij, heb standaard contact form aangehouden, en hier alleen wat tekst in veranderd.

wat moet ik nu toevoegen in me CSS om het netjes te centreren en de tekstkleur / grootte aan te passen aan me huidige tekst (h2)

Gr. Sjoerd.

Re: Form Builder Sjabloon

Posted: Sat Nov 10, 2012 8:53 pm
by velden
voor de lettergrootte:

Code: Select all

div.formbuilderform label { font-size : 1.5em;}
Voor het centreren kun je eens proberen

Code: Select all

div.formbuilderform div { text-align : center;}
Ik weet die dingen ook niet allemaal uit mijn hoofd, maar met wat Google en Firebug komt het altijd goed.

Re: Form Builder Sjabloon

Posted: Sat Nov 10, 2012 10:16 pm
by timdebuurman
Ik heb deze klaarstaan om in mijn stylesheet te plakken.

Hier wordt er wel vanuit gegaan dat de content-tag in een div staat, genaamd 'inhoud'

Anders even alle #inhoud weghalen, de boel kopiƫren, naar je stylesheet gaan en erin plakken.
Dan ben je al een heel eind.

Code: Select all


/*contact form*/
.formbuilderform {
	width: 525px;
	margin-top: 50px;
	margin-left: 90px;
}

#inhoud label {
	display: block;
	float: left;
	width: 160px;
}

#inhoud input {
    border-color: #666666 #CCCCCC #CCCCCC #666666;
    border-style: solid;
    border-width: 1px;
    height: 20px;
    margin-bottom: 5px;
    width: 150px;
}

#inhoud .adres input {
	float: left;
	width: 119px;
	margin-right: 5px;
}

#inhoud .postcode input {
        float: left;
        width: 50px;
        margin-right: 5px;
}

#inhoud .huisnummer input {
	width: 24px;
}

#inhoud textarea {
    background-image: url("[[root_url]]/images/stripe.png");
    background-repeat: repeat;
    border-color: #666666 #CCCCCC #CCCCCC #666666;
    border-style: solid;
    border-width: 1px;
    height: 60px;
    width: 275px;
}

#inhoud .submit {
	float: right;
	margin-right: 88px;
	margin-top: 5px;
}

#inhoud .submit input {
    border-color: #CCCCCC #666666 #666666 #CCCCCC;
    height: 26px;
    width: 100px;
}

#inhoud .submit input:hover {
        border-color: #666666 #CCCCCC #CCCCCC #666666;
        padding-top: 2px;
        background-color: #EEE;
}

.red {
    color: #FF0000;
    font-size: 12px;
    font-weight: normal;
}


#inhoud select {
    border-color: #666666 #CCCCCC #CCCCCC #666666;
    border-style: solid;
    border-width: 1px;
    height: 20px;
    margin-bottom: 7px;
    width: 150px;
}

/*eind contact form*/
Oja,
Als ik een adres heb in m'n formulier, geef ik die de class 'adres' (dat kan je instellen bij de 'geavanceerde instellingen' van een veld) en het huisnummer (een nieuw veld is dat) geef ik de class 'huisnummer'
en hierbij vink ik ook aan dat de veldnaam verborgen word.
Die classes zie je terufg in de css hierboven, dan komt het huisnummer naast het straat-veld te staan.

Een werkend voorbeeld vind je hier:
http://www.keukenkastjesspuiten.nl/contact.html

Re: Form Builder Sjabloon

Posted: Sun Nov 11, 2012 6:43 pm
by sjoerdd87
allemaal bedankt voor de reactie's/

Ik ben nu zover dat ik het al een eind voor elkaar krijg alleen krijg ik de invulvelden niet goed gecentreerd, deze staan niet netjes boven elkaar.

Zodra ik dit wel probeer volgens

display: block;
float: left;

Staat het checkveld om een kopie naar jezelf te sturen niet meer netjes in de goede positie.

Wat ik nu heb staan is:

Code: Select all


/*contact form*/

div.formbuilderform fieldset {

        width: 960px;
        margin-top: 50px;
        margin-left: 0px;

}
div.formbuilderform form {
}
div.formbuilderform input {
}
div.formbuilderform input:hover {
}
div.formbuilderform input[type="button"] {
}
div.formbuilderform input[type="checkbox"] {



}
div.formbuilderform input[type="email"] {


}
div.formbuilderform input[type="file"] {
}
div.formbuilderform input[type="option"] {
}
div.formbuilderform input[type="radio"] {
}
div.formbuilderform input[type="submit"] {

        float: right;
        margin-right: 88px;
        margin-top: 5px;
        border-color: #CCCCCC #666666 #666666 #CCCCCC;
        height: 26px;
        width: 100px;
}
div.formbuilderform input[type="text"] {



}
div.formbuilderform label {


        font-family: Arial; 
        font-size: 13px; 
        color: #745e50; 
        font-weight: normal; 
        text-align: left;
        margin-left: 15px;
        margin-top: 0px;
margin-right: 100px;


}
div.formbuilderform legend {
}
div.formbuilderform optgroup {
}
div.formbuilderform select {
}
div.formbuilderform textarea {
}

Re: Form Builder Sjabloon

Posted: Sun Nov 11, 2012 9:34 pm
by timdebuurman
De breedte van de 'label' zorgt ervoor dat de input-velden op hetzelfde punt beginnen.

Dat is bijv. dit stukje uit mijn styles:

#inhoud label {
display: block;
float: left;
width: 160px;
}

dus in jouw geval hierbij:
div.formbuilderform label

een width zetten.

Re: Form Builder Sjabloon

Posted: Thu Nov 15, 2012 11:19 am
by sjoerdd87
timdebuurman wrote:De breedte van de 'label' zorgt ervoor dat de input-velden op hetzelfde punt beginnen.

Dat is bijv. dit stukje uit mijn styles:

#inhoud label {
display: block;
float: left;
width: 160px;
}

dus in jouw geval hierbij:
div.formbuilderform label

een width zetten.
Het heeft even geduurt maar het is gelukt!

Gr. Sjoerd.

Re: Form Builder Sjabloon

Posted: Thu Nov 15, 2012 11:20 am
by sjoerdd87
timdebuurman wrote:De breedte van de 'label' zorgt ervoor dat de input-velden op hetzelfde punt beginnen.

Dat is bijv. dit stukje uit mijn styles:

#inhoud label {
display: block;
float: left;
width: 160px;
}

dus in jouw geval hierbij:
div.formbuilderform label

een width zetten.
Het heeft even geduurt maar het is opgelost.

Bedankt.

Gr. Sjoerd.