Vraag hoe klanten over je winkel hebben gehoord

Je kunt je klanten vragen hoe ze over je winkel hebben gehoord door een veld 'Hoe heb je over ons gehoord?' toe te voegen aan je winkelwagenpagina.

Hoe heb je over ons gehoord

Maak het formulierveld 'Hoe heb je over ons gehoord?' aan

Ga naar het formulierveld 'Hoe heb je over ons gehoord?'

  1. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.

  2. Maak het fragment aan:

    1. Benoem je fragment hear-about-us.
    2. Klik op Fragment maken.
  3. Plak de volgende code in je nieuwe fragment hear-about-us.liquid:

```liquid
<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
    font-weight: bold;
}

select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
    width: 100%;
    padding: 8px 10px 8px 10px;
    line-height: 1.2;
}

#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
    display:block;
    margin-bottom: 5px;
}

#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
    border: 2px solid {{ settings.hau_error_color }};
}

#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
    color: {{ settings.hau_error_color }};
}
</style>

<div class="form-vertical">
<p>
    <label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
    <span id="how-did-you-hear-about-us--error" style="display:none">{{ settings.hau_error_message }}</span>
    <select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
    <option value=""{% if cart.attributes.how-did-you-hear-about-us == "" %} selected{% endif %}>Please make a selection</option>
    {% assign optionsArray = settings.hau_form_options | split: ',' %}
    {% for o in optionsArray %}
    {% assign option = o | strip %}
    <option value="{{ option }}"{% if cart.attributes.how-did-you-hear-about-us == option %} selected{% endif %}>{{ option }}</option>
    {% endfor %}
    <option value="Other"{% if cart.attributes.how-did-you-hear-about-us == "Other" %} selected{% endif %}>Other</option>
    </select>
</p>
<p id="otherFormWrapper" style="{% unless cart.attributes.how-did-you-hear-about-us == 'Other' %}display:none{% endunless %}">
    <label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
    <span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings.hau_error_message_other }}</span>
    <input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart.attributes.how-did-you-hear-about-us-other }}"/>
</p>
</div>

<script>
(function() {

    document.addEventListener("DOMContentLoaded", initForm);
    document.addEventListener("shopify:section:load", initForm);

    function initForm(){

    var formElement = document.querySelector('#how-did-you-hear-about-us');
    var formError = document.querySelector('#how-did-you-hear-about-us--error');
    var otherFormElement = document.querySelector('#how-did-you-hear-about-us-other');
    var otherFormError = document.querySelector('#how-did-you-hear-about-us-other--error');
    var otherFormWrapper = document.querySelector('#otherFormWrapper');
    var checkoutButtons = document.querySelectorAll('[name="checkout"], [name="goto_pp"], [name="goto_gc"]');

    function showOrHideForm(){
        if (formElement.value == 'Other'){
        otherFormWrapper.style.display = '';
        } else {
        otherFormWrapper.style.display = 'none';
        }
    }

    function checkFormElement(){
        if (formElement.value.length == 0){
        formElement.classList.add('error');
        formError.style.display = '';
        } else {
        if (formElement.classList.contains('error')){
            formElement.classList.remove('error');
            formError.style.display = 'none';
        }
        }
    }

    function checkOtherFormElement(){
        if (otherFormElement.value.length == 0){
        otherFormElement.classList.add('error');
        otherFormError.style.display = '';
        } else {
        if (otherFormElement.classList.contains('error')){
            otherFormElement.classList.remove('error');
            otherFormError.style.display = 'none';
        }
        }
    }

    otherFormElement.addEventListener("input", function() {
        {% if settings.hau_form_validation %}
        checkOtherFormElement();
        {% endif %}
    });

    formElement.addEventListener("change", function() {
        showOrHideForm();
        {% if settings.hau_form_validation %}
        checkFormElement();
        {% endif %}
    });

    checkoutButtons.forEach(function(element){
        element.addEventListener("click", function(evt) {

        {% if settings.hau_form_validation %}
        var validated = true;
        if (formElement.value.length == 0){
            checkFormElement();
            validated = false;
        }
        if (formElement.value == 'Other'){
            if (otherFormElement.value.length == 0){
            checkOtherFormElement();
            validated = false;
            }
        }
        if (!validated) {
            evt.preventDefault();
            evt.stopPropagation();
        }
        {% endif %}
        });
    });

    }
})()
</script>
1. Klik op **Opslaan**.

## Voeg het fragment toe aan de winkelwagenpagina

Als je het **"Hoe heb je over ons gehoord?"**-fragment in je winkelwagenpagina op wil nemen:

1. Klik in het menu **Secties** op `cart-template.liquid`. Als je thema geen `cart-template.liquid` bevat, klik dan op `cart.liquid` in het menu **Sjablonen**.

2. [Zoek](/manual/productivity-tools/keyboard-shortcuts#find) de sluitende tag `</form>` in de code. Plak de volgende code op een nieuwe regel boven de sluitende tag `</form>`:

     `liquid
{% render 'hear-about-us' %}
` 

3. Klik op **Opslaan**.

## Thema-instellingen toevoegen voor configuratie

1. Klik in het menu van **Config** op `settings_schema.json`.

2. [Zoek](/manual/productivity-tools/keyboard-shortcuts#find) in de code de eerste accolades die `},` sluiten. Plak de volgende code op een nieuwe regel onder de sluitende accolade `},`:

     `json
{
"name": "Hear About Us",
"settings": [
    {
        "type": "text",
        "id": "hau_form_options",
        "label": "Form options",
        "default": "Facebook, Twitter, Google, Instagram, Youtube",
        "info": "Separate each option with a comma"
    },
    {
        "type": "header",
        "content": "Form validation"
    },
    {
        "type": "checkbox",
        "id": "hau_form_validation",
        "label": "Enable form validation",
        "default": true
    },
    {
        "type": "text",
        "id": "hau_error_message",
        "label": "Error message",
        "info": "The error message that is displayed when no selection is made",
        "default": "Please select an option below"
    },
    {
        "type": "text",
        "id": "hau_error_message_other",
        "label": "Other field error message",
        "info": "The error message that is displayed when there is no input in the 'Other' field",
        "default": "Please fill the text field below"
    },
    {
        "type": "header",
        "content": "Error styling"
    },
    {
        "type": "color",
        "id": "hau_error_color",
        "label": "Color",
        "default": "#ff0000"
    }
]
},
` 

3. Klik op **Opslaan**.

## Maak het formulierveld verplicht

Je kunt dit formulierveld verplicht maken om te voorkomen dat klanten doorgaan in de checkout zonder een optie te selecteren in het veld **"Hoe heb je over ons gehoord?"**.

1. Klik in het menu **Secties** op `cart-template.liquid`. Als je thema geen `cart-template.liquid` bevat, klik dan op `cart.liquid` in het menu **Sjablonen**.

2. [Zoek](/manual/productivity-tools/keyboard-shortcuts#find) het volgende `novalidate` kenmerk in de formuliercode van de winkelwagen:

novalidate `` 3. Vervang hetnovalidate` kenmerk door de volgende code:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Klik op Opslaan.

  2. Klik in de themabewerker op Thema-instellingen in de zijbalk.

  3. Klik op het tabblad Horen over ons.

  4. Zorg onder Validatie van formulier ervoor dat de instelling Validatie voor formulier inschakelen is ingeschakeld.

Je opties instellen

Je kunt de opties van het vervolgkeuzemenu Hoe heb je over ons gehoord? bewerken met hulp van de thema-instellingen in de themabewerker.

  1. Klik in de themabewerker op Thema-instellingen.

  2. Klik op het tabblad Horen over ons.

  3. In Formulieropties kun je opties toevoegen of verwijderen die gescheiden zijn door komma's.

  4. Klik op Opslaan.

Veelgestelde vragen

Waar zie ik de gegevens die zijn vastgelegd?

Je ziet het antwoord in het beheercentrum, in het gedeelte Aanvullende details van de bestelling:

Gedeelte met aanvullende details van een bestelling

Als geen van de opties het juiste antwoord is, kan een klant dan iets typen?

Ja, dat is mogelijk. Wanneer de klant Anders selecteert, wordt er onder het vervolgkeuzemenu een tekstvak weergegeven waarin hij een antwoord kan typen.

Kan ik het antwoord tonen in de e-mails met nieuwe bestellingsmeldingen?

Ja. Als je klantreacties wilt tonen in je e-mails met nieuwe bestellingsmeldingen:

  1. Ga naar de Meldingen-pagina in je beheercentrum en voeg de volgende code toe aan je e-mailsjabloon Nieuwe bestelling:

    liquid This customer heard about us through {% if attributes.how-did-you-hear-about-us-other == blank %}{{ attributes.how-did-you-hear-about-us }}{% else %}{{ attributes.how-did-you-hear-about-us-other }}{% endif %}.

  2. Klik op Opslaan.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis