Jira Code : HH-2
To create online forms for ‘Contact form’ and ‘Sell your products’. On submit of the form, prospects and customers should be created respectively.
HH 2 JJ Contact Form
<NLFORM>
<html>
<head>
<title>Inquiry</title>
</head>
<style>
.req {
color: #E24F3F;
margin-left: 4px;
}
.labels {
font-size: 15px;
font-family: 'Nunito Sans', sans-serif;
color: #2e2e2e;
}
.form-head {
font-size: 34px;
font-weight: bold;
font-family: 'Nunito Sans', sans-serif;
color: #2e2e2e;
}
.form-sub {
font-size: 22px;
font-family: 'Nunito Sans', sans-serif;
color: #2e2e2e;
}
.fullWidth{
width: 100%;
margin-bottom: 10px;
}
.halfWidth{
width: 49%;
display: inline-block;
}
input[type=text],
input[type=number],
textarea,
select {
display: block;
width: 97% !important;
height: 34px;
!important;
padding: 6px 12px;
font-size: 14px !important;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
#comments {
display: block;
width: 97% !important;
height: 100px !important;
padding: 6px 12px;
font-size: 14px !important;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.button {
background-color: #144796;
border: none;
color: white;
padding: 10px 32px;
font-family: 'Nunito Sans', sans-serif;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
<body>
<h1 class="form-head">General Inquiries</h1>
<p class="form-sub"> Contact us with your questions, comments, or concerns. To receive a custom quote, send a parts-list with contact details.</p>
<form>
<label class="labels">Name<span class="req">*</span></label>
<div class="fullWidth">
<div class="halfWidth">
<nlfirstname>
</nlfirstname>
</div>
<div class="halfWidth">
<nllastname>
</nllastname>
</div>
</div>
<div class="fullWidth">
<div class="halfWidth">
<label class="labels">E-mail</label>
<nlemail>
</nlemail>
</div>
<div class="halfWidth">
<label class="labels">Phone Number</label>
<nlphone>
</nlphone>
</div>
</div>
<div class="fullWidth">
<label class="labels">Country</label>
<nlcountry>
</nlcountry>
</div>
<div class="fullWidth">
<label class="labels">Comments</label>
<nlcomments>
</nlcomments>
</div>
<div style="display: none;">
<nlsubsidiary>
</nlsubsidiary>
</div>
<button type="submit" id="submitBtn" class="button">SUBMIT</button>
</form>
</body>
<script>
$(function() {
$('#lastname').attr("placeholder", "Last Name");
$('#firstname').attr("placeholder", "First Name");
})
</script>s
</html>HH 2 JJ Sell your Products
<NLFORM>
<html>
<head>
<title>Sell your Products</title>
</head>
<style>
.req {
color: #E24F3F;
margin-left: 4px;
}
.labels {
font-size: 15px;
font-family: 'Nunito Sans', sans-serif;
color: #2e2e2e;
}
.form-head {
font-size: 34px;
font-weight: bold;
font-family: 'Nunito Sans', sans-serif;
color: #2e2e2e;
}
.form-sub {
font-size: 20px;
font-family: 'Nunito Sans', sans-serif;
color: #2e2e2e;
}
.fullWidth{
width: 100%;
margin-bottom: 10px;
}
.halfWidth{
width: 49%;
display: inline-block;
}
input[type=text],
input[type=number],
textarea,
select {
display: block;
width: 97% !important;
height: 34px;
!important;
padding: 6px 12px;
font-size: 14px !important;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
input[type=file] {
display: inline-block;
padding: 15px 0px;
cursor: pointer;
font-weight: 10;
font-size: 16px;
}.
#comments {
display: block;
width: 97% !important;
height: 100px !important;
padding: 6px 12px;
font-size: 14px !important;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.button {
background-color: #144796;
border: none;
color: white;
padding: 10px 32px;
font-family: 'Nunito Sans', sans-serif;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
<body>
<h1 class="form-head">Sell your products on Healthy Harvest</h1>
<p class="form-sub"> <b>Healthy Harvest is proud to be one of the first Hydroponic & Garden Supply Stores to accept most leading forms of cryptocurrency including:</b></p>
<p>Sellers will need to contact us prior to placing order. All sales will be billed at current market rates and calculated using USD or Tether pairings. We will include our wallet address for currency of your choice with invoice. Rates are subject to change.</p>
<p><b>Start selling your products today! Get in touch with us.</b></p>
<form>
<label class="labels">Name<span class="req">*</span></label>
<div class="fullWidth">
<div class="halfWidth">
<nlfirstname>
</div>
<div class="halfWidth">
<nllastname>
</div>
</div>
<div class="fullWidth" hidden>
<label class="labels">Subsidiary</label>
<nlsubsidiary>
</div>
<div class="fullWidth">
<div class="halfWidth">
<label class="labels">E-mail</label>
<nlemail>
</div>
<div class="halfWidth">
<label class="labels">Phone Number</label>
<nlphone>
</div>
</div>
<div class="fullWidth">
<div class="halfWidth">
<label class="labels">Country</label>
<nlcountry>
</div>
<div class="halfWidth">
<!-- <label class="labels">Choose file</label> -->
<nlfile>
</div>
</div>
<div class="fullWidth">
<div class="halfWidth">
<label class="labels">Comments</label>
<nlcomments>
</div>
</div>
<button type="submit" id="submitBtn" class="button">SUBMIT</button>
</form>
</body>
<script>
$(function() {
$('#lastname').attr("placeholder", "Last Name");
$('#firstname').attr("placeholder", "First Name");
})
</script>
</html>