HELP! unable to hide form on success using javascript / HTML

Store Design
, , ,
1

I am trying to hide the contact form contents, using HTML and Javascript, upon success of the form and just show the success message.

After going through google recapture shopify screen after submitting the form, you also have to click ‘enquire’ again to know that your form has been successfully sent.

How do I fix this I have tried everything I am not sure if it is an error with the code?!

#modal-contact-dark-overlay { display: none; position: fixed; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); overflow: hidden; animation-name: animateopacity; animation-duration: 0.4s; z-index: 1; } @keyframes animateopacity { from { background-color: rgba(0, 0, 0, 0.0) } to { background-color: rgba(0, 0, 0, 0.7) } } #contact-modal-container { display: none; position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } #contact-modal { position: relative; margin: 0 auto; background-color: white; width: 100%; height: auto; padding: 10px 30px 50px 30px; animation: drop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translate(0%, -43%); top: 52%; } @keyframes drop-in { from { top: 30%; } to { top: 52% } } #contact-modal-exit { position: absolute; right: 20px; border: none; background: none; font-size: 18px; } #hide-modal-form-content { display: none; } #contact-modal-button { position: relative; background: black; left: 0px; top: -3px; min-width: 34%; font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); text-transform: uppercase; letter-spacing: var(--FONT-SPACING-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT-BOLD); font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT)); } .btn { font-family: var(--FONT-STACK-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT); font-style: var(--FONT-STYLE-ACCENT); text-transform: uppercase; letter-spacing: var(--FONT-SPACING-ACCENT); font-weight: var(--FONT-WEIGHT-ACCENT-BOLD); font-size: calc(var(--font-3) * var(--FONT-ADJUST-ACCENT)); } @media screen and (max-width: 768px) { #contact-modal-container { width: 100%; height: 100%; position: relative; } } @media screen and (max-width: 768px) { #contact-modal { position: relative; width: 100%; height: 100%; } } @media screen and (max-width: 768px) { #contact-modal-button { position: static; width: 100%; display: flex; justify-content: center; } }

{% assign form_success = false %}
Enquire Now

✕

Enquire Now

{% form 'contact' %} {% comment %} Successful message {% endcomment %} {% if form.posted_successfully? %}

{{ 'contact.form.post_success' | t }}

{% endif %} {{ form.errors | default_errors }}
{{ product.title }}

Please choose one of the following options:
<select id=“ContactFormSelect” name=“contact[Enquiring About]” value="ContactFormSelect"required>

Make a general enquiry Value my part exchange Request a finance quotation Request a callback {% assign name_attr = 'contact.form.name' | t | handle %} {{ 'contact.form.name' | t }} {{ 'contact.form.email' | t }}

{% assign name_attr = ‘contact.form.phone’ | t | handle %} {{ ‘contact.form.phone’ | t }} <input type=“tel” id=“ContactFormPhone” name=“contact[{{ ‘contact.form.phone’ | t }}]” placeholder=“{{ ‘contact.form.phone’ | t }}” pattern=“[0-9-]{11}” value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}"required>
{{ ‘contact.form.message’ | t }}

{% if form.body %}{{ form.body }}{% endif %}
{{ 'shopify.online_store.spam_detection.disclaimer_html' | t }}
{% assign form_success = form.posted_successfully? %}

{% endform %}