Fråga hur kunderna hörde talas om din butik

Du kan fråga dina kunder hur de hörde talas om din butik genom att lägga till ett formulärfält kallat Hur hörde du talas om oss? på din varukorgssida.

Hur hörde du talas om oss

Skapa formulärfältet "Hur hörde du talas om oss?"

Så här skapar du formulärfältet Hur hörde du talas om oss?:

  1. Klicka på Lägg till en ny snippet i katalogen Snippets.

  2. Skapa fragmentet:

    1. Döp ditt fragment hear-about-us.
    2. Klicka på Skapa snippet.
  3. I ditt nya hear-about-us.liquid-fragment klistrar du in följande kod:

```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. Klicka på **Spara**.

## Inkludera fragmentet på din varukorgssida

Så här inkluderar du fragmentet **Hur hörde du talas om oss?** på din varukorgssida:

1. Klicka på `cart-template.liquid` i katalogen **Sections** (Avsnitt). Om ditt tema inte inkluderar en `cart-template.liquid` ska du klicka på `cart.liquid` i katalogen **Templates** (Mallar).

2. [Hitta](/manual/productivity-tools/keyboard-shortcuts#find) sluttaggen `</form>` i koden. På en ny rad ovanför sluttaggen `</form>` klistrar du in följande kod:

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

3. Klicka på **Spara**.

## Lägg till temainställningar för konfigurering

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

2. [Hitta](/manual/productivity-tools/keyboard-shortcuts#find) den första avslutande klammerparentesen `},` i koden. Klistra in följande kod `},` på en ny rad under den avslutande klammerparentesen:

     `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. Klicka på **Spara**.

## Gör så att formulärfältet krävs

För att förhindra att kunder går vidare till kassan utan att välja ett alternativ i formuläret **Hur hörde du talas om oss?** så kan du se till att fältet krävs.

1. Klicka på `cart-template.liquid` i katalogen **Sections** (Avsnitt). Om ditt tema inte inkluderar en `cart-template.liquid` ska du klicka på `cart.liquid` i katalogen **Templates** (Mallar).

2. [Hitta](/manual/productivity-tools/keyboard-shortcuts#find) följande `novalidate`-attribut i varukorgens formulärskod:

novalidate `` 3. Byt utnovalidate`-attributet med följande kod:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Klicka på Spara.

  2. Klicka på Temainställningar i temaredigeraren i sidofältet.

  3. Klicka på fliken Hear about us (Hört talas om oss).

  4. Under Form Validation (Formulärsvalidering) ska du se till att inställningen Enable form validation (Aktivera formulärsvalidering) är aktiverad.

Obs! Du kan anpassa felmeddelandena som visas genom att ändra textfältsinställningarna för Error message (Felmeddelande) och Other field error message (Felmeddelande för andra fältfel). Du kan också anpassa felets färg genom att ändra inställningen Färg under Error styling (Utformning av fel).

Ange dina alternativ

Du kan redigera alternativen i rullgardinsmenyn Hur hörde du talas om oss? med hjälp av temainställningarna i temaredigeraren.

  1. Klicka på Theme settings (Temainställningar) i temaredigeraren.

  2. Klicka på fliken Hear about us (Hört talas om oss).

  3. Under Form options (Formulärsalternativ) lägger du till eller tar bort alternativ, separerade med kommatecken.

  4. Klicka på Spara.

Obs! Inkludera inte alternativet Other (Annat), eftersom det kommer att läggas till automatiskt.

Faq

Var kommer jag att se de uppgifter som tagits fram?

Du kommer att se svaret i administratören, i orderns avsnitt Additional details (Ytterligare information):

Ytterligare informationsavsnitt i en order

Om svaret är "inget listat alternativ", kan kunden skriva in något då?

Ja, det kan de. När kunden väljer Other (Annat) visas en textruta under rullgardinsmenyn, där de kan skriva in ett svar.

Kan jag visa svaret i mina e-postaviseringar om nya order?

Ja. Så här visar du kundsvar i dina e-postaviseringar om nya order:

  1. Gå till Aviseringssidan i din administratör och lägg till följande kod i din e-postmall New order (Ny order):

    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. Klicka på Spara.

Är du redo att börja sälja med Shopify?

Prova gratis