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}