Spørg dine kunder, hvordan de har hørt om din butik

Du kan spørge dine kunder, hvordan de har hørt om din butik ved at tilføje formularfeltet Hvordan hørte du om os? på siden med indkøbskurv.

Hvordan hørte du om os?

Opret formularfeltet “Hvordan hørte du om os?”

Sådan opretter du formularfeltet Hvordan hørte du om os?:

  1. Klik på Opret et nyt kodestykke i mappen Kodestykker.

  2. Opret kodestykket:

    1. Navngiv dit kodestykke hear-about-us.
    2. Klik på Opret kodestykke.
  3. I dit nye hear-about-us.liquid-kodestykke skal du indsætte 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. Klik på **Gem**.

## Inkluder kodestykket på siden med indkøbskurv

Sådan inkluderer du kodestykket **Hvordan hørte du om os?** på siden med indkøbskurv:

1. Klik på `cart-template.liquid` i mappen **Afsnit**. Hvis dit tema ikke indeholder `cart-template.liquid`, skal du klikke på `cart.liquid` i mappen **Skabeloner**.

2. [Find](/manual/productivity-tools/keyboard-shortcuts#find) det afsluttende `</form>`-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende `</form>`-tag:

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

3. Klik på **Gem**.

## Tilføj temaindstillinger for konfiguration

1. Klik på `settings_schema.json` i mappen **Konfiguration**.

2. [Find](/manual/productivity-tools/keyboard-shortcuts#find) den første afsluttende krøllede parentes `},` i koden. Indsæt følgende kode på en ny linje under den afsluttende krøllede parentes `},`:

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

## Gør formularfeltet obligatorisk

Du kan forhindre, at kunder går til betalingsprocessen uden at vælge en mulighed i formularfeltet **Hvordan hørte du om os?** ved at gøre feltet obligatorisk.

1. Klik på `cart-template.liquid` i mappen **Afsnit**. Hvis dit tema ikke indeholder `cart-template.liquid`, skal du klikke på `cart.liquid` i mappen **Skabeloner**.

2. [Find](/manual/productivity-tools/keyboard-shortcuts#find) følgende `novalidate`-attribut i indkøbskurv-formularkoden:

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

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Klik på Gem.

  2. Klik på Temaindstillinger i sidebjælken i Temaeditoren.

  3. Klik på fanen Hør om os.

  4. Sørg for, at indstillingen Aktivér formularvalidering er aktiveret under Formularvalidering.

Bemærk: Du kan tilpasse de fejlmeddelelser, der vises, ved at redigere indstillingerne for tekstfelterne Fejlmeddelelse og Fejlmeddelelser i andre felter. Du kan også tilpasse farven på fejlen ved at redigere indstillingen Farve under Fejlformatering.

Angiv valgmuligheder

Hvis du vil tilpasse valgmulighederne i rullemenuen Hvordan hørte du om os?, kan du redigere valgmulighederne ved hjælp af temaindstillingerne i din Temaeditor.

  1. Klik på Temaindstillinger i din Temaeditor.

  2. Klik på fanen Hør om os.

  3. Tilføj eller fjern valgmuligheder i Formularindstillinger (adskilt af kommaer).

  4. Klik på Gem.

Bemærk: Medtag ikke valgmuligheden Andet, da den tilføjes automatisk.

Ofte stillede spørgsmål

Hvor kan jeg se de data, der registreres?

Du kan se svaret i administratoren. Klik på afsnittet Yderligere oplysninger for ordren:

Afsnittet med yderligere oplysninger for en ordre

Kan en kunde selv skrive noget, hvis de mangler en svarmulighed?

Ja, dine kunder kan selv skrive et svar. Hvis kunden vælger Andet, vises et tekstfelt, hvor vedkommende kan skrive sit svar. Tekstfeltet vises kunder rullemenuen.

Kan jeg vise svaret i mine mails med nye ordrenotifikationer?

Ja. Du viser kundesvar i dine mails med nye ordrenotifikationer på følgende måde:

  1. Gå til siden Meddelelser i administratoren, og føj følgende kode til mailskabelonen Ny ordre:

    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 på Gem.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis