PHP 7 FPDF Example to Convert Dynamic HTML to PDF Document & Add Tables Using HTML5 User Input Field

Welcome folks today in this blog post we will be adding dynamic data to the pdf document from the html5 form using the fpdf library in php. All the full source code of the application is shown below.

Get Started

First of all make the index.html file which will contain the user form where we take the user information as shown below

index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
 
    <title>Convert HTML to PDF using FPDF</title>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-lg-7 mx-auto">
                <h5 class="text-center mt-5 mb-5">Convert HTML to Pdf using Fpdf</h5>
                <form action="convert-pdf.php" method="post">
                <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" class="form-control" id="name" name="name">
                </div>
                <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="text" class="form-control" id="email" name="email">
                </div>
                <div class="mb-3">
                <label for="message" class="form-label">Message</label>
                <input type="text" class="form-control" id="message" name="message">
                </div>
                <div class="mb-3">
                <button type="submit" class="btn btn-primary mb-3">Submit</button>
                </div>
                </form>
            </div>
            
        </div>        
    </div>
 
  </body>
</html>

<!doctype html>

<head>

<title>Convert HTML to PDF using FPDF</title>

</head>

<body>

<h5 class="text-center mt-5 mb-5">Convert HTML to Pdf using Fpdf</h5>

</div>

<label for="email" class="form-label">Email</label>

</div>

<label for="message" class="form-label">Message</label>

</div>

<button type="submit" class="btn btn-primary mb-3">Submit</button>

</div>

</form>

</div>

</body>

</html>

Now we have to make the php script which will take the user submitted information and try to insert that information inside the pdf document as shown below

convert-pdf.php

<?php
#includes the fpdf main libarary
require_once("fpdf.php");
 
#recieving the form data
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
    

$pdf = new FPDF();
$pdf->AddPage();
 
$pdf->SetFont('arial','',12);
$pdf->Cell(0,10,"Contact Details",1,1,'C');
$pdf->Cell(40,10,"Name",1,0);
$pdf->Cell(75,10,"Email",1,0);
$pdf->Cell(75,10,"Message",1,0);
$pdf->Ln();
 
$pdf->Cell(40,10,$name,1,0);
$pdf->Cell(75,10,$email,1,0);
$pdf->Cell(75,10,$message,1,0);
 
$file = time().'.pdf';
$pdf->output($file,'D');
?>

<?php

#includes the fpdf main libarary

require_once("fpdf.php");

#recieving the form data

$name = $_POST['name'];

$email = $_POST['email'];

$message = $_POST['message'];

$pdf = new FPDF();

$pdf->AddPage();

$pdf->SetFont('arial','',12);

$pdf->Cell(0,10,"Contact Details",1,1,'C');

$pdf->Cell(40,10,"Name",1,0);

$pdf->Cell(75,10,"Email",1,0);

$pdf->Cell(75,10,"Message",1,0);

$pdf->Ln();

$pdf->Cell(40,10,$name,1,0);

$pdf->Cell(75,10,$email,1,0);

$pdf->Cell(75,10,$message,1,0);

$file = time().'.pdf';

$pdf->output($file,'D');