This is an old revision of the document!
Table of Contents
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.
Add javascript
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 %}
Add HTML
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>