Преобразование form HTML в Pdf и отправка на почту?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="#" class="validation-wizard wizard-circle wizard clearfix" id="calc" role="application" novalidate="novalidate"><div class="steps clearfix"><ul role="tablist"><li role="tab" class="first current" aria-disabled="false" aria-selected="true"><a id="calc-t-0" href="#calc-h-0" aria-controls="calc-p-0"><span class="current-info audible">current step: </span><span class="step">1</span> Услуги</a></li><li role="tab" class="disabled" aria-disabled="true"><a id="calc-t-1" href="#calc-h-1" aria-controls="calc-p-1"><span class="step">2</span> Тарифы</a></li><li role="tab" class="disabled" aria-disabled="true"><a id="calc-t-2" href="#calc-h-2" aria-controls="calc-p-2"><span class="step">3</span> Условия</a></li><li role="tab" class="disabled" aria-disabled="true"><a id="calc-t-3" href="#calc-h-3" aria-controls="calc-p-3"><span class="step">4</span> Заявка</a></li><li role="tab" class="disabled last" aria-disabled="true"><a id="calc-t-4" href="#calc-h-4" aria-controls="calc-p-4"><span class="step">5</span> Оплата</a></li></ul></div><div class="content clearfix"> 
<!-- Step 1 --> 
<div class="col-md-12"><hr><h4 class="pull-right mb10">Итоговая цена <span class="output2">0</span>.руб</h4></div> 
<h6 id="calc-h-0" tabindex="-1" class="title current">Услуги</h6> 
<section id="calc-p-0" role="tabpanel" aria-labelledby="calc-h-0" class="body current" aria-hidden="false"><hr><br> 
<div class="row"> 
<div class="col-md-12"> 
<div class="nav-tabs-custom"> 
<div class="row"> 
<div class="col-md-3"> 
<div class="form-group"> 
<label>Ваше ФИО</label> 
<input type="text" class="form-control required" id="fname" name="fname" placeholder="Иванов Иван Иванович" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"> 
</div> 
</div> 
<div class="col-md-3"> 
<div class="form-group"> 
<label>Дата рождения</label> 
<input type="text" class="form-control required" id="datepicker" name="datepicker" placeholder="31.12.2000"> 
</div> 
</div> 
<div class="col-md-3"> 
<div class="form-group"> 
<label>E-mail</label> 
<input type="text" class="form-control required" id="email" name="email" placeholder="name@mail.ru"> 
</div> 
</div> 
<div class="col-md-3"> 
<div class="form-group"> 
<label>Телефон</label> 
<input type="text" class="form-control required" id="phone" name="phone" placeholder="+7(000)000-00-00"> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class="row"> 
<div class="col-md-3"> 
<div class="form-group"> 
<label>Улица, квартира, дом</label> 
<input type="text" class="form-control required" id="street" name="street" placeholder="ул.Ленина, дом.1"> 
</div> 
</div> 
<div class="col-md-3"> 
<div class="form-group"> 
<label>Город:</label> 
<input type="text" class="form-control required" id="pcity" name="pcity" placeholder="Москва"> 
</div> 
</div> 
<div class="col-md-3"> 
<div class="form-group"> 
<label>Почтовый индекс:</label> 
<input type="text" class="form-control required" id="pindex" name="pindex" placeholder="101000"> 
</div> 
</div> 
<div class="col-md-3"> 
<div class="form-group"> 
<label>Суд первой инстанции</label> 
<select class="custom-select form-control required" name="itemtype1" id="location"> 
<option value="" selected="" disabled="">Выберите регион</option> 
<option value="Алтайский край">Алтайский край</option> 
<option value="Амурская область">Амурская область</option> 
<option value="Архангельская область">Архангельская область</option> 
<option value="Астраханская область">Астраханская область</option> 
<option value="Белгородская область">Белгородская область</option> 
<option value="Брянская область">Брянская область</option> 
<option value="Владимирская область">Владимирская область</option> 
<option value="Волгоградская область">Волгоградская область</option> 
<option value="Вологодская область">Вологодская область</option> 
<option value="Воронежская область">Воронежская область</option> 
<option value="Еврейская автономная область">Еврейская автономная область</option> 
<option value="Забайкальский край">Забайкальский край</option> 
<option value="Ивановская область">Ивановская область</option> 
<option value="Иркутская область">Иркутская область</option> 
<option value="Кабардино-Балкарская Республика">Кабардино-Балкарская Республика</option> 
<option value="Калининградская область">Калининградская область</option> 
<option value="Калужская область">Калужская область</option> 
<option value="Камчатский край">Камчатский край</option> 
<option value="Карачаево-Черкесская Республика">Карачаево-Черкесская Республика</option> 
<option value="Кемеровская область">Кемеровская область</option> 
<option value="Кировская область">Кировская область</option> 
<option value="Костромская область">Костромская область</option> 
<option value="Краснодарский край">Краснодарский край</option> 
<option value="Красноярский край">Красноярский край</option> 
<option value="Курганская область">Курганская область</option> 
<option value="Курская область">Курская область</option> 
<option value="Ленинградская область">Ленинградская область</option> 
<option value="Липецкая область">Липецкая область</option> 
<option value="Магаданская область">Магаданская область</option> 
<option value="Москва">Москва</option> 
<option value="Московская область">Московская область</option> 
<option value="Мурманская область">Мурманская область</option> 
<option value="Ненецкий автономный округ">Ненецкий автономный округ</option> 
<option value="Нижегородская область">Нижегородская область</option> 
<option value="Новгородская область">Новгородская область</option> 
<option value="Новосибирская область">Новосибирская область</option> 
<option value="Омская область">Омская область</option> 
<option value="Оренбургская область">Оренбургская область</option> 
<option value="Орловская область">Орловская область</option> 
<option value="Пензенская область">Пензенская область</option> 
<option value="Пермский край">Пермский край</option> 
<option value="Приморский край">Приморский край</option> 
<option value="Псковская область">Псковская область</option> 
<option value="Республика Адыгея">Республика Адыгея</option> 
<option value="Республика Алтай">Республика Алтай</option> 
<option value="Республика Башкортостан">Республика Башкортостан</option> 
<option value="Республика Бурятия">Республика Бурятия</option> 
<option value="Республика Дагестан">Республика Дагестан</option> 
<option value="Республика Ингушетия">Республика Ингушетия</option> 
<option value="Республика Калмыкия">Республика Калмыкия</option> 
<option value="Республика Карелия">Республика Карелия</option> 
<option value="Республика Коми">Республика Коми</option> 
<option value="Республика Крым">Республика Крым</option> 
<option value="Республика Марий Эл">Республика Марий Эл</option> 
<option value="Республика Мордовия">Республика Мордовия</option> 
<option value="Республика Саха (Якутия)">Республика Саха (Якутия)</option> 
<option value="Республика Северная Осетия — Алания">Республика Северная Осетия — Алания</option> 
<option value="Республика Татарстан">Республика Татарстан</option> 
<option value="Республика Тыва">Республика Тыва</option> 
<option value="Республика Хакасия">Республика Хакасия</option> 
<option value="Ростовская область">Ростовская область</option> 
<option value="Рязанская область">Рязанская область</option> 
<option value="Самарская область">Самарская область</option> 
<option value="Санкт-Петербург">Санкт-Петербург</option> 
<option value="Саратовская область">Саратовская область</option> 
<option value="Сахалинская область">Сахалинская область</option> 
<option value="Свердловская область">Свердловская область</option> 
<option value="Севастополь">Севастополь</option> 
<option value="Смоленская область">Смоленская область</option> 
<option value="Ставропольский край">Ставропольский край</option> 
<option value="Тамбовская область">Тамбовская область</option> 
<option value="Тверская область">Тверская область</option> 
<option value="Томская область">Томская область</option> 
<option value="Тульская область">Тульская область</option> 
<option value="Тюменская область">Тюменская область</option> 
<option value="Удмуртская Республика">Удмуртская Республика</option> 
<option value="Ульяновская область">Ульяновская область</option> 
<option value="Хабаровский край">Хабаровский край</option> 
<option value="Ханты-Мансийский автономный округ - Югра">Ханты-Мансийский автономный округ - Югра</option> 
<option value="Челябинская область">Челябинская область</option> 
<option value="Чеченская Республика">Чеченская Республика</option> 
<option value="Чувашская Республика">Чувашская Республика</option> 
<option value="Чукотский автономный округ">Чукотский автономный округ</option> 
<option value="Ямало-Ненецкий автономный округ">Ямало-Ненецкий автономный округ</option> 
<option value="Ярославская область">Ярославская область</option> 
</select> 
</div> 
</div> 
<div class="col-md-12"> 
<div class="form-group" style="margin-bottom: 0px;"> 
<label>Правовые области :</label> 
<div class="c-inputs-stacked"> 
<label><input type="radio" class="custom-control-input required" name="itemtype2" id="pravo1" value="Возмещение ущерба"> Возмещение ущерба</label> 
<label><input type="radio" class="custom-control-input required" name="itemtype2" id="pravo2" value="Жилищное право"> Жилищное право</label> 
<label><input type="radio" class="custom-control-input required" name="itemtype2" id="pravo6" value="Налоговое право"> Налоговое право</label> 
<label><input type="radio" class="custom-control-input required" name="itemtype2" id="pravo7" value="Трудовое право"> Трудовое право</label> 
<label><input type="radio" class="custom-control-input required" name="itemtype2" id="pravo8" value="Административное право"> Административное право</label> 
<label><input type="radio" class="custom-control-input required" name="itemtype2" id="pravo7" value="Хозяйственное право"> Хозяйственное право</label> 
</div> 
</div> 
</div> 
</div> 
</section> 
<!-- Step 2 --> 
<h6 id="calc-h-1" tabindex="-1" class="title">Тарифы</h6> 
<section id="calc-p-1" role="tabpanel" aria-labelledby="calc-h-1" class="body" aria-hidden="true" style=""><hr><br> 
<div class="row" id="radio"> 
<!--<div class="col-md-3"> 
<div class="form-group"> 
<label for="wintType1">Укажите промежуток взноса:</label> 
<select class="custom-select form-control required" name="itemtype3" id="dateold"> 
<option value="" selected disabled>Не указан</option> 
<option value="5000">Годовой</option> 
<option value="2">Трёхгодовой</option> 
</select> 
</div> 
</div>--> 
<div class="col-md-3"> 
<div class="form-group"> 
<label for="wintType1">Выберите Ваш коэфициент:</label> 
<select class="custom-select form-control required" name="itemtype3" id="dateold"> 
<option value="" selected="" disabled="">Не указан</option> 
<option value="2000">2000</option> 
<option value="3000">3000</option> 
<option value="4000">4000</option> 
<option value="5000">5000</option>     
<option value="6000">6000</option> 
<option value="7000">7000</option> 
<option value="8000">8000</option>     
</select> 
</div> 
</div> 
<div class="col-md-9"> 
<div class="form-group"> 
<label>Выберите тариф:</label> 
<div class="radio"> 
<label><input type="radio" class="custom-control-input required" name="itemtype4" id="block1" value="1" data-fn="mn"> *1. Тариф "Базовый"</label> 
<label><input type="radio" class="custom-control-input required" name="itemtype4" id="block2" value="2" data-fn="mn"> *2. Тариф "Комфорт"</label> 
<label><input type="radio" class="custom-control-input required" name="itemtype4" id="block3" value="3" data-fn="mn"> *3. Тариф "Премиум"</label> 
</div> 
</div> 
</div> 
<div class="col-md-12" id="radioblock1"> 
<div class="col-md-6"> 
<img class="img-responsive" src="/templates/ru/images/basic.jpg" alt=""> 
</div> 
<div class="col-md-6"><p>- Защита в суде первой инстанции</p></div> 
</div> 
<div class="col-md-12" id="radioblock2" style="display: none;"> 
<div class="col-md-6"> 
<img class="img-responsive" src="/templates/ru/images/comfort.jpg" alt=""> 
</div> 
<div class="col-md-6"><p>- Защита в суде первой и апелляционной инстанции</p></div> 
</div> 
<div class="col-md-12" id="radioblock3" style="display: none;"> 
<div class="col-md-6"> 
<img class="img-responsive" src="/templates/ru/images/premium.jpg" alt=""> 
</div> 
<div class="col-md-6"><p>- Защита в суде первой, второй (апелляционной) и третьей (кассационной) инстанции</p></div> 
</div> 
 
<script type="text/javascript"> 
$("#radio").ready(function() { 
		$("#radioblock1").show(); 
		$("#radioblock2").hide(); 
		$("#radioblock3").hide(); 
    $('input:radio[name=itemtype4]').change(function() { 
        if (this.id == 'block1') { 
        	$("#radioblock1").show('slow'); 
            $("#radioblock2").hide('slow'); 
            $("#radioblock3").hide('slow'); 
        } 
        else if (this.id == 'block2') { 
            $("#radioblock2").show('slow'); 
            $("#radioblock1").hide('slow'); 
            $("#radioblock3").hide('slow'); 
        } 
        else if (this.id == 'block3') { 
            $("#radioblock3").show('slow'); 
            $("#radioblock2").hide('slow'); 
            $("#radioblock1").hide('slow'); 
        } 
    }); 
}); 
</script> 
</div> 
</section> 
<!-- Step 3 --> 
<h6 id="calc-h-2" tabindex="-1" class="title">Условия</h6> 
<section id="calc-p-2" role="tabpanel" aria-labelledby="calc-h-2" class="body" aria-hidden="true" style="display: none;"><hr><br> 
<div class="row"> 
<div class="col-md-12"><iframe src="/uploads/details-ru.pdf" style="width: 100%; height: 500px !important;"></iframe></div> 
<div class="col-md-12"> 
<div class="form-group"> 
<div class="c-inputs-stacked"> 
<label><input type="checkbox" class="custom-control-input required" name="details" id="details" value="1"> С условиями ознакомлен и согласен</label> 
</div> 
</div> 
</div> 
</div> 
</section> 
<!-- Step 4 --> 
<h6 id="calc-h-3" tabindex="-1" class="title">Заявка</h6> 
<section id="calc-p-3" role="tabpanel" aria-labelledby="calc-h-3" class="body" aria-hidden="true" style="display: none;"><hr><br> 
<div class="row"> 
<div class="col-md-12"> 
<center><h2>Введенные данные</h2></center> 
<table class="table table-bordered"> 
<tbody> 
<tr> 
<td>ФИО:</td> 
<td><span class="fname"></span></td> 
</tr> 
<tr> 
<td>Дата рождения:</td> 
<td><span class="datepicker"></span></td> 
</tr> 
<tr> 
<td>E-mail:</td> 
<td><span class="email"></span></td> 
</tr> 
<tr> 
<td>Улица, квартира, дом:</td> 
<td><span class="street"></span></td> 
</tr> 
<tr> 
<td>Город:</td> 
<td><span class="pcity"></span></td> 
</tr> 
<tr> 
<td>Почтовый индекс:</td> 
<td><span class="pindex"></span></td> 
</tr> 
<tr> 
<td>Суд первой инстанции</td> 
<td><span class="location"></span><span class="itemtype1"></span></td> 
</tr> 
<tr> 
<td>Правовые области :</td> 
<td><span class="itemtype2"></span></td> 
</tr> 
<tr> 
<td>Коэфициент для расчёта суммы финансовой помощи:</td> 
<td><span class="itemtype3"></span><span class="dateold"></span></td> 
</tr> 
<tr> 
<td>Тариф:</td> 
<td><span class="itemtype4"></span></td> 
</tr> 
</tbody> 
</table> 
</div> 
<div class="col-md-12"> 
<div class="form-group"> 
<div class="c-inputs-stacked"> 
<label><input type="checkbox" class="custom-control-input required" name="dogovor" id="dogovor" value="1"> подтвердите правильность введенных данных</label> 
</div> 
</div> 
</div> 
</div> 
</section> 
<!-- Step 4 --> 
<h6 id="calc-h-4" tabindex="-1" class="title">Оплата</h6> 
<section id="calc-p-4" role="tabpanel" aria-labelledby="calc-h-4" class="body" aria-hidden="true" style="display: none;"><hr> 
<div class="row"> 
<div class="col-md-12"> 
Для оплаты нажмите здесь. 
</div> 
</div> 
</section> 
<div class="col-md-12"><hr> 
<script> 
if( typeof window['openPayPage'] != 'function' ) 
{ 
	function openPayPage(e) 
	{ 
	  var h = 165, 
		  w = 500; 
	  window.open(e, '', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, (screen.availWidth - w)/2)+',top='+Math.max(0, (screen.availHeight - h)/2)); 
	} 
} 
</script> 
 
<fieldset style="padding: 0 10px; margin:10px 0; background: #ddd; border-radius: 4px;"> 
<h2>Итого к оплате <output>0</output> руб.</h2> 
 
<!-- <a href="/billing.html/payhide/pay/sign/BriH2Fd9zD" onclick="openPayPage(this.href); return false;">Оплатить!</a>--> 
<div class="mes"></div> 
 
</fieldset> 
 
</div> 
</div><div class="actions clearfix"><ul role="menu" aria-label="Pagination"><li class="disabled" aria-disabled="true"><a href="#previous" role="menuitem">Назад</a></li><li aria-hidden="false" aria-disabled="false"><a href="#next" role="menuitem">Дальше</a></li><li aria-hidden="true" style="display: none;"><a href="#finish" role="menuitem">Отправить</a></li></ul></div></form>