Adding CONTACT FORM SECTION to ORDER STATUS PAGE, but its not working properly.

Kanakano
Excursionist
42 1 15

Hi there.

On the ORDER STATUS PAGE, I have created a simple contact form section where the customer can immediately contact us about the order.

additonal script section in checkout setting, code as below

<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>CONTACT FORM about this order</h2>',
`<div id="contact_form">
{% form 'contact' %}
<input type="hidden" name="contact[form_title]" value="Contact from order status page">
<input type="hidden" name="contact[order_id]" value="{{ order.name }}">
<input type="hidden" name="contact[email]" value="{{ email }}">
<div>
<textarea rows="3" name="contact[body]" style="border: 1px solid lightgray; width: 95%; padding: 8px;" placeholder="What can I do for you?" required="required"></textarea>
</div>
<div>
<button type="submit" class="btn btn--size-small">Send</button>
</div>
</div>
{% endform %}
`);
</script>

This section appear on the order status page and will be delivered as an email when you enter your inquiry.

So far, so good as I expected.

However, after clicking the submit button, browser is redirected to the top page as URL '/?contact_posted=true'.

It's better to go back to the ORDER STATUS PAGE.

It'd be nice if there was a parameter to specify the return destination URL.

My plan is NOT Shopify PLUS.

Can you help, please.

0 Likes
LitExtension
Shopify Partner
1236 161 217

Hi @Kanakano 

You can try add this snippet:
{% if form.posted_successfully? %}
<script>
window.location = "/your-url";
</script>
{% endif %}

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
Kanakano
Excursionist
42 1 15

Hey @LitExtension,

Thank you your replying.

Sorry for the delayed response. (I missed a notification mail. xD)

I guess it means that if I put that snippet in the destination (top page) after posting a message, I can indeed move it to any page I want (maybe the "thank you for posting" page), but I want to move it back to the order status page.

There is no clue in the form object or the URL to know "from which order status page the message was sent". (If there is such a thing and I just don't know about it, please let me know)

There is a way to set the URL of the order status page and the order ID in the browser's DB or cookie before sending a message, but I don't think it is reliable. (If there is no other way, I'll try it.)

regards

0 Likes