Home > Mobile >  Add form with validation using php and html to website
Add form with validation using php and html to website

Time：02-10

Update: I'm using NicePage to create the website, and something in it is breaking the scriptgenerator.net code. I'm getting this error in the browser.

Uncaught TypeError: $(...).validate is not a function

Most of my experience in coding has been in COBOL, and I'm not that familiar with php and css.

I need to create a customer form on a website. In order to do this I used the HTML-PHP-jQuery simple contact form v2 found on enter image description here

Following the instructions, I downloaded the generator code and the js required.

Here is the form.php as copied from the generator.

<title>Contact Form</title> 
    <style type="text/css">
        #contact_wrapper {
            width:100%; /* you can change the form width by just changing this line */
            font-family:Arial, Helvetica, sans-serif;
            font-size:90%;
            margin-bottom:20px;
        }
        #contact_wrapper legend {
            display: inherit;
            border:none;
            width:auto;
            font-size:120%;
            font-weight:bold;
        }
        
        #contact_wrapper .genField { 
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 20px;
            
            line-height: 1.42857143;
            color: #222;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            -webkit-box-sizing:border-box; 
            -moz-box-sizing:border-box; 
            box-sizing:border-box;
        }
        #contact_wrapper .genField.auto { width:auto; }
        #contact_wrapper textarea.genField { min-height:200px; }
        
        #contact_wrapper .button {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
            color: #fff;
        }
        #contact_wrapper .f_left { float:left; }
        #contact_wrapper .f_radio{ font-weight:normal; display:block; }
        
        #contact_wrapper .submit{ background-color: #337ab7; border-color: #2e6da4; padding:6px 30px; margin-left:10px; }
        #contact_wrapper .reset { background-color: #d9534f; border-color: #d43f3a; }
        
        #contact_wrapper .submit:hover{ background-color: #286090; }
        #contact_wrapper .reset:hover   { background-color: #C9302C; }
        
        #contact_wrapper input.error, #contact_wrapper textarea.error { border: 1px dashed #F41724; }
        
        
        #contact_wrapper label {
            display: block;
            width:auto;
            line-height: 1.8;
            vertical-align: top;
            cursor: pointer;
            color: #222;
            margin-top:12px;
        }
        #contact_wrapper label.error {font-size:80%; color:#F41724; margin-top:2px; float: right; }
        
        #contact_wrapper .buttons, #contact_wrapper .captcha { margin-top:15px; }
        
        #contact_wrapper .captcha label.f_left { margin:7px 10px inherit inherit;}

        #contact_wrapper #results p {
            padding: 20px;
            color: #FFFFFF;
            font-weight: bold;
            border-radius: 5px;
        }
        
        #contact_wrapper #results p.sending_success { background-color: #337AB7; }
        #contact_wrapper #results p.sending_error   { background-color: #D9534F; }
        
        .clearfix:after { 
           content: "."; 
           visibility: hidden; 
           display: block; 
           height: 0; 
           clear: both;
        }
    </style>
    
</head>
<body>

<div id="contact_wrapper">

    <fieldset id="form_wrapper">
        <legend>Contact Form</legend>
        <form name="contactme" id="contactme" action="" method="post"> 
                        <label for="fname">First Name *</label>
            <input type="text" name="fname" id="fname"  />
                        <label for="email">Email *</label>
            <input type="text" name="email" id="email"  /> 
             
            <label for="subject">Subject *</label>
            <input type="text" name="subject" id="subject"  /> 
             
            <label for="message">Message *</label>
            <textarea name="message" id="message" ></textarea>
                        
            <div ></div>
            <div >       
                <input type="reset"  name="reset" value="X" />
                <input type="submit"  name="submit" value="Submit Form" />
            
                <span style="float:right; margin-top:8px;">
                    <a href="http://scriptgenerator.net/html-php-jquery-simple-contact-form-v2/" title="Valid Contact Form">
                        <img    src="http://www.scriptgenerator.net/generator/html-php-contact-form-mailer-generator_files/validform.jpg" 
                                alt="Valid Contact Form" width="20" height="20" />
                    </a>
                </span>
            </div>
        </form>
        
 
    </fieldset>
    
    <!-- We will output the results from process.php here -->
    <div id="results" style="display:none;"></div>
    
</div>


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var msj = "Please enter valid data"; // you can insert here a customized error message
        $('#contactme').validate({
            debug: false,
            rules: {
                // You can set rools to validatate fields here
                fname: { required: true, minlength:2 },
                email: { required: true, email: true },
                subject: { required: true, minlength:2 },               
                message: { required: true, minlength:2 },               
                    
            },
            messages: {
                // You can also set a custom message for each field
                fname: "Please enter a valid Name",
                email: "Please enter a valid email address",
                subject: msj,
                message: msj,               
                            
            },
            submitHandler: function(form) {
                $("#form_wrapper").hide();
                // do adicional stuff of form validation
                $.post("process.php", $("#contactme").serialize(), function(data) {
                    $("#results").html(data).show(1000);
                });
            }
        });
    });
</script>

and the process.php

<?php
// Wait a second to simulate a some latency
usleep(500000);

function m($m, $t=NULL){
    return "<p class='".($t=="s"?"sending_success":"sending_error")."'>".$m."</p>";
}

global $email_send_to, $email_recived_from, $success_msj, $error_msj;

// edit email where contact form is sent
$email_send_to = "";
// edit your domain
$email_recived_from = "";

// edit message for a successfully sent contact form
$success_msj = "Your message has been sent. Thank you for your feedback. We will contact you shortly if needed";
// edit error message
$error_msj = "Ups, There has been an error while sending. Please try again in a few minutes or panic appropriately!";
// edit subject here. If user enters no subject, we will use this one
$standard_subject = "Someone contacted you on ".$email_recived_from;

//------------------------------------------------------------------------------------------------//
function secure($post) {
    if (is_array($post)):
        foreach($post as $item=>$value):
            $post[$item] = term( $value ); //This helps not to break code if single or doble cuotes are sent to process
            $post[$item] = trim( $value ); // Strip whitespace (or other characters) from the beginning and end of a string
        endforeach;
    else:
        $post = term( $post ); //This helps not to break code if single or doble cuotes are sent to process
        $post = trim( $post ); // Strip whitespace (or other characters) from the beginning and end of a string
    endif;
    $post = mynl2br($post);
    
    // insert here aditional security functions
    
    return $post;
}
//------------------------------------------------------------------------------------------------//
// if someone sends you cods or scripts via contact form, this will prevent it from being interpreted
function mynl2br($post) { 
   return strtr($post, array("\t"=>"&nbsp;&nbsp;&nbsp;&nbsp;", "<"=>"&lt;", ">"=>"&gt;", "\r\n" => "<br />", "\r" => "<br />", "\n" => "<br />"));
} 

//------------------------------------------------------------------------------------------------//
function term($post){
//  DO NOT INDENT THIS. adicional spaces are interpreted. This helps not to break code if single or doble cuotes are sent to process
$post = <<<term
$post
term;
return $post; 
}
//------------------------------------------------------------------------------------------------//


// Pull out data from contact form
$fname = (isset($_POST['fname'])?secure($_POST['fname']):'');
$email = (isset($_POST['email'])?secure($_POST['email']):'');
$subject = (isset($_POST['subject'])?secure($_POST['subject']):'');
$message = (isset($_POST['message'])?secure($_POST['message']):'');

//------------------------------------------------------------------------------------------------//
$email_recived_from  = str_replace ("http://", "", $email_recived_from );
$email_recived_from  = str_replace ("www.", "", $email_recived_from );

$from = $email_recived_from." <contact@".$email_recived_from.">";

$mail_subject = (empty($subject)?$standard_subject:$subject); 
//------------------------------------------------------------------------------------------------//

//------------------------------------------------------------------------------------------------//
// setting HTML email function
function sendHTMLemail($body,$from, $to, $subject) {
    
    global $success_msj, $error_msj;
    $boundary = uniqid("HTMLEMAIL"); 
    
    $headers  = "From: $from\r\n";
    $headers .= "MIME-Version: 1.0\r\n"; 
    
    $headers .= "Content-Type: multipart/alternative;".
                "boundary = $boundary\r\n\r\n"; 
    $headers .= "This is a MIME encoded message.\r\n\r\n"; 
    
    $headers .= "--$boundary\r\n".
                "Content-Type: text/html; charset=utf-8\r\n".
                "Content-Transfer-Encoding: base64\r\n\r\n"; 

    $headers .= chunk_split(base64_encode($body));

    return ( mail($to,$subject,"",$headers,"-f".$from) ? m($success_msj,"s") : m($error_msj) );
} 
//------------------------------------------------------------------------------------------------//


ob_start();?>
<html>
<head>
    <!--
        Lots of email clients strip all head information like CSS style classes. 
        That is why we included all style directly into the body using span tags.
        Table was used for the layout to increase outlook compatibility and other old email clients.    
    -->
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor="#8ED4F4" >
 
 
<table width="100%"  cellspacing="0" bgcolor="#8ED4F4" >
    <tr>
        <td valign="top" align="center">
     
 
            <table width="80%" style=" width:80%;min-width:326px;margin-top:10px;" cellpadding="20" cellspacing="0" bgcolor="#FFFFFF">
                <tr>
                    <td style="background-color:#337AB7; text-align:center; padding:10px;" align="center">
                        <span style="color:#fff;font-family:arial; font-size:140%;">A new person <span style="color:#FF9366">contacted</span> you:</span>
                    </td>
 
                </tr>
                
                <tr>
 
                    <td bgcolor="#FFFFFF">
 
                        <p>
                            <span style="font-size:12px;font-weight:normal;color:#666;font-family:arial;line-height:150%;">
                                                                <br /><strong>First Name:</strong> <?=$fname?>
                                <br /><strong>Email:</strong> <?=$email?>
                                <br /><strong>Subject:</strong> <?=$subject?>
                                <br /><strong>Message:</strong> <?=$message?>
                                
                            </span>
                        </p>
                    </td>
                </tr>
                <tr>
                    <td style="background-color:#337AB7; text-align:center;" align="center" valign="top" colspan="2">
                        <span style="font-size:11px;color:#fff;line-height:200%;font-family:arial;text-decoration:none;">Contact service provided by <br />
                            <a style="color:#fff; font-weight:bold; font-size:110%; text-decoration:none;" href="http://scriptgenerator.net" title="scriptgenerator.net">
                                <span style="color:#FF9366">Script</span>Generator
                            </a>
                        </span>
                    </td>
                </tr>
            </table>
            
        </td>
    </tr>
</table>
</body>
</html>
<? $HTML = ob_get_clean();


// display succes or error message depending is email has been sent or not
echo sendHTMLemail($HTML,$from,$email_send_to,$mail_subject);
?>

There are 2 js files, jquery-1.4.2-mini.js and jquery.validate.min.js, which I can provide if necessary, but can also be downloaded from the form generator website.

Here's what it looks like when I imbed it.

enter image description here

CodePudding user response：

When I preview you code of process.php everything looks like on the provided preview screenshot, as you can see in the following snippet:

<!DOCTYPE html>
<html>

<head>
  <title>Contact Form</title>
  <style type="text/css">
    #contact_wrapper {
      width: 100%;
      /* you can change the form width by just changing this line */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 90%;
      margin-bottom: 20px;
    }
    
    #contact_wrapper legend {
      display: inherit;
      border: none;
      width: auto;
      font-size: 120%;
      font-weight: bold;
    }
    
    #contact_wrapper .genField {
      display: block;
      width: 100%;
      height: 34px;
      padding: 6px 20px;
      line-height: 1.42857143;
      color: #222;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    #contact_wrapper .genField.auto {
      width: auto;
    }
    
    #contact_wrapper textarea.genField {
      min-height: 200px;
    }
    
    #contact_wrapper .button {
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
      color: #fff;
    }
    
    #contact_wrapper .f_left {
      float: left;
    }
    
    #contact_wrapper .f_radio {
      font-weight: normal;
      display: block;
    }
    
    #contact_wrapper .submit {
      background-color: #337ab7;
      border-color: #2e6da4;
      padding: 6px 30px;
      margin-left: 10px;
    }
    
    #contact_wrapper .reset {
      background-color: #d9534f;
      border-color: #d43f3a;
    }
    
    #contact_wrapper .submit:hover {
      background-color: #286090;
    }
    
    #contact_wrapper .reset:hover {
      background-color: #C9302C;
    }
    
    #contact_wrapper input.error,
    #contact_wrapper textarea.error {
      border: 1px dashed #F41724;
    }
    
    #contact_wrapper label {
      display: block;
      width: auto;
      line-height: 1.8;
      vertical-align: top;
      cursor: pointer;
      color: #222;
      margin-top: 12px;
    }
    
    #contact_wrapper label.error {
      font-size: 80%;
      color: #F41724;
      margin-top: 2px;
      float: right;
    }
    
    #contact_wrapper .buttons,
    #contact_wrapper .captcha {
      margin-top: 15px;
    }
    
    #contact_wrapper .captcha label.f_left {
      margin: 7px 10px inherit inherit;
    }
    
    #contact_wrapper #results p {
      padding: 20px;
      color: #FFFFFF;
      font-weight: bold;
      border-radius: 5px;
    }
    
    #contact_wrapper #results p.sending_success {
      background-color: #337AB7;
    }
    
    #contact_wrapper #results p.sending_error {
      background-color: #D9534F;
    }
    
    .clearfix:after {
      content: ".";
      visibility: hidden;
      display: block;
      height: 0;
      clear: both;
    }
  </style>

</head>

<body>

  <div id="contact_wrapper">

    <fieldset id="form_wrapper">
      <legend>Contact Form</legend>
      <form name="contactme" id="contactme" action="" method="post">
        <label for="fname">First Name *</label>
        <input type="text" name="fname" id="fname"  />
        <label for="email">Email *</label>
        <input type="text" name="email" id="email"  />

        <label for="subject">Subject *</label>
        <input type="text" name="subject" id="subject"  />

        <label for="message">Message *</label>
        <textarea name="message" id="message" ></textarea>

        <div ></div>
        <div >
          <input type="reset"  name="reset" value="X" />
          <input type="submit"  name="submit" value="Submit Form" />

          <span style="float:right; margin-top:8px;">
                        <a href="http://scriptgenerator.net/html-php-jquery-simple-contact-form-v2/"
                            title="Valid Contact Form">
                            <img src="http://www.scriptgenerator.net/generator/html-php-contact-form-mailer-generator_files/validform.jpg"
                                alt="Valid Contact Form" width="20" height="20" />
                        </a>
                    </span>
        </div>
      </form>
    </fieldset>
  </div>
</body>

</html>

CodePudding user response：

There is php class named php-form-validator at https://github.com/Umamad/php-form-validator that can make your job easier.

Page link：https//www.codepudding.com/Mobile/294244.html

Prev:Not Able to Iterate in Each loop to change Opacity of Set of Elements
Next:jQuery review DOM and react
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding