Cacher is the code snippet organizer for pro developers

https://ecommerce.shopify.com/c/ecommerce-design/t/contact-form-country-province-dropdown-355580

{{ 'shopify_common.js' | shopify_asset_url | script_tag }}

<label for="address_country_new">{{ 'customer.addresses.country' | t }}</label>
<select id="address_country_new" name="contact[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>

<label for="address_province_new">{{ 'customer.addresses.province' | t }}</label>
<select id="address_province_new" class="address_form" name="contact[province]" data-default="{{form.province}}"></select>


<script>
// Initialize observers on address selectors
new Shopify.CountryProvinceSelector('address_country_new', 'address_province_new', {
hideElement: 'address_province_container_new'
});

</script>

<div class="send-invoice-form">
  {% form 'contact' %}
  
    {% if form.posted_successfully? %}
      <div class="successForm feedback">
        <script>
          window.location = "/pages/send-me-an-invoice-thank-you";
        </script>
      </div>
    {% endif %}
  
    {% if form.errors %}
    <div class="errorForm feedback">
      <p>{{ 'contact.form.post_error' | t }}</p>
      {% for field in form.errors %}
      <p>{{ 'contact.form.post_field_error_html' | t: field: field, error: form.errors.messages[field] }}</p>
      {% endfor %}
    </div>
    {% endif %}
    
  <p class="notes">* = required</p>
<p>Please tell us where to send your invoice:</p>

    <div class="row">
      <div class="col">
        <input type="text" name="contact[first name]" placeholder="First Name*" required />
        <input type="text" name="contact[last name]" placeholder="Last Name" />
        <input type="email" name="contact[email]" placeholder="Email*" required />
        <div class="sub-row">
          <input type="tel" name="contact[phone]" placeholder="Phone" />
          <input type="text" name="contact[ext]" placeholder="Ext" />
        </div>
        <input type="text" name="contact[additional contact name]" placeholder="Additional Contact Name" />
      </div>
      <div class="col">
        <input type="text" name="contact[company name]" placeholder="Company Name" />
        <input type="text" name="contact[street address]" placeholder="Street Address*" required />

  <select id="address_country_new" name="contact[Country]" data-default="{{form.country}}" required><option value="">Country*</option>{{ country_option_tags }}</select>

  <label for="address_province_new">State/Province</label>
  <select id="address_province_new" class="address_form" name="contact[Province]" data-default="{{form.province}}"></select>
  
        <input type="text" name="contact[postal code]" placeholder="Zip or Postal Code*" required />
       
      </div>
    </div>

    <div class="row">
      <div class="col">
        <textarea rows="10" cols="30" placeholder="Notes or Comments*" id="contactFormComments" name="contact[comments]" required></textarea>
      </div>
    </div>

    <textarea rows="15" cols="75" class="hidden" id="contactproducts" name="contact[products information]">{{ products_info }}</textarea>      

    {% if settings.please_check %}
    <textarea rows="15" cols="75" class="hidden" id="contactinfo" name="contact[please send checks to]">
      {{ settings.please_check }}
    </textarea>      
    {% endif %}
  
    <p>An invoice with payment details will be sent to the email address provided. For questions regarding invoicing, please contact <a href="mailto:account-support@c-s-publications.com">account-support@c-s-publications.com</a>. Thank you.</p>
    <input type="submit" class="btn" id="contactFormSubmit" value="SEND" class="btn" />
 
  {% endform %}
</div>