CODEWITHSUNDEEP
nuxt.js
EsinYil
EsinYil

Reputation: 59

Submitting a form and redirecting with Nuxt2

I'm working on building a simple contact form with Nuxt2 where I'd like the user to be redirected to the homepage after submitting the form with their details.

This is the core of what I've got on the form right now. After hours of playing around, I can't get it to submit and redirect.

<form action="mailto:[email protected]" method="POST" @click="window.location.href = 'https://company.com/';">
<div>
  <div>
   <input type="text" name="name" id="name" autocomplete="name" placeholder="Name">
  </div>

  <div class="col-span-6 sm:col-span-3">
   <input type="email" name="email" id="email" autocomplete="email" placeholder="Email">
  </div>

  <div>
    <textarea name="message" id="message" autocomplete="message" placeholder="Your Message"></textarea>
  </div>

  <div class="xl:w-1/3 md:w-1/2 px-4">
   <a class="btn black-btn mt-2" type="submit" >Send Message</a>
  </div>
</div>
</form>

Any help would be appreciated. Thank you!

-- edit:

I have got the form working and it now submits a message to the mailbox provided, however I'm trying to add a toast notification to appear upon submitting the form to confirm that the message is sent.

This is my new form tag:

<form action="https://formsubmit.co/email" method="POST" @submit.prevent="formSubmit">

And this is in my script tag

methods: {
    formSubmit() {
      this.$router.push("/");
      this.$toast.show('Message sent')
    },
  }

Currently I don't get the "I'm not a robot" Checkbox upon submitting the form. But when I add @submit="() => formSubmit(true)" inside my form tag, and remove this this.$router.push("/") from the methods, it submits the form and then does the robot check, which is not how it should be. I've been playing around with this for a while and can't figure it out. If anyone has a suggestion, it would be appreciated!

Upvotes: 0

Views: 1378

Answers (2)

Seyed Abbas Seyedi
Seyed Abbas Seyedi

Reputation: 416

Please use @submit instead of @click, and use <button type="submit></button> instead of a tag.

Upvotes: 1

Jimmar
Jimmar

Reputation: 4459

change your form to be like this

<form  @submit.prevent="formSubmit">
...
</form>

and add a method in your methods with the name formSubmit, something like

methods: {
  formSubmit() {
    // this will just open the default mail app with the to, subject and body filled, you will need to replace those with what you want it to say.
    var link = "mailto:[email protected]?subject=email subject&body=email body";
    window.location.href = link;

    // navigate to the main page of your site
    this.$router.push("/");

    // if you want to navigate to some other url then you can replace the above line with this one
    // window.location.href = "http://www.google.com";
  }
}

Upvotes: 1

Related Questions