Developing a questionnaire on the 1C-Bitrix website

Survey Development on a 1C-Bitrix Website

A survey is a tool for collecting feedback and researching an audience. Unlike a quiz, it does not sell or qualify leads — it studies: what customers think about a product, why they left, how they rate the service. For a business, this is valuable data for decision-making. Bitrix does not have a ready-made tool for surveys of a decent level — the built-in iblock module can be used for storage, but the survey logic needs to be written from scratch.

Types of Surveys

NPS (Net Promoter Score) — "How likely are you to recommend us?" Scale of 0–10, an open question for explanation. The simplest to implement.

CSAT (Customer Satisfaction) — assessment of a specific interaction (purchase, support call). Short: 1 question + optional comment.

Full survey — multiple pages of questions, different types (scale, multiple choice, open answer, matrix), branching.

Data Structure

Storage via HL-blocks:

// Survey
class SurveyTable extends \Bitrix\Main\ORM\Data\DataManager
{
    public static function getTableName(): string { return 'b_hl_surveys'; }

    public static function getMap(): array
    {
        return [
            new IntegerField('ID', ['primary' => true, 'autocomplete' => true]),
            new StringField('TITLE'),
            new StringField('SLUG'),
            new StringField('TYPE'),           // nps | csat | full
            new TextField('QUESTIONS_JSON'),   // Question configuration
            new StringField('TRIGGER'),        // page_load | exit_intent | scroll_50 | after_order
            new IntegerField('SHOW_DELAY'),    // Display delay in seconds
            new BooleanField('IS_ACTIVE', ['values' => [false, true]]),
            new DatetimeField('DATE_FROM'),
            new DatetimeField('DATE_TO'),
        ];
    }
}

// Responses
class SurveyResponseTable extends \Bitrix\Main\ORM\Data\DataManager
{
    public static function getTableName(): string { return 'b_hl_survey_responses'; }

    public static function getMap(): array
    {
        return [
            new IntegerField('ID', ['primary' => true, 'autocomplete' => true]),
            new IntegerField('SURVEY_ID'),
            new IntegerField('USER_ID'),       // NULL — anonymous
            new StringField('SESSION_ID'),
            new StringField('USER_IP'),
            new TextField('ANSWERS_JSON'),     // {question_id: answer}
            new IntegerField('COMPLETION_SEC'), // Completion time
            new DatetimeField('CREATED_AT'),
        ];
    }
}

NPS Survey: Simple Case

NPS is the simplest — one page, one action:

// /local/components/local/survey.nps/template.php
?>
<div class="nps-widget" id="nps-widget" style="display:none;">
    <div class="nps-container">
        <button class="nps-close" onclick="NPS.dismiss()">×</button>
        <p class="nps-question">
            How likely are you to recommend us to your friends and colleagues?
        </p>
        <div class="nps-scale">
            <?php for ($i = 0; $i <= 10; $i++): ?>
                <button class="nps-score" data-score="<?= $i ?>"><?= $i ?></button>
            <?php endfor; ?>
        </div>
        <div class="nps-labels">
            <span>Not at all likely</span>
            <span>Extremely likely</span>
        </div>
        <div class="nps-comment" style="display:none;">
            <textarea placeholder="Tell us more..." id="nps-comment-text"></textarea>
            <button onclick="NPS.submit()">Submit</button>
        </div>
    </div>
</div>

<script>
const NPS = {
    surveyId: <?= (int)$arResult['SURVEY']['ID'] ?>,
    selectedScore: null,

    init() {
        // Show after delay
        setTimeout(() => {
            if (!this.wasShown()) {
                document.getElementById('nps-widget').style.display = 'flex';
                this.markShown();
            }
        }, <?= (int)$arResult['SURVEY']['SHOW_DELAY'] * 1000 ?>);

        document.querySelectorAll('.nps-score').forEach(btn => {
            btn.addEventListener('click', e => {
                this.selectScore(parseInt(e.target.dataset.score));
            });
        });
    },

    selectScore(score) {
        this.selectedScore = score;
        document.querySelectorAll('.nps-score').forEach(b => b.classList.remove('selected'));
        document.querySelector(`[data-score="${score}"]`).classList.add('selected');
        document.querySelector('.nps-comment').style.display = 'block';
    },

    async submit() {
        if (this.selectedScore === null) return;

        await fetch('/local/ajax/survey_submit.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                survey_id: this.surveyId,
                answers: {
                    nps_score: this.selectedScore,
                    comment:   document.getElementById('nps-comment-text').value,
                },
                sessid: BX.bitrix_sessid(),
            }),
        });

        document.getElementById('nps-widget').innerHTML =
            '<p class="nps-thanks">Thank you for your feedback!</p>';
        setTimeout(() => document.getElementById('nps-widget').style.display = 'none', 3000);
    },

    dismiss() {
        document.getElementById('nps-widget').style.display = 'none';
        this.markShown();
    },

    wasShown() {
        return !!localStorage.getItem('nps_shown_' + this.surveyId);
    },

    markShown() {
        localStorage.setItem('nps_shown_' + this.surveyId, Date.now());
    },
};

NPS.init();
</script>

Display Triggers

A survey should appear at the right moment, not immediately on page load:

const SurveyTriggers = {
    exitIntent(callback) {
        document.addEventListener('mouseleave', e => {
            if (e.clientY <= 0) callback();
        }, {once: true});
    },

    scrollDepth(percent, callback) {
        const listener = () => {
            const scrolled = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
            if (scrolled >= percent) {
                window.removeEventListener('scroll', listener);
                callback();
            }
        };
        window.addEventListener('scroll', listener);
    },

    afterOrder(callback) {
        // Show if the current URL is the successful order page
        if (window.location.href.includes('/order/success/')) {
            setTimeout(callback, 2000);
        }
    },
};

Response Analytics

For NPS — automatically calculate categories:

class NpsAnalytics
{
    public static function calculate(int $surveyId): array
    {
        $responses = SurveyResponseTable::getList([
            'filter' => ['SURVEY_ID' => $surveyId],
            'select' => ['ANSWERS_JSON'],
        ])->fetchAll();

        $detractors = 0; // 0–6
        $passives   = 0; // 7–8
        $promoters  = 0; // 9–10
        $total      = 0;

        foreach ($responses as $r) {
            $answers = json_decode($r['ANSWERS_JSON'], true);
            $score   = (int)($answers['nps_score'] ?? -1);
            if ($score < 0) continue;
            $total++;

            if ($score <= 6) $detractors++;
            elseif ($score <= 8) $passives++;
            else $promoters++;
        }

        if ($total === 0) return ['nps' => 0, 'total' => 0];

        $nps = round(($promoters / $total - $detractors / $total) * 100);

        return [
            'nps'        => $nps,
            'total'      => $total,
            'promoters'  => $promoters,
            'passives'   => $passives,
            'detractors' => $detractors,
        ];
    }
}

Duplicate Response Protection

• Cookie/localStorage: do not show again on the same device (30 days).
• By user_id: if the user is authenticated — check whether there is already a record in b_hl_survey_responses with this USER_ID and SURVEY_ID.
• By email: if anonymous but without duplicates is required — request email before the survey and verify.

Development Timeline