How to send Form Data From the Front-End (HTML, Javascript)


  • Hello there good people, i have found a code of a contact us form and trying to figure out where i should write my email so i will receive the messages there ! may u help please ?

    <style>
    /* Style inputs with type="text", select elements and textareas */
    input[type=text], select, textarea {
      width: 100%; /* Full width */
      padding: 12px; /* Some padding */ 
      border: 1px solid #ccc; /* Gray border */
      border-radius: 4px; /* Rounded borders */
      box-sizing: border-box; /* Make sure that padding and width stays in place */
      margin-top: 6px; /* Add a top margin */
      margin-bottom: 16px; /* Bottom margin */
      resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
    }
    
    /* Style the submit button with a specific background color etc */
    input[type=submit] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    /* When moving the mouse over the submit button, add a darker green color */
    input[type=submit]:hover {
      background-color: #45a049;
    }
    
    /* Add a background color and some padding around the form */
    .container {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
    }
    
    </style>
    <div class="container">
      <form action="action_page.php">
    
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
    
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    
        <label for="country">Country</label>
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
    
        <label for="subject">Subject</label>
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    
        <input type="submit" value="Submit">
    
      </form>
    </div>
    


  • Hey again @Michael-Constantine

    When it comes to sending emails or form data you need a backend (e.g. PHP server). You cannot send form data from the front-end.

    However you might be able to use a 3rd party tool such as https://formspree.io/

    I haven't used formspree so I do not know much about it but based on their home page it sounds like something you might be able to use to send your form data.



  • Hey again @Michael-Constantine

    When it comes to sending emails or form data you need a backend (e.g. PHP server). You cannot send form data from the front-end.

    However you might be able to use a 3rd party tool such as https://formspree.io/

    I haven't used formspree so I do not know much about it but based on their home page it sounds like something you might be able to use to send your form data.



  • I am trying to do something similar as my first coding project, and while I am attempting to do it with another language at the moment, it seems like a pretty similar case maybe? I am a beginner so sorry if my answer is stupid but..

    From what I understand there are a few ways to do this.

    • You can Install and use any SMTP server such as Postcast server, Apache James server, cmail server etc.

    • Use the SMTP server available from the host provider (I don't know what this even means so sorry! But thought it appropriate to include.)

    • Or, lastly you can use the SMTP server provided by other companies such as gmail.

    The third option is the one I think I will be trying, but I am still at the early stages of knowing what I am doing so sorry if this post is utterly useless to you since I have no idea how to code what it is I've provided you with.



  • This forum is setup for new developers who don't know all the lingo yet. So you good.

    So my understanding you like to setup a backend server so you can handle form submissions, correct?