How do I submit an HTML form using formsubmit.co without redirection of the page?

user_13526242 0
Viewed 259

I have been trying to make a form in HTML (Bootstrap) that sends the information to my mail id. for this I am using formsubmit.

for some reason, when submiting the form, It redirects the page to a 'success' page. I do realise that there is a way to redirect it to a different page but I would rather have the section in which the form is present to disappear and show a 'success' section. For reference, here is my form code:

<section id="get-started" class="get-started">
  <div class="container">
    <div class="row text-center">
      <h1 class="display-3 fw-bold text-capitalize">Get started</h1>
      <div class="heading-line"></div>
      <!-- <p class="lh-lg">
        can write something here later
      </p> -->
    </div>

    <!-- START THE CTA CONTENT  -->
    <div class="row text-white">
      <div class="col-12 col-lg-6 gradient shadow p-3">
        <div class="cta-info w-100">
          <h4 class="display-4 fw-bold">Sign up for Beta!</h4>
          <p class="lh-lg">
            Join the waitlist for the beta program. Limited spots available!         </p>
          <h3 class="display-3--brief">What will be the next step?</h3>
          <ul class="cta-info__list">
            <li>Enter your details.</li>
            <li>Wait to be accepted into the beta program.</li>
            <li>Enjoy using Clickytize.</li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-lg-6 bg-white shadow p-3">
        <div class="form w-100 pb-2">
          <h4 class="display-3--title mb-5">Join the waitlist!</h4>
          <form action="https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a" method="POST" class="row">
            <input type="hidden" name="_captcha" value="false">

            <div class="col-lg-6 col-md mb-3">
              <input type="text" placeholder="First Name" id="inputFirstName" name="firstName" class="shadow form-control form-control-lg">
            </div>
            <div class="col-lg-6 col-md mb-3">
              <input type="text" placeholder="Last Name" id="inputLastName" name="lastName" class="shadow form-control form-control-lg">
            </div>
            <div class="col-lg-12 mb-3">
              <input type="email" placeholder="email address" id="inputEmail" name="emailId" class="shadow form-control form-control-lg">
            </div>
            <div class="col-lg-12 mb-3">
              <textarea name="message" placeholder="Link your social media profile" id="message" name="message" class="shadow form-control form-control-lg"></textarea>
            </div>
            <div class="text-center d-grid mt-1">
              <button type="submit" class="btn btn-primary rounded-pill pt-3 pb-3">
                submit
                <i class="fas fa-paper-plane"></i>
              </button>

              <script>
                form.onSubmit= (event)=>{
                  event.preventDefault();
                }

              </script>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

bootstrap-4 html javascript
1 Answers

If you want to prevent redirection of page and submit the form then you need to take care of submitting the form data using javascript.

First add onsubmit event attribute in your form tag like this:

<form  method="POST" class="row my-form" onsubmit="return submitForm()">

We can remove the action attribute from the form tag.

in Javascript:

function submitForm() {
        
        const form = document.querySelector('.my-form')
        const formData = new FormData(form)
        const url = 'https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a'
        fetch(
          url,
          {
            method: 'POST',
            body: formData
          }
        )
        return false
    }

We are using the native fetch API to send data to form-data to the endpoint. We are also using the FormData API to create an object of form inputs

Returing false prevents page from reload.

Read more about: Fetch API FormData API

user_166856340
Related