Problems with forms

[Edrol97]

Hi all,

I've got a form that I've added to my website. It's not operational yet, in that it doesn't send an email with the information in the form to my chosen address. How do I ensure it sends an email with the information in the form being sent to my email from the click of the button. I also would like to change the box style for my forms- not sure if this is possible- to an img element so that it looks drawn. Thanks. Code below:

  <form action="mailto:xxxxxxxxxxxxxxxxxxxxxx">
        <label for="name">Name:</label><br />
        <input type="text" id="name" name="name" required /><br /><br />

        <label for="email">Email:</label><br />
        <input type="email" id="email" name="email" required /><br /><br />

        <label for="telephone">Telephone</label><br />
        <input
          type="number"
          id="telephone"
          name="telephone"
          required
        /><br /><br />

        <label for="piece">What piece would you like?</label><br />
        <input type="text" id="piecename" name="piecename" required /><br />
        <br /><br />

        <label for="comments">Comments:</label><br />
        <textarea id="comments" name="comments" rows="4" cols="50"></textarea
        ><br /><br />
        <input type="submit" value="Submit" />
      </form>

@font-face {
  font-family: Eliot Lord;
  src: url(Fonts/Eliothand2-Regular.otf);
}
body {
  background-image: url(img/background/Shop%20page%20background.png);
  font-family: Eliot Lord;
}
label {
  background-color: white;
}
h1 {
  background-color: white;
}
.navbar {
  font-size: 3dvw;
  background: linear-gradient(to bottom right, #0000, #292929, #2d2d2d);
  font-family: "Times New Roman", Times, serif;
  height: auto;
  overflow: auto;
}
.navbar-master {
  background-color: #6c6c6c;
}
.navbar a {
  font-family: Eliot Lord;
  font-size: 2.6dvw;
  font-weight: 900;
  color: white;
  padding: 10px;
  text-decoration: none;
  cursor: url("img/background/cursors/pointer1.png");
}
.contrarynavigationbar a:hover {
  font-size: 2.6dvw;
  font-weight: 900;
  color: #afafaf;
}
.contrarynavigationbar a {
  text-align: left;
}
.contrarynavigationbar img {
  text-align: right;
}
input[type="text"],
[type="email"],
[type="number"] {
  font-size: 24px;
  font-family: Eliot Lord;
  background-image: url(img/background/form.png);
}
.activelinknav {
  background-image: url(img/background/Underline%20White.png);
  background-repeat: no-repeat;
  background-size: 100% 20%;
  background-position: 0px 85%;
}
a:hover,
img[onClick],
div[onclick] {
  cursor: url("img/background/cursors/pointer1.png"),
    url("img/background/cursors/Mouse%20cursor.png"),
    url("img/background/cursors/Finger%20cursor.png"), pointer;
}
body::-webkit-scrollbar {
  width: 1em round;
  overflow: scroll;
}
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgb(255, 255, 255);
}
body::-webkit-scrollbar-thumb {
  background-color: #2f2f2f;
  outline: 1px solid #000;
}
form:hover {
  cursor: url("img/background/cursors/text%20cursor");
}
[/CODE

 

[hebrerillo]

Hello @Edrol97 ,

If you want to be sure that the email is actually sent, that is something you will have to implement on the server side.

You can't send an email from the Frontend(browser) side in JavaScript. It has to be implemented in the server side: PHP, Java, Python...