How do I redirect customers to a certain page after filling out a form?

Forever-Curls
Tourist
14 0 0

I have a form where I am redirecting customers to a different page depending on which option they select on one of the fieldsets. Do I place this script within the form like this? Or do I place at the bottom of the liquid file? Thank you!  

{% form 'contact'idformId %} 
{% if form.posted_successfully? %}
<script>
const e = document.getElementById("pre-register");
const selection = e.options[e.selectedIndex].value;
if (selection === 'Yes') {
window.location ="/products/product-1";
} else if (selection === 'No') {
window.location ="/products/product-2";
}
</script>
{% endif %}
{% endform %}
0 Likes
Forever-Curls
Tourist
14 0 0

I am trying to redirect people to a certain product page depending on if they select an option to a fieldset in the form. Can someone help me figure this out? I've tried using this window.location to redirect to the pages I want, but it doesn't work after the form is submitted. When trying to redirect the page after the form is submitted it just brings it to a page asking to prove you are not a robot and then back to the same form page. The function works if I use an onclick method that triggers the redirect() function.  This is how my form page looks. 

<div class="page-width">
    <div class="grid">
      <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
        <div class="section-header text-center">
          <h1>{{ page.title }}</h1>
        </div>

        <div class="rte">
            {{ page.content }}
        </div>
        
        <div id="register-form" class="form-vertical">
            {%- assign formId = 'RegisterForm' -%}
            {% form 'contact', id: formId %}
            {% include 'form-status', form_id: formId %}
            
            {%- if form.errors -%}
                <div class="form-message form-message--error">
                    {{ form.errors | default_errors }}
                </div>
            {%- endif -%}
            
            <div class="grid grid--half-gutters">
                <div class="grid__item medium-up--one-half">
                    <label for="user-type">I am a</label>
                    <select name="user-type" id="user-type" autofocus >
                        <option disabled selected value>Select an option</option>	
                        <option value="Salon-Owner">Salon Owner</option>
                        <option value="Stylist">Stylist</option>
                    </select>
                </div>
            </div>
  
            <div class="grid grid--half-gutters">
                <div class="grid__item medium-up--one-half">
                    <label for="tickets">How many tickets would you like to purchase?</label>
                    <input 
                        type="number" 
                        min="1" max="15" 
                        name="tickets" 
                        id="tickets" 
                        autofocus
                        >
                </div>
            </div>

            <div class="grid grid--half-gutters">
                <div class="grid__item medium-up--one-half">
                    <label for="pre-register">Would you like to pre-register for Curl Certification?</label>
                    <select name="pre-register" id="pre-register" aria-required="true" autofocus>
                        <option disabled selected value>Select an option</option>	
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
            </div>
            
            <div>
                <p>Please provide each attandee's name, email, phone, salon address, Instagram, and TikTok handle</p>
                <div id="add-btn" class="btn" onclick="addFields(document.getElementById('tickets').value)">Add Fields</div>
            </div>

            <div id="attendee-info"></div>

            <div class="text-center">
                <input id="register-submit" type="submit" value="Submit" class="btn">
            </div>

            {% if form.posted_successfully? %}
                <script>
                        const e = document.getElementById("pre-register");
                        const selection = e.options[e.selectedIndex].value;

                        if (selection === 'Yes') {
                            window.location.href = "/product1";
                        } if (selection === 'No') {
                            window.location.href = "/product2";
                        }
                </script>
            {% endif %}

            {% endform %}
        </div>	
      </div>
    </div>
</div>

 

 

 

 

 

 

 

 

0 Likes
Forever-Curls
Tourist
14 0 0

I am trying to redirect people to a certain product page depending on if they select an option to a fieldset in the form. Can someone help me figure this out? I've tried using this window.location to redirect to the pages I want, but it doesn't work after the form is submitted. When trying to redirect the page after the form is submitted it just brings it to a page asking to prove you are not a robot and then back to the same form page. The function works if I use an onclick method that triggers the redirect() function.  This is how my form page looks. 

 

 

<div class="page-width">
    <div class="grid">
      <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
        <div class="section-header text-center">
          <h1>{{ page.title }}</h1>
        </div>

        <div class="rte">
            {{ page.content }}
        </div>
        
        <div id="register-form" class="form-vertical">
            {%- assign formId = 'RegisterForm' -%}
            {% form 'contact', id: formId %}
            {% include 'form-status', form_id: formId %}
            
            {%- if form.errors -%}
                <div class="form-message form-message--error">
                    {{ form.errors | default_errors }}
                </div>
            {%- endif -%}
            
            <div class="grid grid--half-gutters">
                <div class="grid__item medium-up--one-half">
                    <label for="user-type">I am a</label>
                    <select name="user-type" id="user-type" autofocus >
                        <option disabled selected value>Select an option</option>	
                        <option value="Salon-Owner">Salon Owner</option>
                        <option value="Stylist">Stylist</option>
                    </select>
                </div>
            </div>
  
            <div class="grid grid--half-gutters">
                <div class="grid__item medium-up--one-half">
                    <label for="tickets">How many tickets would you like to purchase?</label>
                    <input 
                        type="number" 
                        min="1" max="15" 
                        name="tickets" 
                        id="tickets" 
                        autofocus
                        >
                </div>
            </div>

            <div class="grid grid--half-gutters">
                <div class="grid__item medium-up--one-half">
                    <label for="pre-register">Would you like to pre-register for Curl Certification?</label>
                    <select name="pre-register" id="pre-register" aria-required="true" autofocus>
                        <option disabled selected value>Select an option</option>	
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
            </div>
            
            <div>
                <p>Please provide each attandee's name, email, phone, salon address, Instagram, and TikTok handle</p>
                <div id="add-btn" class="btn" onclick="addFields(document.getElementById('tickets').value)">Add Fields</div>
            </div>

            <div id="attendee-info"></div>

            <div class="text-center">
                <input id="register-submit" type="submit" value="Submit" class="btn">
            </div>

            {% if form.posted_successfully? %}
                <script>
                    console.log('form posted successfully!');
                    const e = document.getElementById("pre-register");
                    const selection = e.options[e.selectedIndex].value;
                    if (selection === 'Yes') {
                        window.location.href = "https://ouidad-education.myshopify.com/products/curl-confidence-with-curl-certification-pre-registration";
                    } if (selection === 'No') {
                        window.location.href = "https://ouidad-education.myshopify.com/products/curl-confidence";
                    }
                </script>
            {% endif %}

            {% endform %}
        </div>	
      </div>
    </div>
</div>

 

0 Likes