I have long web form to collect data, I am sharing example but actual form may be even long.
I need to know how can i print the form data in the similar format as user sees it, Simply as if user filled the PDF form and Printed it same so that printed version look as he sees it.
Code pen link https://codepen.io/anon/pen/ewYrwv I am not sure how to make it work with A4 Page as if data was being printed from PDF form. It doesnt need to be responsive as form will be printed from desktop only..
I put container with at 800 pixel and it still prints out side of page margin.
I tried to play around with CSS http://www.tutorialspoint.com/css/css_paged_media.htm
but this doesnt make help much
.container{max-width:800px;}
@page {
size: 8.5in 11in; /* width height */
margin: 2cm; /* All margins set to 2cm */
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="form-row">
<h1 class="text-center">Form</h1>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First Name</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="First Name">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Last Name</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Mobile</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Mobile">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Landline</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Landline">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Start Date</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Start Date">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">End Date</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="End Date">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Time</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Time">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Venue</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Trainer</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Court</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Recurring
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1" disabled>
<label class="form-check-label" for="inlineCheckbox1">Sun</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2" disabled>
<label class="form-check-label" for="inlineCheckbox2">Mon</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3" disabled>
<label class="form-check-label" for="inlineCheckbox3">Tue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="4" disabled>
<label class="form-check-label" for="inlineCheckbox3">Wed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="5" disabled>
<label class="form-check-label" for="inlineCheckbox3">Thu</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="6" disabled>
<label class="form-check-label" for="inlineCheckbox3">Fri</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="7" disabled>
<label class="form-check-label" for="inlineCheckbox3">Sat</label>
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button> <button type="submit" class="btn btn-primary">PRINT</button>
</form>
</div>