Nextjs contactus form redirects to external URL once "submit" is pressed

See more:

form

ReactJS

next.js

I have created contact us form, and I want users of my website to redirect to an external link once the "Submit" Button is pressed after filling the form. The submit button is at the end of code. Here is the code:

I have been looking for online references but could not find a solution that guides how to re-direct to an external link once submit is pressed.

What I have tried:

  1  import {
  2    Button,
  3    FormControl,
  4    FormLabel,
  5    Input,
  6    ModalHeader,
  7    ModalFooter,
  8    ModalBody,
  9    ModalCloseButton,
 10    useToast,
 11  } from '@chakra-ui/react'
 12  import { useState } from 'react'
 13  import { API } from "aws-amplify"
 14  import { createCandidate } from '../src/graphql/mutations'
 15  
 16  export const ContactForm = ({ initialRef, onClose }) => {
 17    const toast = useToast()
 18    const [formState, setFormState] = useState({
 19      name: '',
 20      designation: '',
 21      companyname: '',
 22      email: '',
 23      phone: '',
 24      comments: '',
 25    })
 26  
 27    const handleContactFormSubmit = async (e) => {
 28      e.preventDefault()
 29      const { name, designation, companyname, email, phone, comments} = formState
 30      if (name && designation && companyname && email && phone && comments) {
 31        try {
 32          await API.graphql({
 33            query: createCandidate,
 34            variables: {
 35              input: {
 36                name,
 37                designation,
 38                companyname,
 39                email,
 40                phone,
 41                comments,
 42              },
 43            },
 44          })
 45  
 46          toast({
 47            title: 'Congratulations',
 48            position: 'top-right',
 49            description: 'Successfully submitted!',
 50            status: 'success',
 51            duration: 5000,
 52            isClosable: true,
 53          })
 54          onClose()
 55        } catch (e) {
 56          toast({
 57            title: 'Error',
 58            position: 'top-right',
 59            description: e.message,
 60            status: 'error',
 61            duration: 5000,
 62            isClosable: true,
 63          })
 64        }
 65      } else {
 66        toast({
 67          title: 'Uh-Oh 😥',
 68          position: 'top-right',
 69          description: 'Please verify all fields are filled out.',
 70          status: 'error',
 71          duration: 5000,
 72          isClosable: true,
 73        })
 74      }
 75    }
 76  
 77    return (
 78      <>
 79        <ModalHeader>Enter Your Details</ModalHeader>
 80        <ModalCloseButton />
 81        <form onSubmit={handleContactFormSubmit}>
 82          <ModalBody pb={6}>
 83            <FormControl>
 84              <FormLabel>Name</FormLabel>
 85              <Input
 86                ref={initialRef}
 87                placeholder=""
 88                value={formState.name}
 89                onChange={(e) =>
 90                  setFormState({ ...formState, name: e.target.value })
 91                }
 92              />
 93            </FormControl>
 94  
 95            <FormControl mt={4}>
 96              <FormLabel>Designation</FormLabel>
 97              <Input
 98                placeholder=""
 99                value={formState.designation}
100                onChange={(e) =>
101                  setFormState({ ...formState, designation: e.target.value })
102                }
103              />
104            </FormControl>
105  
106            <FormControl mt={4}>
107              <FormLabel>Company Name</FormLabel>
108              <Input
109                placeholder=""
110                value={formState.companyname}
111                onChange={(e) =>
112                  setFormState({ ...formState, companyname: e.target.value })
113                }
114              />
115            </FormControl>
116  
117            <FormControl mt={4}>
118              <FormLabel>Email</FormLabel>
119              <Input
120                placeholder=""
121                type="email"              
122                value={formState.email}
123                onChange={(e) =>
124                  setFormState({ ...formState, email: e.target.value })
125                }
126              />
127            </FormControl>
128            <FormControl mt={4}>
129              <FormLabel>Phone Number</FormLabel>
130              <Input
131                placeholder=""
132                minLength="10"
133                value={formState.phone}
134                onChange={(e) =>
135                  setFormState({ ...formState, phone: e.target.value })
136                }
137              />
138            </FormControl>
139  
140            <FormControl mt={4} >
141              <FormLabel>I would like to know about</FormLabel>
142              <Input
143                placeholder=""
144                value={formState.comments}
145                onChange={(e) =>
146                  setFormState({ ...formState, comments: e.target.value })
147                }
148              />
149            </FormControl>
150          </ModalBody>
151  
152          <ModalFooter>
153            <Button colorScheme="red" mr={3} type="submit">
154              Submit
155            </Button>
156            <Button onClick={onClose}>Cancel</Button>
157          </ModalFooter>
158        </form>
159      </>
160    )
161  }