1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help with PHP contact form

Discussion in 'HTML & Website Design' started by vivalamac, Oct 10, 2017.

  1. #1
    Hi all,

    I have found a contact form online that seems to work and submit the relevant info input, but then I got a different style form with the same php but now all I receive in the email is just the names of the fields and nothing that was typed in. I have attached what code I've got and was wondering if anyone could help or point me in the right direction?

    <!DOCTYPE html>
    <html>
    
    <style>
    * {
      box-sizing: border-box;
    }
    body {
      background-color: #f1f1f1;
    }
    #regForm {
      background-color: #ffffff;
      margin: 100px auto;
      font-family: Raleway;
      padding: 40px;
      width: 50%;
      min-width: 300px;
    }
    h1 {
      text-align: center; 
    }
    input {
      padding: 10px;
      width: 100%;
      font-size: 17px;
      font-family: Raleway;
      border: 1px solid #aaaaaa;
    }
    /* Mark input boxes that gets an error on validation: */
    input.invalid {
      background-color: #ffdddd;
    }
    /* Hide all steps by default: */
    .tab {
      display: none;
    }
    button {
      background-color: #4CAF50;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      font-size: 17px;
      font-family: Raleway;
      cursor: pointer;
    }
    button:hover {
      opacity: 0.8;
    }
    #prevBtn {
      background-color: #bbbbbb;
    }
    /* Make circles that indicate the steps of the form: */
    .step {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbbbbb;
      border: none; 
      border-radius: 50%;
      display: inline-block;
      opacity: 0.5;
    }
    .step.active {
      opacity: 1;
    }
    /* Mark the steps that are finished and valid: */
    .step.finish {
      background-color: #4CAF50;
    }
    </style>
    <body>
    
    <form id="regForm" action="contact.php">
      <h1>Register:</h1>
      <!-- One "tab" for each step in the form: -->
    <div class="tab">
      
       
    <form method="post" action="contact.php">
    <label for="textfield">Name:</label>
    <label for="Name">Name:</label>
        <input type="text" name="Name" id="Name" required="required" class="required" minlength="2"/>
    
        <label for="City">City:</label>
        <input type="text" name="City" id="City" />
      </div>
      <div class="tab">Contact Info:
        <label for="Email">Email:</label>
                    <input type="text" name="Email" id="Email" />
        <label for="text">Tel:</label>
                    <input type="text" name="Tel" id="Tel" />
      </div>
      <div style="overflow:auto;">
        <div style="float:right;">
          <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
          <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
        </div>
      </div>
      <!-- Circles which indicates the steps of the form: -->
      <div style="text-align:center;margin-top:40px;">
        <span class="step"></span>
        <span class="step"></span>
        <span class="step"></span>
        <span class="step"></span>
      </div>
    </form>
    
    <script>
    var currentTab = 0; // Current tab is set to be the first tab (0)
    showTab(currentTab); // Display the crurrent tab
    
    function showTab(n) {
      // This function will display the specified tab of the form...
      var x = document.getElementsByClassName("tab");
      x[n].style.display = "block";
      //... and fix the Previous/Next buttons:
      if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
      } else {
        document.getElementById("prevBtn").style.display = "inline";
      }
      if (n == (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Submit";
      } else {
        document.getElementById("nextBtn").innerHTML = "Next";
      }
      //... and run a function that will display the correct step indicator:
      fixStepIndicator(n)
    }
    
    function nextPrev(n) {
      // This function will figure out which tab to display
      var x = document.getElementsByClassName("tab");
      // Exit the function if any field in the current tab is invalid:
      if (n == 1 && !validateForm()) return false;
      // Hide the current tab:
      x[currentTab].style.display = "none";
      // Increase or decrease the current tab by 1:
      currentTab = currentTab + n;
      // if you have reached the end of the form...
      if (currentTab >= x.length) {
        // ... the form gets submitted:
        document.getElementById("regForm").submit();
        return false;
      }
      // Otherwise, display the correct tab:
      showTab(currentTab);
    }
    
    function validateForm() {
      // This function deals with validation of the form fields
      var x, y, i, valid = true;
      x = document.getElementsByClassName("tab");
      y = x[currentTab].getElementsByTagName("input");
      // A loop that checks every input field in the current tab:
      for (i = 0; i < y.length; i++) {
        // If a field is empty...
        if (y[i].value == "") {
          // add an "invalid" class to the field:
          y[i].className += " invalid";
          // and set the current valid status to false
          valid = false;
        }
      }
      // If the valid status is true, mark the step as finished and valid:
      if (valid) {
        document.getElementsByClassName("step")[currentTab].className += " finish";
      }
      return valid; // return the valid status
    }
    
    function fixStepIndicator(n) {
      // This function removes the "active" class of all steps...
      var i, x = document.getElementsByClassName("step");
      for (i = 0; i < x.length; i++) {
        x[i].className = x[i].className.replace(" active", "");
      }
      //... and adds the "active" class on the current step:
      x[n].className += " active";
    }
    </script>
    
    </body>
    </html>
    HTML:
    <?php
    $EmailFrom = "test@gmail.com";
    $EmailTo = "test@gmail.com";
    $Subject = "Test";
    
    $Name = $_POST['Name'];
    $City = trim(stripslashes($_POST['City']));
    $Email = trim(stripslashes($_POST['Email']));
    $Tel = trim(stripslashes($_POST['Tel']));
    
    // validation
    
    
    
            //no errors, so send the email
    
            // prepare email body text
        $Body = "";
    $Body .= "Name: ";
    $Body .= $Name;
    $Body .= "\n";
    $Body .= "City: ";
    $Body .= $City;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $Email;
    $Body .= "\n";
    $Body .= "Tel: ";
    $Body .= $Tel;
    $Body .= "\n";
    
    
            // send email
            $success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
    
            print "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">";
    
            exit;
    
       
    ?>
    PHP:
    and all get in the email is what's in the image
    [​IMG]

    Many THanks,
    Marc
     
    vivalamac, Oct 10, 2017 IP
  2. SoftLink

    SoftLink Active Member

    Messages:
    103
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #2
    There are actually 2 forms and the first doesn't have an </form> tag.
    Also, the form has no method set but the php is looking for it to POST the data.
    It should be:
    <form id="regForm" action="contact.php" method="post">
    The second form tag needs to be removed.

    I'm not sure why you want 2 separate page displays for 4 fields. That usually aggravates users, just MHO.

    This code should work. I tested it here with the same php and it worked fine.

    
    <form id="regForm" action="contact.php" method="post">
      <h1>Register:</h1>
      <!-- One "tab" for each step in the form: -->
    <div class="tab">
       <label for="Name">Name:</label>
      <input type="text" name="Name" id="Name" required="required" class="required" minlength="2"/>
      <label for="City">City:</label>
      <input type="text" name="City" id="City" />
    </div>
    <div class="tab">Contact Info:
      <label for="Email">Email:</label>
      <input type="text" name="Email" id="Email" />
      <label for="text">Tel:</label>
      <input type="text" name="Tel" id="Tel" />
    </div>
    <div style="overflow:auto;">
      <div style="float:right;">
      <button type="button" id="prevBtn" onClick="nextPrev(-1)">Previous</button>
      <button type="button" id="nextBtn" onClick="nextPrev(1)">Next</button>
      </div>
      </div>
      <!-- Circles which indicates the steps of the form: -->
      <div style="text-align:center;margin-top:40px;">
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      </div>
    </form>
    
    Code (markup):
     
    SoftLink, Oct 10, 2017 IP
  3. vivalamac

    vivalamac Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    Thank so for the reply and help. It's going to have more fields. I'm just testing it at the mo.
    I've never really done php so this is all brand new to me (also very stressful).
    I'll give this a bash later and let you know how it turns out
     
    vivalamac, Oct 10, 2017 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Well first it might help if you axed the scripttardery that doesn't seem to do anything of value on a form that isn't big enough to waste time dividing into multiple tabs -- where even IF you wanted to use multiple tabs you likely don't even need that asshat scripting to do it. You're just flipping the bird at users with accessibility needs. Seriously if you can't fit a lousy FOUR form elements on screen, you've got problems.

    In all but the rarest cases, breaking up forms into multiple pages or tabs is a bad thing. It just pisses off users. If in production you have enough inputs to piss them off as a single page, you're asking too much of the user and breaking it up isn't fixing the problem.

    NEXT it might help if you learned what a fieldset was, and eased up on all the endless pointless "DIV for nothinjg" and STOPPED slopping style into the markup.

    THEN it might helped if you eased the **** up on $body.= for NOTHING all over the blasted place, and used a proper CRLF instead of just LF. The variables for NOTHING probably aren't helping matters either.

    Of course can I assume that in production you have ACTUAL server side validation, since scripttard client side validation is meaningless pointless incompetent drivel?

    PROBABLY would help too if you even had VALID markup, since, well, where's your bloody <head> and </head> since <style> is invalid outside of that!
     
    deathshadow, Oct 10, 2017 IP
  5. vivalamac

    vivalamac Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5

    Complete legend!!!! It actually worked. Seriously thanks for the help on this. Been trying to figure it for ages now. Can tell this is all new to me.

    Thanks again :)
     
    vivalamac, Oct 10, 2017 IP
  6. vivalamac

    vivalamac Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6

    This was no help what so ever.
     
    vivalamac, Oct 10, 2017 IP
  7. malky66

    malky66 Acclaimed Member

    Messages:
    3,996
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #7
    aah, ignorance is bliss.....
     
    malky66, Oct 11, 2017 IP