Gbook gestyled met Bootstrap 4

Een board om T&T's te plaatsen m.b.t. CMSMS, PHP of Smarty

Moderator: velden

Post Reply
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Gbook gestyled met Bootstrap 4

Post by Gregor »

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/compo ... w-it-works.

Code: Select all

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

Return to “Tips en Trucs”