Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.
то ждем ваше обращение в нашей службе тех поддержки.
Реализуем традиционный способ улучшения качества текстов на сайте с участием посетителей. Теперь, если они заметят ошибку в тексте, то смогут легко и быстро передать ее администратору сайта, используя сочетание клавиш Ctrl + Enter.
1. Организуем форму отправки сообщений
В нашем примере список вопросов:
- Адрес страницы
- Текст с ошибкой
- Комментарий пользователя.
Подключим форму в шаблоне сайта, описав для нее шаблон:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div id="[B]frm_errMsg[/B]">
<div onclick="return CloseMsgForm()" id="close-form-window" title="<?=GetMessage("AUTH_CLOSE_WINDOW")?>"></div>
<?if ($arResult["isFormErrors"] == "Y"):?><?=$arResult["FORM_ERRORS_TEXT"];?><?endif;?>
<?=$arResult["FORM_NOTE"]?>
<?if ($arResult["isFormNote"] != "Y")
{
?>
<?=$arResult["FORM_HEADER"]?>
<table>
<?
if ($arResult["isFormDescription"] == "Y" || $arResult["isFormTitle"] == "Y" || $arResult["isFormImage"] == "Y")
{
?>
<tr>
<td><?
/***form header***/
if ($arResult["isFormTitle"])
{
?>
<h3><?=$arResult["FORM_TITLE"]?></h3>
<?
} //endif ;
if ($arResult["isFormImage"] == "Y")
{
?>
<a href="<?=$arResult["FORM_IMAGE"]["URL"]?>" target="_blank" alt="<?=GetMessage("FORM_ENLARGE")?>"><img src="<?=$arResult["FORM_IMAGE"]["URL"]?>" <?if($arResult["FORM_IMAGE"]["WIDTH"] > 300):?>width="300"<?elseif($arResult["FORM_IMAGE"]["HEIGHT"] > 200):?>height="200"<?else:?><?=$arResult["FORM_IMAGE"]["ATTR"]?><?endif;?> hspace="3" vscape="3" border="0" /></a>
<?//=$arResult["FORM_IMAGE"]["HTML_CODE"]?>
<?
} //endif
?>
<p><?=$arResult["FORM_DESCRIPTION"]?></p>
</td>
</tr>
<?
} // endif
?>
</table>
<br />
<?
/**questions ****/
?>
<table class="form-table data-table">
<thead>
<tr>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Адрес страницы</td>
<td>
<?=$_SERVER['SERVER_NAME'].$_SERVER['PHP_SELF']?><input type="hidden" value="<?=$_SERVER['SERVER_NAME'].'/'.$_SERVER['REQUEST_URI']?>" name="[I][B]form_text_29[/B][/I]"/>
</td>
</tr>
<tr>
<td>Текст с ошибкой<font color="red"><span class="form-required starrequired">*</span></font></td>
<td><textarea name="[B][I]form_textarea_30[/I][/B]" id="[B]frm_err_str[/B]" cols="20" rows="3" class="inputtextarea"></textarea></td>
</tr>
<tr>
<td>Комментарий пользователя</td>
<td><textarea name="[B][I]form_textarea_31[/I][/B]" cols="20" rows="3" class="inputtextarea"></textarea></td>
</tr>
<?
if($arResult["isUseCaptcha"] == "Y"){
?>
<tr>
<th colspan="2"><b><?=GetMessage("FORM_CAPTCHA_TABLE_TITLE")?></b></th>
</tr>
<tr>
<td> </td>
<td><input type="hidden" name="captcha_sid" value="<?=htmlspecialchars($arResult["CAPTCHACode"]);?>" /><img src="/bitrix/tools/captcha.php?captcha_sid=<?=htmlspecialchars($arResult["CAPTCHACode"]);?>" width="180" height="40" /></td>
</tr>
<tr>
<td><?=GetMessage("FORM_CAPTCHA_FIELD_TITLE")?><?=$arResult["REQUIRED_SIGN"];?></td>
<td><input type="text" name="captcha_word" size="30" maxlength="50" value="" class="inputtext" /></td>
</tr>
<?} // isUseCaptcha
?>
</tbody>
<tfoot>
<tr>
<th colspan="2">
<input <?=(intval($arResult["F_RIGHT"]) < 10 ? "disabled="disabled"" : "");?> type="submit" name="web_form_submit" value="<?=strlen(trim($arResult["arForm"]["BUTTON"])) <= 0 ? GetMessage("FORM_ADD") : $arResult["arForm"]["BUTTON"];?>" />
<?if ($arResult["F_RIGHT"] >= 15):?>
<input type="hidden" name="web_form_apply" value="Y" /><input type="submit" name="web_form_apply" value="<?=GetMessage("FORM_APPLY")?>" />
<?endif;?>
<input type="reset" value="<?=GetMessage("FORM_RESET");?>" />
</th>
</tr>
</tfoot>
</table>
<p>
<?=$arResult["REQUIRED_SIGN"];?> - <?=GetMessage("FORM_REQUIRED_FIELDS")?>
</p>
<?=$arResult["FORM_FOOTER"]?>
<?
} //endif (isFormNote)
?>
</div>
<div class="b-foo-err">Для того, чтобы сообщить об ошибке на сайте или дать комментарий: выделите фрагмент текста и нажмите Ctrl+Enter или
<a href="#" onclick="return ShowMsgForm();">отправьте сообщение</a></div>
Обратите внимание, что на вашем сайте параметр поля name должен быть свой.
2. Готовим скрипт для отправки сообщения на JavaScript
Максимальная длина текста, который можно отправить через форму выделением, передается через переменную maxTXT_Length.
function getSelText(){
var txt = '';
if (window.getSelection){
txt = window.getSelection();
}else if (document.getSelection){
txt = document.getSelection();
}else if (document.selection){
txt = document.selection.createRange().text;
}
return txt;
}
var err_maxTXT_Length = 'Слишком длинный текст';
var [B]maxTXT_Length[/B] = 100;
document.onkeypress = function(){
var e = arguments[0] || window.event;
var code=e.keyCode?e.keyCode:(e.which?e.which:e.charCode);
if(e.ctrlKey && code==13){
var text = getSelText();
txt = text.toString();
if(txt.length > maxTXT_Length){
alert(err_maxTXT_Length);
}else{
var txtarea = document.getElementById("[B]frm_err_str[/B]");
txtarea.value = txt;
ShowMsgForm();
}
}
}
function ShowMsgForm()
{
var div = document.getElementById("[B]frm_errMsg[/B]");
if (!div)
return;
div.style.display = "[B]block[/B]";
document.body.appendChild(div);
return false;
}
function CloseMsgForm()
{
var div = document.getElementById("[B]frm_errMsg[/B]");
if (!div)
return;
div.style.display = "[B]none[/B]";
return false;
}
3. Настраиваем внешний вид формы при помощи CSS
#frm_errMsg {
position:absolute;
top:235px;
left:auto;
right:440px;
z-index:100;
background:#fff;
border:1px solid #bbb;
padding:20px 16px 6px;
width:26.75em;
[B]display:none;[/B]
}
#close-form-window {
background:url(images/bt/close.gif) no-repeat 0 0;
width:12px;
height:11px;
float:right;
cursor:pointer;
margin:-14px -10px 0 0;
display:inline;
}
Готово!
-------------------------------
Спасибо за внимание!
Читайте свежий выпуск «Кладовки программиста» каждый день!
Назад в раздел
1. Организуем форму отправки сообщений
В нашем примере список вопросов:
- Адрес страницы
- Текст с ошибкой
- Комментарий пользователя.
Подключим форму в шаблоне сайта, описав для нее шаблон:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div id="[B]frm_errMsg[/B]">
<div onclick="return CloseMsgForm()" id="close-form-window" title="<?=GetMessage("AUTH_CLOSE_WINDOW")?>"></div>
<?if ($arResult["isFormErrors"] == "Y"):?><?=$arResult["FORM_ERRORS_TEXT"];?><?endif;?>
<?=$arResult["FORM_NOTE"]?>
<?if ($arResult["isFormNote"] != "Y")
{
?>
<?=$arResult["FORM_HEADER"]?>
<table>
<?
if ($arResult["isFormDescription"] == "Y" || $arResult["isFormTitle"] == "Y" || $arResult["isFormImage"] == "Y")
{
?>
<tr>
<td><?
/***form header***/
if ($arResult["isFormTitle"])
{
?>
<h3><?=$arResult["FORM_TITLE"]?></h3>
<?
} //endif ;
if ($arResult["isFormImage"] == "Y")
{
?>
<a href="<?=$arResult["FORM_IMAGE"]["URL"]?>" target="_blank" alt="<?=GetMessage("FORM_ENLARGE")?>"><img src="<?=$arResult["FORM_IMAGE"]["URL"]?>" <?if($arResult["FORM_IMAGE"]["WIDTH"] > 300):?>width="300"<?elseif($arResult["FORM_IMAGE"]["HEIGHT"] > 200):?>height="200"<?else:?><?=$arResult["FORM_IMAGE"]["ATTR"]?><?endif;?> hspace="3" vscape="3" border="0" /></a>
<?//=$arResult["FORM_IMAGE"]["HTML_CODE"]?>
<?
} //endif
?>
<p><?=$arResult["FORM_DESCRIPTION"]?></p>
</td>
</tr>
<?
} // endif
?>
</table>
<br />
<?
/**questions ****/
?>
<table class="form-table data-table">
<thead>
<tr>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Адрес страницы</td>
<td>
<?=$_SERVER['SERVER_NAME'].$_SERVER['PHP_SELF']?><input type="hidden" value="<?=$_SERVER['SERVER_NAME'].'/'.$_SERVER['REQUEST_URI']?>" name="[I][B]form_text_29[/B][/I]"/>
</td>
</tr>
<tr>
<td>Текст с ошибкой<font color="red"><span class="form-required starrequired">*</span></font></td>
<td><textarea name="[B][I]form_textarea_30[/I][/B]" id="[B]frm_err_str[/B]" cols="20" rows="3" class="inputtextarea"></textarea></td>
</tr>
<tr>
<td>Комментарий пользователя</td>
<td><textarea name="[B][I]form_textarea_31[/I][/B]" cols="20" rows="3" class="inputtextarea"></textarea></td>
</tr>
<?
if($arResult["isUseCaptcha"] == "Y"){
?>
<tr>
<th colspan="2"><b><?=GetMessage("FORM_CAPTCHA_TABLE_TITLE")?></b></th>
</tr>
<tr>
<td> </td>
<td><input type="hidden" name="captcha_sid" value="<?=htmlspecialchars($arResult["CAPTCHACode"]);?>" /><img src="/bitrix/tools/captcha.php?captcha_sid=<?=htmlspecialchars($arResult["CAPTCHACode"]);?>" width="180" height="40" /></td>
</tr>
<tr>
<td><?=GetMessage("FORM_CAPTCHA_FIELD_TITLE")?><?=$arResult["REQUIRED_SIGN"];?></td>
<td><input type="text" name="captcha_word" size="30" maxlength="50" value="" class="inputtext" /></td>
</tr>
<?} // isUseCaptcha
?>
</tbody>
<tfoot>
<tr>
<th colspan="2">
<input <?=(intval($arResult["F_RIGHT"]) < 10 ? "disabled="disabled"" : "");?> type="submit" name="web_form_submit" value="<?=strlen(trim($arResult["arForm"]["BUTTON"])) <= 0 ? GetMessage("FORM_ADD") : $arResult["arForm"]["BUTTON"];?>" />
<?if ($arResult["F_RIGHT"] >= 15):?>
<input type="hidden" name="web_form_apply" value="Y" /><input type="submit" name="web_form_apply" value="<?=GetMessage("FORM_APPLY")?>" />
<?endif;?>
<input type="reset" value="<?=GetMessage("FORM_RESET");?>" />
</th>
</tr>
</tfoot>
</table>
<p>
<?=$arResult["REQUIRED_SIGN"];?> - <?=GetMessage("FORM_REQUIRED_FIELDS")?>
</p>
<?=$arResult["FORM_FOOTER"]?>
<?
} //endif (isFormNote)
?>
</div>
<div class="b-foo-err">Для того, чтобы сообщить об ошибке на сайте или дать комментарий: выделите фрагмент текста и нажмите Ctrl+Enter или
<a href="#" onclick="return ShowMsgForm();">отправьте сообщение</a></div>
Обратите внимание, что на вашем сайте параметр поля name должен быть свой.
2. Готовим скрипт для отправки сообщения на JavaScript
Максимальная длина текста, который можно отправить через форму выделением, передается через переменную maxTXT_Length.
function getSelText(){
var txt = '';
if (window.getSelection){
txt = window.getSelection();
}else if (document.getSelection){
txt = document.getSelection();
}else if (document.selection){
txt = document.selection.createRange().text;
}
return txt;
}
var err_maxTXT_Length = 'Слишком длинный текст';
var [B]maxTXT_Length[/B] = 100;
document.onkeypress = function(){
var e = arguments[0] || window.event;
var code=e.keyCode?e.keyCode:(e.which?e.which:e.charCode);
if(e.ctrlKey && code==13){
var text = getSelText();
txt = text.toString();
if(txt.length > maxTXT_Length){
alert(err_maxTXT_Length);
}else{
var txtarea = document.getElementById("[B]frm_err_str[/B]");
txtarea.value = txt;
ShowMsgForm();
}
}
}
function ShowMsgForm()
{
var div = document.getElementById("[B]frm_errMsg[/B]");
if (!div)
return;
div.style.display = "[B]block[/B]";
document.body.appendChild(div);
return false;
}
function CloseMsgForm()
{
var div = document.getElementById("[B]frm_errMsg[/B]");
if (!div)
return;
div.style.display = "[B]none[/B]";
return false;
}
3. Настраиваем внешний вид формы при помощи CSS
#frm_errMsg {
position:absolute;
top:235px;
left:auto;
right:440px;
z-index:100;
background:#fff;
border:1px solid #bbb;
padding:20px 16px 6px;
width:26.75em;
[B]display:none;[/B]
}
#close-form-window {
background:url(images/bt/close.gif) no-repeat 0 0;
width:12px;
height:11px;
float:right;
cursor:pointer;
margin:-14px -10px 0 0;
display:inline;
}
Готово!
-------------------------------
Спасибо за внимание!
Читайте свежий выпуск «Кладовки программиста» каждый день!
Назад в раздел
Подписаться на новые материалы раздела: