Spør hvordan kundene hørte om butikken din

Du kan spørre kundene hvordan de har hørt om butikken din ved å legge til skjemafeltet Hvordan hørte du om oss? på handlekurvsiden.

Hvordan hørte du om oss

Opprett skjemafeltet «Hvordan hørte du om oss?»

Slik oppretter du skjemafeltet Hvordan hørte du om oss?:

  1. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

  2. Opprett kodebiten:

    1. Gi kodebiten navnet hear-about-us.
    2. Klikk på Opprett utdrag.
  3. I den nye hear-about-us.liquid-kodebiten limer du inn følgende kode:

```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. Klikk på **Lagre**.

## Inkluder kodebiten på handlekurvsiden

For å legge inn **Hvordan hørte du om oss?**-kodebiten på handlekurvsiden:

1. I **Seksjoner**-katalogen klikker du på `cart-template.liquid`. Hvis temaet ditt ikke har en `cart-template.liquid`, klikker du på `cart.liquid` i **Maler**-katalogen.

2. [Finn](/manual/productivity-tools/keyboard-shortcuts#find) den avsluttende `</form>`-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende `</form>`-taggen:

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

3. Klikk på **Lagre**.

## Legg til temainnstillinger for konfigurasjon

1. I katalogen **Config** klikker du på `settings_schema.json`.

2. [Finn](/manual/productivity-tools/keyboard-shortcuts#find) den første avsluttende klammeparentesen `},` i koden. På en ny linje under den avsluttende klammeparentesen `},` limer du inn følgende kode:

     `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. Klikk på **Lagre**.

## Gjør skjemafeltet obligatorisk

For å forhindre at kundene kan fortsette til kassen uten å velge et alternativ i **Hvordan hørte du om oss?**-skjemafeltet, kan du gjøre feltet obligatorisk.

1. I **Seksjoner**-katalogen klikker du på `cart-template.liquid`. Hvis temaet ditt ikke har en `cart-template.liquid`, klikker du på `cart.liquid` i **Maler**-katalogen.

2. [Finn](/manual/productivity-tools/keyboard-shortcuts#find) følgende `novalidate`-attributt i koden til handlekurvskjemaet:

novalidate `` 3. Erstattnovalidate`-attributten med følgende kode:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Klikk på Lagre.

  2. I temaredigeringsprogrammet klikker du på Temainnstillinger i sidefeltet.

  3. Klikk på Hør om oss-fanen.

  4. Under Skjemavalidering må du sørge for at innstillingen Aktiver skjemavalidering er aktivert.

Angi alternativer

For å tilpasse alternativene i rullegardinmenyen Hvordan hørte du om oss?, kan du redigere alternativene med temainnstillingene i temaredigeringsprogrammet.

  1. Klikk på Temainnstillinger i temaredigeringsprogrammet.

  2. Klikk på Hør om oss-fanen.

  3. Under Skjemaalternativer kan du legge til eller fjerne alternativer, adskilt med komma.

  4. Klikk på Lagre.

Vanlige spørsmål

Hvor ser jeg opplysningene som innhentes?

Du ser svaret i administrator, i seksjonen Tilleggsopplysninger i bestillingen:

Tilleggsinformasjon-seksjonen i en bestilling

Hvis ingen av de oppførte alternativene er svaret, kan kunden skrive inn noe selv?

Ja, det kan de. Når kunden velger Annet vises en tekstboks, der de kan skrive inn et svar som vil vises under rullegardinmenyen.

Kan jeg vise svaret i varslings-e-postene for nye bestillinger?

Ja. Slik viser du kundesvar i varslings-e-postene for nye bestillinger:

  1. Gå til Varsler-siden i administrator, og legg til følgende kode i e-postmalen Ny bestilling:

    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. Klikk på Lagre.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis