• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 15 posts ] 
Author Message
 Post subject: Form Builder Sjabloon [OPGELOST]
PostPosted: Fri Nov 09, 2012 3:50 pm 
Offline
Forum Members
Forum Members

Joined: Fri Apr 20, 2012 11:48 am
Posts: 72
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
formulier.png [ 24.51 KiB | Viewed 861 times ]


Last edited by sjoerdd87 on Thu Nov 15, 2012 11:20 am, edited 1 time in total.
Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Fri Nov 09, 2012 3:54 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 5938
Location: The Netherlands
viewtopic.php?f=52&t=60763

_________________
Dutch CMSMS community website cmsms.nl and Wiki wiki.cmsms.nl
--------------------------
My CMSMS Tips and Tricks Weblog and website about Pneumatic Tube Systems / Rohrpost
My other (Dutch) website: Smakelijk eten zonder zout (Design: Compufairy)


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Fri Nov 09, 2012 4:02 pm 
Offline
Forum Members
Forum Members

Joined: Fri Apr 20, 2012 11:48 am
Posts: 72
Rolf wrote:
http://forum.cmsmadesimple.org/viewtopic.php?f=52&t=60763


Even een uitleg erbij? snap het niet helemaal.


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Fri Nov 09, 2012 5:46 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 5938
Location: The Netherlands
Met deze stylesheet opbouw kun je de lay-out aanpassen...

_________________
Dutch CMSMS community website cmsms.nl and Wiki wiki.cmsms.nl
--------------------------
My CMSMS Tips and Tricks Weblog and website about Pneumatic Tube Systems / Rohrpost
My other (Dutch) website: Smakelijk eten zonder zout (Design: Compufairy)


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Fri Nov 09, 2012 6:04 pm 
Offline
Forum Members
Forum Members

Joined: Fri Apr 20, 2012 11:48 am
Posts: 72
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?


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Fri Nov 09, 2012 6:06 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 5938
Location: The Netherlands
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 ;)

_________________
Dutch CMSMS community website cmsms.nl and Wiki wiki.cmsms.nl
--------------------------
My CMSMS Tips and Tricks Weblog and website about Pneumatic Tube Systems / Rohrpost
My other (Dutch) website: Smakelijk eten zonder zout (Design: Compufairy)


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Sat Nov 10, 2012 7:10 pm 
Offline
Forum Members
Forum Members

Joined: Fri Apr 20, 2012 11:48 am
Posts: 72
Misschien iemand anders die het even duidelijk kan uitleggen, kom er niet aan uit er veranderd niks aan mijn formulier.

Gr. Sjoerd.


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Sat Nov 10, 2012 8:30 pm 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 1508
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?


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Sat Nov 10, 2012 8:47 pm 
Offline
Forum Members
Forum Members

Joined: Fri Apr 20, 2012 11:48 am
Posts: 72
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:
<!-- 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.


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Sat Nov 10, 2012 8:53 pm 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 1508
voor de lettergrootte:

Code:
div.formbuilderform label { font-size : 1.5em;}


Voor het centreren kun je eens proberen

Code:
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.


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Sat Nov 10, 2012 10:16 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Sun Nov 06, 2011 8:15 pm
Posts: 711
Location: Deventer, Netherlands
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:

/*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

_________________
Beter een goede buur...


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Sun Nov 11, 2012 6:43 pm 
Offline
Forum Members
Forum Members

Joined: Fri Apr 20, 2012 11:48 am
Posts: 72
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:

/*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
formulier1.png [ 27.25 KiB | Viewed 757 times ]
Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Sun Nov 11, 2012 9:34 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Sun Nov 06, 2011 8:15 pm
Posts: 711
Location: Deventer, Netherlands
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.

_________________
Beter een goede buur...


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Thu Nov 15, 2012 11:19 am 
Offline
Forum Members
Forum Members

Joined: Fri Apr 20, 2012 11:48 am
Posts: 72
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.


Top
 Profile  
 
 Post subject: Re: Form Builder Sjabloon
PostPosted: Thu Nov 15, 2012 11:20 am 
Offline
Forum Members
Forum Members

Joined: Fri Apr 20, 2012 11:48 am
Posts: 72
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 15 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Arvixe - A CMSMS Partner