Для начала нужно в панели управления сайтом создать страницу обратной связи, с произвольным адресом страницы (например /feedback) и с шаблоном страницы Обратная связь (feedback.html). Затем в шаблоне feedback.html в месте, где необходимо вывести форму обратной связи и блок вопрос-ответ, прописываем следующий код:
{{widgetRenderByType(
'feedback', {
category: 123456789012,
}
)}}
В параметр category указывается pkid категории обратной связи, куда будут приходить сообщения.
category обязателен для заполнения! Если не указать категорию обратной связи, все сообщения, отправляемые через данную форму будут отправляться в пустоту!CSS код для формы обратной связи и блока вопрос-ответ:
.feedback ol li,
.review ol li {
display: block;
clear: both;
list-style: none;
}
.feedback ol li label,
.review ol li label {
display: block;
margin: 0;
}
.feedback ol li input.text,
.review ol li input.text {
width: 380px;
border: 1px solid #c0c0c0;
margin: 2px 0;
padding: 5px 2px;
height: 25px;
background: #fff;
}
.feedback ol li textarea,
.review ol li textarea {
width: 380px;
border: 1px solid #c0c0c0;
margin: 2px 0;
padding: 2px;
background: #fff;
}
.feedback ol li input.capinput,
.review ol li input.capinput {
width: 100px;
border: 1px solid #c0c0c0;
margin: 2px 0;
padding: 5px 2px;
background: #fff;
}
.feedback ol li img#capimg,
.review ol li img#capimg {
border: none;
top: 20px;
margin: 10px 10px 10px 0;
float: left;
}
li.button {
clear: both;
}
.item {
display: block;
}
.answerList .name,
.answerList .topic,
.answerList .message {
padding: 0 7px;
background-color: #eef;
}
.answerList .name {
padding-top: 7px;
margin-top: 15px;
border-radius: 5px 5px 0 0;
}
.answerList .message {
padding-bottom: 0 7px;
border-radius: 0 0 5px 5px;
}
.answerList .answer_message {
background: #c4c4ff;
padding: 7px;
border-radius: 5px;
margin: 5px 0;
}
.name .date {
float: right;
}