Display a dropdown list with "Other" text box

The following snippet will display a dropdown list in the checkout, and will display an extra text box for “Other” input if “Other” is selected.

On the Templates configuration page of your store's FoxyCart administration, under “Cart” look for “Add custom header or footer code to your website”, check the box if not checked, and add this code into the “Footer” text area.

{% if context == "checkout" %}
<script>
$("body").on("change", "#referral_source", function() {
    setTimeout(FC.checkout.renderAdditionalFields, 500);
});
</script>
{% endif %}

Next, and still on the configuration page, under “Checkout” look for “Add custom form fields to your checkout”, enable it, and paste the following into the text box within:

<div class="fc-form-group ">
    <div class="col-md-8 col-md-offset-3" data-fc-error-for="referral_source" data-fc-error-class="fc-alert-container--error">
        <div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
            <label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
                How did you find Us?… (required)
            </label>
            <div class="fc-form-group">
                <p>Referred by?</p>
                    <select name="referral_source" id="referral_source" class="fc-form-control" aria-required="true" data-fc-required >
                    <option value="Google" {% if referral_source == "Google" %}selected{% endif %}>Google</option>
                    <option value="Yahoo" {% if referral_source == "Yahoo" %}selected{% endif %}>Yahoo</option>
                    <option value="Bing" {% if referral_source == "Bing" %}selected{% endif %}>Bing</option>
                    <option value="Facebook" {% if referral_source == "Facebook" %}selected{% endif %}>Facebook</option>
                    <option value="Instagram" {% if referral_source == " Instagram " %}selected{% endif %}> Instagram </option>
                    <option value="Twitter" {% if referral_source == " Twitter" %}selected{% endif %}> Twitter</option>
                    <option value="Friend" {% if referral_source == "Friend" %}selected{% endif %}>Friend</option>
                    <option value="Amazon" {% if referral_source == "Amazon" %}selected{% endif %}>Amazon</option>
                    <option value="Email" {% if referral_source == "Email" %}selected{% endif %}>Email</option>
                    <option value="Returning Customer" {% if referral_source == "Returning Customer" %}selected{% endif %}>Returning Customer</option>
                    <option value="Other" {% if referral_source == "Other" %}selected{% endif %}>Other</option>
                    </select>
            </div>
            {% if referral_source == "Other" %}
                <div class="fc-form-group">
                    <input type="text"
                    id="other_text"
                    name="other_text"
                    placeholder="Please enter 'Other'"
                    class="fc-form-control fc-form-control--new-customer-password"
                    data-fc-required
                    value="{{ other_text }}"
                    />
                </div>
            {% endif %}
        </div>
    </div>
</div>

You can customize some information to fit your needs. You can change referral_source wherever you see it to something more appropriate for your needs. Make sure you change it everywhere, including on the Javascript above.

You can also change “How did you find Us?… (required)” and “Referred by?” to suit your needs. Option values can also be changed, but you'll need to make sure you change them to match in the following Twig “if” statement and within the <option> and </option> tags that displays the option to the customer. We don't recommend changing anything on the other option unless you fully understand the snippet. You can feel free to contact us for additional help.

This snippet sets the field to be required. If you don't want it to be required and need help changing that, please contact us.