CODEWITHSUNDEEP
emailshopify
Nikko Parin
Nikko Parin

Reputation: 35

Shopify Custom Email Module

How can I pass the variable data from Shopify form ( I made a template for a page with a form inside that ask customer to choose one product & put name, email, address and more ) to be send in as email? Is it possible to get the data then pass it to some third party apps like Mailchimp and that 3rd party app will send it via email to the customer containing the data?

To make it short, my question is: How to create custom form then pass data in an email to be sent to the customer?

Upvotes: 2

Views: 1947

Answers (1)

Dezefy
Dezefy

Reputation: 2096

I have used a customized ajaxchimp jquery plugin to integrate shopify contact form with mailchimp. 

{% form 'contact' %} {% comment %} Successful message {% endcomment %} {% if form.posted_successfully? %}
<p class="note form-success">
  {{ 'contact.form.post_success' | t }}
</p>
{% endif %} {{ form.errors | default_errors }}

<div class="grid grid--small">
  <div class="grid__item large--one-half">
    <label for="ContactFormName" class="hidden-label">{{ 'contact.form.name' | t }}</label>
    <input type="text" id="ContactFormName" class="input-full" name="contact[name]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}">
  </div>

  <div class="grid__item large--one-half">
    <label for="ContactFormEmail" class="hidden-label">{{ 'contact.form.email' | t }}</label>
    <input type="email" id="ContactFormEmail" class="input-full" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
    <input type="hidden" id="ContactFormHidden" name="contact[email]" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
  </div>
</div>

<label for="ContactFormPhone" class="hidden-label">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="ContactFormPhone" class="input-full" name="contact[phone]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}">

<label for="ContactFormMessage" class="hidden-label">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="ContactFormMessage" class="input-full" name="contact[body]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>

<input type="submit" class="btn right" value="{{ 'contact.form.send' | t }}">
<label for="mc-email"></label>
{% endform %} 

{{ 'mailchimp.js' | asset_url | script_tag }}

<script>
  $('#ContactFormEmail').change(function() {
    var email = $(this).val();
    $('#ContactFormHidden').val(email);
  });
</script>

<script>
  $('#contact_form').ajaxChimp({
    url: 'https://cyberite.us4.list-manage.com/subscribe/post?u=858232f1e77dc411cb2405b5f&id=502f26188f',
  });
</script>

Upvotes: 1

Related Questions