Form Builder Sjabloon [OPGELOST]

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Form Builder Sjabloon [OPGELOST]

Post 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
Attachments
formulier.png
Last edited by sjoerdd87 on Thu Nov 15, 2012 11:20 am, edited 1 time in total.
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Form Builder Sjabloon

Post by Rolf »

- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: Form Builder Sjabloon

Post by sjoerdd87 »

Even een uitleg erbij? snap het niet helemaal.
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Form Builder Sjabloon

Post by Rolf »

Met deze stylesheet opbouw kun je de lay-out aanpassen...
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: Form Builder Sjabloon

Post 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?
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Form Builder Sjabloon

Post 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 ;)
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: Form Builder Sjabloon

Post by sjoerdd87 »

Misschien iemand anders die het even duidelijk kan uitleggen, kom er niet aan uit er veranderd niks aan mijn formulier.

Gr. Sjoerd.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Form Builder Sjabloon

Post 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?
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: Form Builder Sjabloon

Post 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.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Form Builder Sjabloon

Post 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.
User avatar
timdebuurman
Power Poster
Power Poster
Posts: 891
Joined: Sun Nov 06, 2011 8:15 pm
Location: Deventer, Netherlands

Re: Form Builder Sjabloon

Post 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
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: Form Builder Sjabloon

Post 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 {
}
Attachments
formulier1.png
User avatar
timdebuurman
Power Poster
Power Poster
Posts: 891
Joined: Sun Nov 06, 2011 8:15 pm
Location: Deventer, Netherlands

Re: Form Builder Sjabloon

Post 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.
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: Form Builder Sjabloon

Post 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.
sjoerdd87
Forum Members
Forum Members
Posts: 139
Joined: Fri Apr 20, 2012 11:48 am

Re: Form Builder Sjabloon

Post 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.
Post Reply

Return to “Dutch - Nederlands”