Form Builder Sjabloon [OPGELOST]
Moderator: velden
Form Builder Sjabloon [OPGELOST]
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
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
Last edited by sjoerdd87 on Thu Nov 15, 2012 11:20 am, edited 1 time in total.
Re: Form Builder Sjabloon
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Re: Form Builder Sjabloon
Even een uitleg erbij? snap het niet helemaal.
Re: Form Builder Sjabloon
Met deze stylesheet opbouw kun je de lay-out aanpassen...
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Re: Form Builder Sjabloon
Dit moet ik dus in mijn CSS van mijn website plakken om aan te passen? en verder niks doen met het formuliersjabloon?Rolf wrote:Met deze stylesheet opbouw kun je de lay-out aanpassen...
Re: Form Builder Sjabloon
Jepsjoerdd87 wrote:Dit moet ik dus in mijn CSS van mijn website plakken om aan te passen? en verder niks doen met het formuliersjabloon?
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Re: Form Builder Sjabloon
Misschien iemand anders die het even duidelijk kan uitleggen, kom er niet aan uit er veranderd niks aan mijn formulier.
Gr. Sjoerd.
Gr. Sjoerd.
Re: Form Builder Sjabloon
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?
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
Momenteel heb ik geen URL om te kijken, me website staat namelijk even offline, wat ik nu hebt staan is: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?
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 -->
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
voor de lettergrootte:
Voor het centreren kun je eens proberen
Ik weet die dingen ook niet allemaal uit mijn hoofd, maar met wat Google en Firebug komt het altijd goed.
Code: Select all
div.formbuilderform label { font-size : 1.5em;}
Code: Select all
div.formbuilderform div { text-align : center;}
- timdebuurman
- Power Poster
- Posts: 891
- Joined: Sun Nov 06, 2011 8:15 pm
- Location: Deventer, Netherlands
Re: Form Builder Sjabloon
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.
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
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*/
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
https://www.nextdoormedia.nl
Re: Form Builder Sjabloon
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:
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 {
}
- timdebuurman
- Power Poster
- Posts: 891
- Joined: Sun Nov 06, 2011 8:15 pm
- Location: Deventer, Netherlands
Re: Form Builder Sjabloon
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.
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
https://www.nextdoormedia.nl
Re: Form Builder Sjabloon
Het heeft even geduurt maar het is gelukt!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.
Gr. Sjoerd.
Re: Form Builder Sjabloon
Het heeft even geduurt maar het is opgelost.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.
Bedankt.
Gr. Sjoerd.