• 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  [ 1 post ] 
Author Message
 Post subject: Gbook gestyled met Bootstrap 4
PostPosted: Fri Oct 19, 2018 1:08 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1852
Location: The Netherlands
Bij de verbouwing van mijn site wilde ik ook formulier zoveel als mogelijk gelijk hebben. Gbook frontend form is er een van. Onderstaand de template hoe je met Bootstrap de velden van Gbook kunt stylen. Ik maak geen gebruik van Star-rating e/o smilies.

De <form>-tag wordt gesloten door {$gbook_endform}

Zie ook de helppagina van Bootstrap formulieren https://getbootstrap.com/docs/4.1/components/forms/#how-it-works.

Code:
<h3>{$gbook_name}</h3>

{* honeypot do not remove *}
<style type="text/css">
    .gbook_website { position: absolute; left: -600em; }
</style>{* end honeypot *}

{if !empty($gbook_errormessage)}<p class="gbook_error">{$gbook_errormessage}</p>{/if}
    {$gbook_startform}
     <form>
        <div class="form-group">
            {$gbook_name_field}<br/>
            <label for="{$gbook_name_field}">Naam</label>
            <input type="text" class="form-control" id="{$gbook_name_field}" name="{$gbook_name_field}" required="required" placeholder="Naam">
        </div>
        <div class="form-group">
            <label for="{$gbook_email_field}">e-mail adres</label>
            <input type="email" class="form-control" id="{$gbook_email_field}" name="{$gbook_email_field}" aria-describedby="emailHelp" required="required" placeholder="Voer uw e-mail adres in">
            id: {$gbook_email_field} <br/>
            <small id="emailHelp" class="form-text text-muted">Dit adres wordt niet getoond.</small>
            <div class="invalid-feedback">
                  Vul een geldig e-mail adres in.
            </div>
        </div>
        {* honeypot do not remove *}
        <div class="gbook_field gbook_website">
           <label for="{$gbook_formid}website">Website</label>{$gbook_honeypot_input}
        </div>{* end honeypot *}
        <div class="form-group">
            <label for="{$gbook_title_field}">Titel</label>
            id: {$form_code}title <br/>
            <input type="text" class="form-control" id="{$gbook_title_field}" name="{$gbook_title_field}" required="required" placeholder="Titel van het bericht">
        </div>
        <div class="form-group"> {* Message field *}
          <label class="control-label" for="{$gbook_message_field}">Bericht</label>
          id: {$form_code}message <br/>
          <textarea class="form-control" id="{$gbook_message_field}" name="{$gbook_message_field}" rows="6" required="required" maxlength="500" placeholder="Bericht voor het gastenboek"></textarea>
        </div>
        {*<button type="submit" class="btn btn-primary">Verstuur</button>*}

        {if !empty($gbook_smileys)}
            <__script__ type="text/javascript">{literal}
            function InsertText(textValue) {
               var txtArea = document.getElementById("{/literal}{$gbook_message_field}{literal}");
           
               //IE
               if (document.selection) {
                  txtArea.focus();
                  var sel = document.selection.createRange();
                  sel.text = textValue;
                  return;
               }
               //Firefox, chrome, mozilla
               else if (txtArea.selectionStart || txtArea.selectionStart == '0') {
                  var startPos = txtArea.selectionStart;
                  var endPos = txtArea.selectionEnd;
                  var scrollTop = txtArea.scrollTop;
                  txtArea.value = txtArea.value.substring(0, startPos) + textValue + txtArea.value.substring(endPos, txtArea.value.length);
                  txtArea.focus();
                  txtArea.selectionStart = startPos + textValue.length;
                  txtArea.selectionEnd = startPos + textValue.length;
               }
        else {
              txtArea.value += textArea.value;
              txtArea.focus();
               }
            }
            {/literal}</__script>
   
            <div class="gbook_smileys">
                {foreach from=$gbook_smileys item='gbook_smiley'}
                    <a href="#" onclick="InsertText(' {$gbook_smiley.smiley_code|escape:'quotes'} '); return false;"><img src="{$gbook_smiley.smiley_path}" alt="" /></a>
                {/foreach}
            </div>
        {/if}

        {if !empty($gbook_rating_input)}
        <__script__ type="text/javascript">{literal}
            function rate(rating) {
               document.getElementById("{/literal}{$gbook_rating_field}{literal}").value = rating;
                return true;
            }
           
            function fillstar(Obj){
               var stars=document.getElementsByName(Obj.name);
               for(i=1;i<=stars.length;i++)
               {
                  if (i<=Obj.alt) { stars[i-1].src="modules/Gbook/images/star_rate.png"; }
                  else { stars[i-1].src="modules/Gbook/images/star_empty.png"; }
               }
            }
       
            function setstars(){
               var stars=document.getElementsByName("star");
               var rating=document.getElementById("{/literal}{$gbook_rating_field}{literal}").value;
               for(i=1;i<=stars.length;i++)
               {
                  if (i<=rating) { stars[i-1].src="modules/Gbook/images/star_full.png"; }
                  else { stars[i-1].src="modules/Gbook/images/star_empty.png"; }
               }
            }
            {/literal}</__script>
   
            <div class="gbook_field gbook_starrating{if $gbook_rating_error} gbook_field_error{/if}" onmouseleave="setstars()">
                <label for="{$gbook_rating_field}">{$gbook_rating_label}</label><span class="gbook_stars">
                {for $i=1 to 5}<img style="cursor:pointer;" src="modules/Gbook/images/star_empty.png" name="star" alt="{$i}" onmouseover="fillstar(this)" onclick="rate({$i})" /> {/for}
                {$gbook_rating_input}</span>
            </div>
        {/if}

        {if isset($gbook_notify_field)}
            <label for="{$gbook_notify_field}">{$gbook_notify_label}</label>{$gbook_notify_input}<br />
        {/if}
    {$gbook_submit}
{$gbook_endform}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

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:  
A2 Hosting