'How to prevent google app script reloading/redirecting my webpage after form data submission ..?

I am using google app script to submit form data to my email. It's a webpage contact form. But by default after hitting the submit button it takes to a different page and shows a "result:success" weird kinda message. I want to prevent that reload or redirect. How can I do that?

HTML

<form id="email-form" class="gform" action="https://script.google.com/macros/s/AKfyJu890G2t-RuhJxTNIA/exec" method="post">
        <div class="email-name">
            
            <input id="name" name="name" type="text" class="form-control" placeholder="write name" autocomplete="off">
        </div>
        <div class="email-main">
            
            <input id="email" name="email" type="text" class="form-control" placeholder="write email" autocomplete="off">
        </div>
        <div class="email-subject">
            
            <input id="subject" name="subject" type="text" class="form-control" placeholder="write related sub" autocomplete="off">
        </div>
        <div class="email-message">
            
            <textarea id="message" name="message" class="form-control" placeholder="write message here"></textarea>
        </div>

        <button id="send-email" type="submit">SUBMIT EMAIL</button>

        
    </form>

I can add an alert using onclick event but still the reload happens. Please provide javascript code for preventing the default behavior for this form.



Solution 1:[1]

I've been able to get around this before by moving the submit button out of the form.

<form id="email-form" class="gform" action="https://script.google.com/macros/s/AKfyJu890G2t-RuhJxTNIA/exec" method="post">
        <div class="email-name">
            
            <input id="name" name="name" type="text" class="form-control" placeholder="write name" autocomplete="off">
        </div>
        <div class="email-main">
            
            <input id="email" name="email" type="text" class="form-control" placeholder="write email" autocomplete="off">
        </div>
        <div class="email-subject">
            
            <input id="subject" name="subject" type="text" class="form-control" placeholder="write related sub" autocomplete="off">
        </div>
        <div class="email-message">
            
            <textarea id="message" name="message" class="form-control" placeholder="write message here"></textarea>
        </div>
    </form>

        <button id="send-email" type="submit">SUBMIT EMAIL</button>

If that does not work you can try using target to a hidden iframe.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 scott_p