Send editable form by email - phpmailer

Question

I have the following form:
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.form_wrapper {
background:#fff;
box-sizing:border-box;
padding:15px;
margin:auto 0;
position:relative;
z-index:1;
-webkit-box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
-moz-box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
}
.form_container {
padding:5px;
border:1px dashed #ccc;
}
.form_wrapper h2 {
font-size:1.5em;
line-height:1.5em;
margin:0;
}
.form_wrapper .title_container {
text-align:center;
margin:-15px -15px 15px;
padding:15px 0;
border-bottom:1px dashed #ccc;
}
.form_wrapper h3 {
font-size:1.1em;
font-weight:normal;
line-height:1.5em;
margin:0;
}
.form_wrapper .row {
margin:10px -15px;
margin-top: 2%;
}
.form_wrapper .row > div {
padding:0 15px;
box-sizing:border-box;
}
.form_wrapper .col_half {
width:50%;
float:left;
}
.form_wrapper .col_half1 {
width:33%;
float:left;
}
.form_wrapper .col_half2 {
width:70%;
float:left;
}
.form_wrapper .col_half9 {
width:30%;
float:left;
}
.form_wrapper .col_half3 {
width:25%;
float:left;
}
.form_wrapper .col_half10 {
width:22%;
float:left;
}
.form_wrapper .col_half6 {
width:16.5%;
float:left;
}
.form_wrapper .col_half8 {
width:17.5%;
float:left;
}
.form_wrapper .col_half7 {
width:15%;
float:left;
}
.form_wrapper .col_half4 {
width:40%;
float:left;
}
.form_wrapper .col_half5 {
width:100%;
float:left;
}
.form_wrapper .col_half11 {
width:42%;
float:left;
}
.form_wrapper label {
display:block;
margin:0 0 5px;
}
.form_wrapper .input_field, .form_wrapper .textarea_field {
position:relative;
}
.form_wrapper .input_field > span, .form_wrapper .textarea_field > span {
position:absolute;
left:0;
top:0;
color:#333;
height:100%;
border-right:1px solid #ccc;
text-align:center;
width:30px;
}
.form_wrapper .textarea_field > span {
border-bottom:1px solid #ccc;
max-height:35px;
}
.form_wrapper .input_field > span > i, .form_wrapper .textarea_field > span > i {
padding-top:12px;
}
.form_wrapper input[type="text"], .form_wrapper input[type="email"], .form_wrapper input[type="tel"], textarea {
width:100%;
padding:10px 10px 10px 35px;
border:1px solid #ccc;
box-sizing:border-box;
outline:none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
.form_wrapper input[type="text"]:focus, .form_wrapper input[type="email"]:focus, .form_wrapper input[type="tel"]:focus, textarea:focus {
-webkit-box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
-moz-box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
border:1px solid #f5ba1a;
}
.credit{
position:relative;
z-index:1;
text-align:center;
padding:15px;
color:#f5ba1a;
}
.credit a{
color:#daa106;
}
#media (max-width: 600px) {
.form_wrapper .col_half {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
#media (max-width: 600px) {
.form_wrapper .col_half1 {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
#media (max-width: 600px) {
.form_wrapper .col_half2 {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
#media (max-width: 600px) {
.form_wrapper .col_half3 {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-header">
<h4 class="modal-title">IDENTIFICAÇÃO UTENTE</h4>
</div>
<div class="form_wrapper">
<div class="form_container">
<form class="insert_form7">
<div class="row clearfix">
<div class="col_half3">
<label>Código Utente</label>
<div class="input-group-prepend"><span class="input-group-text"> <i class="fa fa-id-card-o" aria-hidden="true"></i></span>
<input type="text" id="codigoinf1" name="codigoinf" value="'.$row["CodigoUtente"].'" class="form-control" readonly="true">
</div>
</div>
<div class="col_half">
<label>Nome Utente</label>
<div class="input-group-prepend"><span class="input-group-text"><i aria-hidden="true" class="fa fa-child"></i></span>
<input type="text" name="nome" value="'.$row["nome"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Data Nascimento</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-birthday-cake" aria-hidden="true"></i></span>
<input type="text" name="DataNasc" value="'.$row["DataNasc"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Valência</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-university" aria-hidden="true"></i></span>
<input type="text" name="Destino" value="'.$row["Destino"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Nacionalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-globe" aria-hidden="true"></i></i></span>
<input type="text" name="Nacionalidade" value="'.$row["Nacionalidade"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Naturalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Naturalidade" value="'.$row["Naturalidade"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Distrito</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Distrito" value="'.$row["Distrito"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Concelho</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Concelho" value="'.$row["Concelho"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half1">
<label>Freguesia</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Freguesia" value="'.$row["Freguesia"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half11">
<label>Morada</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
<input type="text" name="Morada" value="'.$row["Morada"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half6">
<label>Código Postal</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-code" aria-hidden="true"></i></span>
<input type="text" name="CodPostal" value="'.$row["CodPostal"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half">
<label>Encarregado de Educação</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user-o" aria-hidden="true"></i></span>
<input type="text" name="representante" value="'.$row["representante"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half7">
<label>Parentesco</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-anchor" aria-hidden="true"></i></span>
<input type="text" name="Parentesco" value="'.$row["Discricao"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half8">
<label>Contato</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<input type="text" name="telefone" value="'.$row["telefone"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="modal-header">
<h4 class="modal-title">IDENTIFICAÇÃO DA MÃE</h4>
</div>
<div class="row clearfix">
<div class="col_half">
<label>Nome da Mãe</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-female" aria-hidden="true"></i></span>
<input type="text" name="nomemae" value="'.$row["nomemae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Data Nascimento</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-birthday-cake" aria-hidden="true"></i></span>
<input type="text" name="datamae" value="'.$row["datamae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Sexo</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-venus-mars" aria-hidden="true"></i></span>
<input type="text" name="Sexomae" value="'.$row["Sexomae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Estado Civil</label>
<div class="input-group-prepend"><span class="input-group-text"><i aria-hidden="true" class="far fa-rings-wedding"></i></span>
<input type="text" name="civilmae" value="'.$row["civilmae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Nacionalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-globe" aria-hidden="true"></i></i></span>
<input type="text" name="Nacionalidademae" value="'.$row["Nacionalidademae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Naturalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Naturalidademae" value="'.$row["Naturalidademae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Distrito</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Distritomae" value="'.$row["Distritomae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Concelho</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Concelhomae" value="'.$row["Concelhomae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half1">
<label>Freguesia</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Freguesiamae" value="'.$row["Freguesiamae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half11">
<label>Morada</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
<input type="text" name="Moradamae" value="'.$row["Moradamae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half6">
<label>Código Postal</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-code" aria-hidden="true"></i></span>
<input type="text" name="CodPostalmae" value="'.$row["CodPostalmae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half8">
<label>Contato</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<input type="text" name="telefonemae" value="'.$row["telefonemae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Habilitações</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<input type="text" name="Habilitacoesmae" value="'.$row["Habilitacoesmae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Profissão</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-building" aria-hidden="true"></i></span>
<input type="text" name="Profissaomae" value="'.$row["Profissaomae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Email</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input type="Email" name="Emailmae" value="'.$row["Emailmae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="modal-header">
<h4 class="modal-title">IDENTIFICAÇÃO DO PAI</h4>
</div>
<div class="row clearfix">
<div class="col_half">
<label>Nome do Pai</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-male" aria-hidden="true"></i></span>
<input type="text" name="nomepai" value="'.$row["nomepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Data Nascimento</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-birthday-cake" aria-hidden="true"></i></span>
<input type="text" name="datapai" value="'.$row["datapai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Sexo</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-venus-mars" aria-hidden="true"></i></span>
<input type="text" name="Sexopai" value="'.$row["Sexopai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Estado Civil</label>
<div class="input_field"> <span><i aria-hidden="true" class="far fa-rings-wedding"></i></span>
<input type="text" name="civilpai" value="'.$row["civilpai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Nacionalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-globe" aria-hidden="true"></i></i></span>
<input type="text" name="Nacionalidadepai" value="'.$row["Nacionalidadepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Naturalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Naturalidadepai" value="'.$row["Naturalidadepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Distrito</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Distritopai" value="'.$row["Distritopai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Concelho</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Concelhopai" value="'.$row["Concelhopai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half1">
<label>Freguesia</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Freguesiapai" value="'.$row["Freguesiapai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half11">
<label>Morada</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
<input type="text" name="Moradapai" value="'.$row["Moradapai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half6">
<label>Código Postal</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-code" aria-hidden="true"></i></span>
<input type="text" name="CodPostalpai" value="'.$row["CodPostalpai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half8">
<label>Contato</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<input type="text" name="telefonepai" value="'.$row["telefonepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Habilitações</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<input type="text" name="Habilitacoespai" value="'.$row["Habilitacoespai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Profissão</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-building" aria-hidden="true"></i></span>
<input type="text" name="Profissaopai" value="'.$row["Profissaopai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Email</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input type="Email" name="Emailpai" value="'.$row["Emailpai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
</form>
</div>
</div>
I intend to email this form with the existing data to the updating user in need. Therefore, the form must be sent in an editable form.
I am in doubt as to how best to do this.
I can export to a doc (word) file and send the doc file by email.
But what I wanted was to send the form exactly as it is and the user to make changes if necessary, is that possible?
The site is not exposed to the outside, it is localhost