Issue with contact form. Need help please!

Question

0.00/5 (No votes)

See more:

I can;t seem to get the submit button to work on my contact form to send the form to an email address. Can anyone help?

HTML

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <style>
     
        </style>
                <h1>{{ page.title }}</h1>
      </div>
      {% if page.content.size > 0 %}
        <div class="rte">
          {{ page.content }}
        </div>
      {% endif %}

      <div class="contact-form form-vertical">
        {% form 'contact' %}
<div class="position_content" id="widgetu94_position_content">
<style>
     .column {
      float: left;
      width: 50%;
    }
    /* clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
.form-wrapper .field-list .field {
  position: relative;
  margin: -20px 0px 24px;
}
    </style>
  
    <div class="row">
      <div class="column" id="column_gap">
       <div>
      <label for="text">First Name:</label>
      <input type="text" id="first name" maxlength="10" required>
      </div>
      <div>
        <label for="text">Company:</label>
     <input type="text" id="company" maxlength="20">
        </div>       
      </div> 
      <div class="column" id="column_gap">
      </div>
 <div class="column" id="column_gap">
   <div>
    <label for="text">Last Name:</label>
    <input type="text" id="last name" maxlength="10" required>
    </div>
<div>
      <label for="text">Phone Number:</label>
    <input type="text" id="number" maxlength="12" required>
    </div>
      </div> </div>
  <div>
    <label for="text">Email Address:</label>
    <input type="text" id="email" maxlength="30" required></div>
<br><br>
      <div class="row">
      <div class="column" id="column_gap">
       <div>
      <label for="text">Rod Diameter (mm):</label>
      <input type="text" id="rod diameter" maxlength="5">
      </div>
      <div>
        <label for="text">Stroke (mm):</label>
     <input type="text" id="stroke" maxlength="5">
        </div>       
              <div>
        <label for="text">Extended Length (mm):</label>
     <input type="text" id="ex length" maxlength="5">
        </div>
      </div> 
 <div class="column" id="column_gap">
   <div>
    <label for="text">Tube Diameter (mm):</label>
    <input type="text" id="tube diameter" maxlength="5">
    </div>
<div>
      <label for="text">Closed Length (mm):</label>
    <input type="text" id="cl length" maxlength="5">
    </div>
      <div>
    <label for="text">Force Required (N):</label>
    <input type="text" id="force" maxlength="5">
    </div>
        </div> </div>

  <style>
    .column_gap {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      -moz-column-gap: 2em;
      -webkit-column-gap: 2em;
      column-gap: 2em;
    }
    .column {
      float: left;
      width: 50%;
    }
    /* clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    </style>
  
    <div class="row">
      <div class="column">
    <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
      </style>
      <input type="checkbox" id="checkbox">
      <label for="checkbox">Extended Gas Spring</label>
    </div>
      <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
      </style>
            <input type="checkbox" id="checkbox">
      <label for="checkbox">Standard Build</label>
    </div>
          <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
      </style>
      <input type="checkbox" id="checkbox">
      <label for="checkbox">Stainless Steel 316</label>
    </div>
          <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
      </style>
            <input type="checkbox" id="checkbox">
      <label for="checkbox">Locking External (with Cover)</label>
    </div>
              <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
      </style>
      <input type="checkbox" id="checkbox">
      <label for="checkbox">Locking Internal (Lever)</label>
    </div>
              <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
      </style>
<input type="checkbox" id="checkbox">
      <label for="checkbox">Adjustment Valve (Side)</label>
    </div>
                  <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
                    </style> </div> </div>
                            <div class="column">
    <div class="inline-field">
            <input type="checkbox" id="checkbox">
      <label for="checkbox">Compress (Traction)</label>
    </div>
          <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
      </style>
    <input type="checkbox" id="checkbox">
      <label for="checkbox">Stainless Steel 304</label>
    </div>
      </div>
      <div class="column">
          <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
      </style>
   <input type="checkbox" id="checkbox">
      <label for="checkbox">Locking Internal (Button)</label>
    </div>
              <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
      </style>
      <input type="checkbox" id="checkbox">
      <label for="checkbox">Locking Internal (Own)</label>
    </div>
              <div class="inline-field">
      <style>
        .inline-field input,
        .inline-field label {
          display: inline-block;
          margin-bottom: 0;
          vertical-align: middle;
        }
      </style>
      <input type="checkbox" id="checkbox">
      <label for="checkbox">Adjustment Valve (Enclosed)</label>
        </div></div></div>
   <br>
       <div>
    <label for="text">End Fitting Requirements:</label>
    <input type="text" id="requirements" maxlength="300"></div>
     <div>
    <label for="text">Special Requirements:</label>
    <input type="text" id="sprequirements" maxlength="300"></div>
  
      </div> 
      <button class="submit-btn NoWrap rounded-corners clearfix colelem" id="u96-4" data-muse-temp-textContainer-sizePolicy="true" data-muse-temp-textContainer-pinning="true" type="submit" value="Submit" tabindex="25"><!-- content -->
       <div style="border-radius: 8px; height:11px; width: 200px; height: 25px; text-align= center; text-align= middle; ">
        <p>Submit</p>
       </div>
          {% if form.posted_successfully? %}
            <p class="note form-success">
              {{ 'contact.form.post_success' | t }}
            </p>
          {% endif %}


        {% endform %}
      </div>
    </div>
  </div>
</div>

What I have tried:

Tried different types of contact form, but this is the only one I could build that had the correct layout I wanted.

Posted 23-Jan-18 1:51am

Member 13638897

Updated 24-Jan-18 17:27pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Altaf Ansari · Answer 1 · 2018-01-24T17:27:00

The code you posted does not contain any form.. so it will not work like a form and it will not generate action type postback.. and you can't sent email without server side language like php or asp or c#.. if you are using html with php then try something like this:

<?php
    if(isset($_POST['name']))
    {
    $name = trim($_POST["name"]);
    $email = trim($_POST["email"]);
    $subject = trim($_POST["subject"]);
    $message = trim($_POST["message"]);
    $answerbox = trim($_POST["answerbox"]);
    if(strlen($name)<2) {
        print "<p>Please type your name.</p>";
    }else if(strlen($subject)<2) {
        print "<p>Please type a subject.</p>";
    }else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        print  "<p>Please type a valid email address.</p>";
    }else if(strlen($message)<10) {
        print "<p>Please type your message.</p>";
    }else if($answerbox != 15) {
        print "<p>Please answer the math question.</p>";
    }else{
                $headers =  'From: '.$email. "\r\n" .
                            'Reply-To: '.$email . "\r\n" .
                            'X-Mailer: PHP/' . phpversion();
        mail('me@mymail.me',$subject,$message,$headers);
        print "mail succesuffully sent";
    }

}
    ?>

        <form name="contact" action="form2.php" method="post">
            <input type="hidden" name="submitted" value="true"/>
            <label for="YourName">Your Name:</label>
            <input type="text" name="name" class="required" />

            <label for="YourEmail">Your Email:</label>
            <input type="text" name="email" class="required"/>

            <label for="Subject">Subject:</label>
            <input type="text" name="subject" class="required"  />

            <label for="YourMessage">Your Message:</label>
            <textarea  name="message" class="required"></textarea>
            <p class="c3">10 + 5 =<input type="text" name="answerbox" id="answerbox" /></p>

        <fieldset>
            <input type="submit" name="submit" id="submit" value="Send" class="required"/>
            <input type="reset" id="reset" value="Reset"/>      
        </fieldset>

    </form>