Send editable form by email - phpmailer

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

Related

display:flex expands row when elements fill over 100%

Why is display:flex on #skipperForm producing weird result of all elements on same line?
Curiously, if we change to display:block we get a much better result. But why is flex not working?
body{
max-width:800px;
margin:0 auto;
}
#links a{
text-decoration:none;
}
#links ul{
list-style-type:none;
margin:0 15px;
padding:0;
}
#links li{
display:inline;
}
#skipperForm{
display:flex;
justify-content:center;
margin-top:20px;
}
.radio, .dt, .bc, .label{
width:20vw;
margin:0;
max-width:200px;
}
.label{
display:inline-flex;
justify-content:center;
font-size:20px;
}
.break{
flex-basis:100%;
height:0;
}
#text{
width:60%;
}
.row{
margin-bottom:25px;
}
<form id='skipperForm'>
<label class='label' for='res'>Reservation</label>
<label class='label' for='sail'>Sail</label>
<label class='label' for='xcl'>Cancel</label>
<div class='break'></div>
<input id='res' type='radio' class='radio row' name='sailType' value='RES'>
<input id='sail' type='radio' class='radio row' name='sailType' value='SAIL'>
<input id='xcl' type='radio' class='radio row' name='sailType' value='XCL'>
<div class='break'></div>
<label class='label' for='date'>Date</label>
<label class='label' for='start'>Start Time</label>
<label class='label' for='end'>End Time</label>
<div class='break'></div>
<input id='date' type='text' class='dt row' name='date'>
<input id='start' type='text' class='dt row' name='start'>
<input id='end' type='text' class='dt row' name='end'>
<div class='break'></div>
<label class='label' for='boat'>Boat</label>
<label class='label' for='spots'>Crew Spots</label>
<label class='label' for='customCrew'>Custom Crew</label>
<div class='break'></div>
<input id='boat' type='text' class='bc row' name='boat'>
<input id='spots' type='text' class='bc row' name='spots'>
<input id='customCrew' type='text' class='bc row' name='customCrew'>
<div class='break'></div>
<textarea id='text' class='row' placeholder='message crew'></textarea>
<div class='break'></div>
<input type='submit' class='row' name='submit' value='update'>
</form>
If you want them to be displayed in row without over cross page width you can add only one line of code to your skipperForm div like this: flex-wrap:wrap;
body{
max-width:800px;
margin:0 auto;
}
#links a{
text-decoration:none;
}
#links ul{
list-style-type:none;
margin:0 15px;
padding:0;
}
#links li{
display:inline;
}
#skipperForm{
display:flex;
flex-wrap:wrap;
justify-content:center;
margin-top:20px;
}
.radio, .dt, .bc, .label{
width:20vw;
margin:0;
max-width:200px;
}
.label{
display:inline-flex;
justify-content:center;
font-size:20px;
}
.break{
flex-basis:100%;
height:0;
}
#text{
width:60%;
}
.row{
margin-bottom:25px;
}
<form id='skipperForm'>
<label class='label' for='res'>Reservation</label>
<label class='label' for='sail'>Sail</label>
<label class='label' for='xcl'>Cancel</label>
<div class='break'></div>
<input id='res' type='radio' class='radio row' name='sailType' value='RES'>
<input id='sail' type='radio' class='radio row' name='sailType' value='SAIL'>
<input id='xcl' type='radio' class='radio row' name='sailType' value='XCL'>
<div class='break'></div>
<label class='label' for='date'>Date</label>
<label class='label' for='start'>Start Time</label>
<label class='label' for='end'>End Time</label>
<div class='break'></div>
<input id='date' type='text' class='dt row' name='date'>
<input id='start' type='text' class='dt row' name='start'>
<input id='end' type='text' class='dt row' name='end'>
<div class='break'></div>
<label class='label' for='boat'>Boat</label>
<label class='label' for='spots'>Crew Spots</label>
<label class='label' for='customCrew'>Custom Crew</label>
<div class='break'></div>
<input id='boat' type='text' class='bc row' name='boat'>
<input id='spots' type='text' class='bc row' name='spots'>
<input id='customCrew' type='text' class='bc row' name='customCrew'>
<div class='break'></div>
<textarea id='text' class='row' placeholder='message crew'></textarea>
<div class='break'></div>
<input type='submit' class='row' name='submit' value='update'>
</form>
display: flex; puts all elements on the same row by default. If you one them stacked on top you need also set flex-direction:column;

HTML form values from the backend

<form action="/users/student/update" method="POST">
<div class="personal">
<h3 style="padding: 0 22px;">PERSONAL DETAILS</h3>
<hr style="width: 25%; margin-left: 0; border: 1px solid black;">
<label for="name" class="d">Name :</label>
<input id="name" type="text" value= profileInformation.Name name="Name">
<hr>
<label for="email" class="e">Email :</label>
<input id="email" type="email" value="profileInformation.email" name="email">
<hr>
</div>
<hr style="border: 2px solid black;">
<input class="btn" type="submit" value="Submit">
</form>
In this code, profileInformation is a data object, and name and email are variables in it. I want to use them as default values. Right now, it is being printed as ProfileInformation.name and not the value. Please help.
You cannot do that in HTML. You need javascript for that.
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("name").value = profileInformation.name;
document.getElementById("email").value = profileInformation.email;
});
const profileInformation = {
name: "some name",
email: "test#gmail.com"
};
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("name").value = profileInformation.name;
document.getElementById("email").value = profileInformation.email;
});
<form action="/users/student/update" method="POST">
<div class="personal">
<h3 style="padding: 0 22px;">PERSONAL DETAILS</h3>
<hr style="width: 25%; margin-left: 0; border: 1px solid black;">
<label for="name" class="d">Name :</label>
<input id="name" type="text" name="Name">
<hr>
<label for="email" class="e">Email :</label>
<input id="email" type="email" name="email">
<hr>
</div>
<hr style="border: 2px solid black;">
<input class="btn" type="submit" value="Submit">
</form>

My Bootstrap form completely disappears due to use of If-else statement with EJS

<div class="row" style="margin: auto; max-width: 850;">
<h1 style="text-align: center">User Registration</h1>
<!-- <div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk" style="color: red"></span>Required Field</strong></div>-->
<form role="form" action="/users/addUser" method="POST">
<div class="form-group">
<div class="span6">
<div class="col-lg-4">
<div class="form-group">
<label for="InputEmail">Username</label>
<div class="input-group">
<input type="text" style="width: 180%" class="form-control" id="username" name="username" placeholder="username" required>
<!--
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
-->
</div>
</div>
</div>
</div>
<div class="span6">
<div class="col-lg-4">
<div class="form-group">
<label for="InputEmail">Password</label>
<div class="input-group">
<input type="password" style="width: 180%" class="form-control" id="password" name="password" placeholder="password" required>
<!--
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
-->
</div>
</div>
</div>
</div>
<!--
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info float-xs-right">-->
<div class="col-lg-5 push-md-1">
<div class="col-md-12">
<% if(isRegistered) { %>
<div class="alert alert-success">
<strong><span class="glyphicon glyphicon-ok"></span> <%= msg %>.</strong>
</div>
<% } else { %>
<div class="alert alert-danger">
<span class="glyphicon glyphicon-remove"></span><strong> <%= msg %> </strong>
</div>
<% } %>
</div>
</div>
<br>
<br>
<br>
<hr>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info float-xs-right">
</form>
</div>
As shown above, if i use "If-else " statement with EJS, my form disappears and if i remove it, my form appears on the browser again.
What i'm trying is to have a registration page where if the user already exists, an alert message to be displayed on the corner side of the browser saying, 'user already exists'. By the way this alert message is coming from my db (Oracle 11g).

Angular 4 email Contact form

I'm pretty new to Angular and have been tasked to complete a "Contact Us" form to allow customers to send emails through the web form.
The HTML:
<div class="content-section">
<div class="container">
<div class="row">
<div class="">
<h2 class="intro-title">Contact Us</h2>
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<div class="col-lg-6 spacer">
<div class="fadeIn-1">
<p>
<strong>Contact us</strong>
<br />
111.222.3333
<br />
information#mysite.com
</p>
</div>
<br />
<div class="fadeIn-2">
<p>
<strong>Office 1</strong>
<br />
Our street address
<br />
City, state, zip
</p>
</div>
<br />
<div class="fadeIn-3">
<p>
<strong>Office 2</strong>
<br />
street address
<br />
City, state, zip
</p>
</div>
</div>
<fieldset>
<!-- Form Name -->
<legend>Send us a message</legend>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">First Name</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-1">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="name" placeholder="Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">E-Mail</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-2">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">Phone #</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-3">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="(801)222-3333" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<!--<label class="col-md-4 control-label">Subject</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
<input name="subject" placeholder="Subject" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<!--<label class="col-md-4 control-label">Message</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-5">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea rows="9" class="form-control" name="comment" placeholder="Message">
</textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Send
<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
This is this the component:
import { Component } from '#angular/core';
import { trigger, state, style, transition, animate } from '#angular/animations';
import { slideInOutAnimation, fadeInAnimation } from '../_animations/index';
#Component({
selector: 'contact-page',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css'],
animations: [slideInOutAnimation, fadeInAnimation, trigger('slideInOut', [
state('in', style({
transform: 'translate3d(0, 0, 0)'
})),
state('out', style({
transform: 'translate3d(100%, 0, 0)'
})),
transition('in => out', animate('400ms ease-in-out')),
transition('out => in', animate('400ms ease-in-out'))
]),
],
host: {
'(window:scroll)': 'updateHeader($event)',
'[#slideInOutAnimation]': '',
'[#fadeInAnimation]': ''
}
})
export class ContactComponent {
title = 'app';
isScrolled = false;
currPos: Number = 0;
startPos: Number = 0;
changePos: Number = 0;
menuState = 'out';
constructor() { }
updateHeader(evt) {
this.currPos = (window.pageYOffset || evt.target.scrollTop) - (evt.target.clientTop || 0);
if (this.currPos >= this.changePos) {
this.isScrolled = true;
} else {
this.isScrolled = false;
}
}
}
I've looked at options such as "nodemailer" and I just can't seem to figure out how it all works.
I need the email to be sent to our email address when a customer clicks the submit button. Any suggestions?
Also, I'm not really sure what else is needed to get help, so if you need anything else, I am happy to post it up.

Unable to post from bootstrap modal

In the header of my app, I have a link, clicking on which opens up the bootstrap popup modal. When I insert data in the text boxes and click on Submit, No action is happening. Please advice. Thanks.
Here is my html for the modal:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<form action="addCard" method="post" id="addcard" class="form-horizontal" role="form">
<div class="modal-body" style="height: 140px;">
<div class="form-group" style="height: 30px;">
<label for="title" class="col-md-3 control-label">Title</label>
<div class="col-md-9">
<input type="text" class="form-control" name="title" placeholder="Enter Card title here...">
</div>
</div>
<div class="form-group" style="height: 30px;">
<label for="title" class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<input type="text" class="form-control" name="desc" placeholder="Enter Card description here...">
</div>
</div>
<div class="form-group">
<label for="priority" class="col-md-3 control-label">Priority</label>
<div class="col-md-9">
<select name="priority" class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I have this line in my app.js file:
app.post('/addCard', routes.addCard);
Index.js:
exports.addCard = function (req,res)
{
res.render('index');
}

Resources