Make Online Invoice Sample with pdf Invoice and Email Delivery System Form

Now a days Online invoice are getting more importance. Most of products and services are being sold on internet online. Paper work and written invoices letters are lengthy procedures. Online invoices are the neat and clean method to convey the invoice to clients. Invoices can be sent through email system. We are going to make a complete invoice sending system. Which has the following parts to cover:

  1. Html Form Invoice Sample
  2. Javascript Form validation
  3. Making html email templates
  4. A php tutorial for pdf making with fpdf library
  5. PHP Mailer (PHP email Sender) with pdf attachment
  6. Form to show all invoices

This tutorial is first part of series of making online Invoice sample. In this tutorial we are making a HTML form for invoice sample. I am making this HTML form within PHP script. Because in further tutorials we shall add more functionality to this form by the help of PHP, JQuery and JavaScript. The different parts of this tutorial will be covered in different other posts.

Html form Invoice Sample

To make HTML invoice sample form, first of all we have to create two files named “invoice_form_sample.php” and “my_invoice_style.css”. First file is a php script file as we are writing all our html invoice sample form code in php script file. You can use this form code and save it as html file if you only need the form and other functionality is in another file. But I used PHP script file to hold this HTML code as I have to add further php script to complete whole project. Second file is a style sheet to give proper style to this invoice sample.

The good thing about this form is that it will auto adjust in the width you will provide it in outer wrapper division in the code. The code for “invoice_form_sample.php” is give below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Invoice Form</title>
<link rel="stylesheet" type="text/css" href="my_invoice_style.css" media="screen" />

</head>

<body>
       <div class="outer_container">

<form  class="form" name="myform" action="#" method="post"  onsubmit="" enctype="multipart/form-data" >
  

              <h2>Invoice Form </h2>

     <div class="fileds_container_div">
     
<div class="section_heading">Invoice Info </div>

<div class="heading_over_textbox"> Invoice No. </div>
      <input  type="text" name="inv_no" />
<div class="heading_over_textbox">Invoice Issue Date</div>
      <input  type="text" name="inv_date" />
      

     <div class="section_heading">Invoice Sender Information </div>

<div class="heading_over_textbox">From  (Individual/Company) </div>
      <input   type="text" name="from_name"/>
<div class="heading_over_textbox">Email Address(Sender)</div>
      <input   type="text" name="return_email"/>

      <div class="section_heading">Invoice Reciever Information </div>
      
      
<div class="heading_over_textbox">To  (Individual/Company) </div>
      <input   type="text" name="to_name"/>
<div class="heading_over_textbox">Email Address(Reciever)</div>
      <input  type="text" name="to_email"/>
      
     
      
      
<div class="section_heading">Billing Detail </div>

                 <!--ROW-I of billing widh header title -->  
<div class="row_cover">
<div class="row_item">
<div class="heading_over_textbox">Date</div>
      <input   type="text" name="dt1"/>
</div>
 

<div class="row_item">
<div class="heading_over_textbox">Description</div>
     <textarea  class="" cols="40" rows="4"   name="descrip1"  /></textarea>
</div>
 
<div class="row_item">
<div class="heading_over_textbox">Amount</div>
     <input   type="text" name="prow1" id="prow1"/>
</div>     
</div>  <!--End row outer class--> 
 
<!--ROW-II of billing --> 
<div class="row_cover"> 
<div class="row_item">
   <input   type="text" name="dt2"/>
</div>
<div class="row_item">
    <textarea  cols="40" rows="4"   name="descrip2"  /></textarea>
</div>
<div class="row_item">
     <input   type="text" name="prow2" id="prow2"/>
</div>
</div> 
<!--ROW-III of billing --> 
 
<div class="row_cover">  
<div class="row_item">
   <input  type="text" name="dt3"/>
</div>
<div class="row_item">
    <textarea  cols="40" rows="4"   name="descrip3"  /></textarea>
</div>
<div class="row_item">
     <input  type="text" name="prow3" id="prow3"/>
</div>
</div> 
<!--ROW-IV of billing for Total --> 
 
 <div class="row_cover"> 
<div class="row_item">
  <!--blank space equal to one box cell-->     
</div>
<div class="row_item">
   <span style="margin-left:50%;">TOTAL: </span>
</div>
<div class="row_item">
     <input   type="text" readonly="readonly" value="0" name="total" id="total"/>
</div>
</div>
 <input style="background-color:#66CC33; padding:2px;"  type="submit" name="submited" value="Send Invoice"  />


 </form>
 
</div>
</div>
 
            
 
</body>
</html>

 

Styling code for invoice sample form will be saved in “my_invoice_style.css” and is given below:

/* CSS for invoice ******************************************************************/
.outer_container {
/*this is as outer division container on the webpage */
width:95%;
background-color: #EAEAEA  ;
margin:0 auto;
display:block;
-moz-border-radius:20px;
 border-radius: 20px;
padding:3px 0 20px 3px;
 
}
.outer_container h2 {
margin:0 0 10px 30%;
color:#669900;
padding-top:10px;
background:none;
text-transform:uppercase;
}

.outer_container .section_heading {
color: #FFFFFF;
font-size:1em;
font-weight:bolder;
font-stretch: normal;
margin-bottom:5px;
margin:3% 0 3% 0;
display:block;
background-color: #669900;
width:90%;
height:40px;
line-height:40px;
padding:3px 3px 3px 10px;
}

.outer_container input[type="text"]{
width:88%;
max-width:88%;
height:25px;
background-color:#FFFFFF;
display:block;
margin-bottom:5px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.outer_container .heading_over_textbox{
color: #669900;
font-size:11px;
font-weight:bolder;
font-stretch: normal;
margin-bottom:5px;
margin-left:6%;
display:block;
}


.outer_container .fileds_container_div {
/*this is a main object container */
width:100%;
margin-right:3%;
margin-left:3%;
position:relative;
top:10px;
display:block;
}


.outer_container .fileds_container_div .row_cover{
width:100%;
position:relative;

}
.outer_container .fileds_container_div .row_cover .row_item {
/*container of small textbox */

width:30%;
display: block  ;
float:left;
margin-top:5px;
position:relative;
top:0px;
padding:3px;
height:90px;
}

.outer_container .fileds_container_div .row_cover .row_item input[type="text"]{
max-width: 100%;
  min-height: 50px;
  height:50px;
  line-height: 1.5em; 
  background-color:#FFFFFF;
}
.outer_container .fileds_container_div .row_cover .row_item textarea {
/*properties of small box textbox */
max-width: 100%;
width:95%;
  min-height: 50px;
  height:50px;
  font-size:0.65em;
  line-height: 1.05em; 
  margin:3px 2px 2px 2px;
  background-color:#FFFFFF;
/*margin-bottom:5px;*/
}


.form input, textarea{
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;  
border: 1px solid #ddd;
outline: none;
text-align:center; 
font-size:20px; 
color:#990000; font-weight:bold; 
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
-o-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
 
.form input:focus, textarea:focus  {
border-color: #83b4db;
box-shadow: 0 0 10px #8fbfe6;
-moz-box-shadow: 0 0 10px #8fbfe6;
-webkit-box-shadow: 0 0 10px #8fbfe6;
}

/*End for Invoice Style Sheet **************************************************************** */




The final product will be looked like as shown in below image.

Invoice Sample - Tipsmoon.com

In next tutorial of this series i shall teach you how to add javascript form validation as it may only accept correct formats and also add other functionalities like auto sum in total text box and jquery calendar in date fields etc.

You can watch live demo of this tutorial here

Leave a Reply

Your email address will not be published. Required fields are marked *