Domanda ai clienti come sono venuti a conoscenza del tuo negozio

Puoi chiedere ai clienti come sono venuti a conoscenza del tuo negozio aggiungendo un campo del modulo How did you hear about us? (Come hai saputo di noi?) alla pagina del carrello.

How did you hear about us (Come hai saputo di noi)

Creazione del campo del modulo "How did you hear about us?" (Come hai saputo di noi?)

Per creare il campo del modulo How did you hear about us? (Come hai saputo di noi?):

  1. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.

  2. Crea il frammento:

    1. Assegna al frammento il nome hear-about-us.
    2. Clicca su Crea frammento.
  3. Nel nuovo frammento hear-about-us.liquid incolla il codice seguente:

```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. Clicca su **Salva**.

## Inclusione del frammento nella pagina del carrello

Per includere il frammento **How did you hear about us? (Come hai saputo di noi?)** nella pagina del carrello:

1. Nella directory **Sezioni**, clicca su `cart-template.liquid`. Se il tema non contiene `cart-template.liquid`, clicca su `cart.liquid` nella directory **Modelli**.

2. [Trova](/manual/productivity-tools/keyboard-shortcuts#find) il tag di chiusura `</form>` nel codice. Su una nuova riga sopra il tag di chiusura `</form>`, incolla il seguente codice:

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

3. Clicca su **Salva**.

## Aggiunta delle impostazioni del tema per la configurazione

1. Nella directory **Config**, clicca su `settings_schema.json`.

2. [Trova](/manual/productivity-tools/keyboard-shortcuts#find) la prima parentesi graffa di chiusura `},` nel codice, quindi incolla il seguente codice su una nuova riga sotto la parentesi graffa di chiusura `},`:

     `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. Clicca su **Salva**.

## Come rendere il campo modulo obbligatorio

Per impedire ai clienti di procedere al check-out senza selezionare un'opzione nel campo del modulo **How did you hear about us? (Come hai saputo di noi?)**, puoi rendere il campo obbligatorio.

1. Nella directory **Sezioni**, clicca su `cart-template.liquid`. Se il tema non contiene `cart-template.liquid`, clicca su `cart.liquid` nella directory **Modelli**.

2. [Trova](/manual/productivity-tools/keyboard-shortcuts#find) il seguente attributo nel codice del modulo del carrello: `novalidate`

novalidate `` 3. Sostituisci l'attributonovalidate` con il seguente codice:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Clicca su Salva.

  2. Nell'editor del tema, clicca su Impostazioni tema nella sidebar.

  3. Clicca sulla scheda Come hai saputo di noi.

  4. Alla voce Form Validation (Convalida modulo), assicurati che l'impostazione Enable form validation (Abilita convalida modulo) sia abilitata.

Impostazione delle opzioni

Per personalizzare le opzioni nel menu a discesa How did you hear about us? (Come hai saputo di noi), puoi modificare le opzioni utilizzando le impostazioni del tema nell'editor del tema.

  1. Nell'editor del tema, clicca su Impostazioni tema.

  2. Clicca sulla scheda Come hai saputo di noi.

  3. Alla voce Opzioni modulo, aggiungi o rimuovi opzioni, separandole con le virgole.

  4. Clicca su Salva.

FAQ

Dove posso visualizzare i dati acquisiti?

La risposta sarà visualizzata nel pannello di controllo, nella sezione Ulteriori dettagli dell'ordine:

Sezione dei dettagli aggiuntivi di un ordine

Se nessuna delle opzioni elencate corrisponde alla risposta, un cliente può digitare qualcosa?

Sì, è possibile. Quando il cliente seleziona Altro, sotto il menu a discesa verrà visualizzata una casella di testo in cui potrà digitare una risposta.

Posso mostrare la risposta nelle Email con notifica di un nuovo ordine?

Sì. Per mostrare le risposte dei clienti nelle email di notifica di nuovo ordine:

  1. Vai alla pagina Notifiche nel tuo pannello di controllo e aggiungi il seguente codice al modello di email Nuovo ordine:

    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. Clicca su Salva.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis