How do I vertically align the text of a label with the input radio using Bootstrap 3 ? Here I had to manually specify the margin-top.
<style type="text/css">
div.radio label input[type=radio]
{
width: 30px;
height: 30px;
}
div.radio label span
{
display: inline-block;
height: 30px;
margin-top: 10px;
margin-left:25px;
font-weight: bold;
}
label input[type=radio]
{
transform: scale(1.5);
}
</style>
<div class="radio">
<label>
<input type="radio" name="radio-opt">
<span>Yes</span>
</label>
</div>
<br/>
<div class="radio">
<label>
<input type="radio" name="radio-opt">
<span style="margin-top:0px;">No, Longer Text<br/>Longer Text</span>
</label>
</div>
Related
Sending multiple mails in php where user has to enter the specific email id to which he has to interact with.
From the code below, I have created two email fields where one email is getting triggered (first one), but not with the second.
Can anyone help me solve it?
<!DOCTYPE html>
<html>
<head>
<title>testing mail</title>
</head>
<body>
<h1 class="text-center">Sending Emails</h1>
<?php
if (isset($_POST['sendmail'])) {
if (mail($_POST['email'], $_POST['email1'], $_POST['subject'], $_POST['message']))
{
echo "Mail sent";
}else {
echo "Failed";
}
}
?>
<form role="form" method="post" enctype="multipart/form-data">
<label for="email">To Email:</label>
<input type="email" class="form-control" id="email" name="email" maxlength="500">
<label for="email1">To Email:</label>
<input type="email1" class="form-control" id="email1" name="email1" maxlength="500">
<label for="subject">Subject:</label>
<input type="text" class="form-control" id="subject" name="subject" maxlength="50">
<label for="name">Message:</label>
<textarea class="form-control" type="textarea" id="message" name="message" placeholder="Your Message Here" maxlength="6000" rows="5"></textarea>
<button type="submit" name="sendmail" class="btn btn-lg btn-sucess btn-block">Send</button>
</form>
</body>
</html>
do you compare the string:
emailall = $_POST['email']. ",".$_POST['email1'];
mail(emailall, $_POST['subject'], $_POST['message'])
Something like that.
Successfully working!!!!.... Centralized email triggering to multiple email recipients!!!!!! (no default hard code required)where we can enter manually for specific email recipients where the whole form is been sent at the same time.
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Feedback Form</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: helvetica;
}
body{
background-color: #ffffff;
}
.main{
width: 500px;
margin: 50px auto;
border-radius: 10px;
border: 5px solid #0C3D6E;
border-left: 40px solid #0C3D6E;
box-shadow: 1px 2px 10px #555;
}
.info{
width: 100%;
background-color: #0C3D6E;
padding: 7px;
text-shadow: 1px 1px 1px #222;
color: #fff;
font-size: 20px;
}
.form-box{
padding: 20px;
background-color: #eee;
}
label{
color: navy;
font-size: 18px;
}
.inp,.msg-box{
width: 100%;
padding: 10px;
margin-top: 4px;
margin-bottom: 5px;
border-radius: 5px;
border: 2px solid #0C3D6E;
font-weight: bold;
color: #0C3D6E;
border-right: 15px solid #0C3D6E;
border-left: 15px solid #0C3D6E;
resize: none;
}
.msg-box{
height: 80px;
}
.inp:focus,.msg-box:focus{
outline: none;
border: 2px solid navy;
border-right: 15px solid navy;
border-left: 15px solid navy;
}
.sub-btn{
width: 100%;
padding: 10px;
border-radius: 5px;
margin-top: 5px;
border: none;
background: linear-gradient(#0C3D6E,#0C3D6E);
cursor: pointer;
color: #fff;
font-size: 20px;
text-shadow: 1px 1px 1px #444;
}
.sub-btn:hover{
background: linear-gradient(#0C3D6E,#0C3D6E);
opacity: 0;
transition: all ease-out 0.2s;
}
.sub-btn:focus{
outline: none;
}
#media(max-width: 720px){
.main{
width: 90%;
}
}
</style>
</head>
<body>
<div class="main">
<div class="info">Give Your Feedback!</div>
<form action="mail_handler.php" method="post" name="form" class="form-box">
<label for="name">Name</label><br>
<input type="text" name="name" class="inp" placeholder="Enter Your Name" required><br>
<label for="phone">Phone</label><br>
<input type="tel" name="phone" class="inp" placeholder="Enter Your Phone" required><br>
<label for="email">Email ID1</label><br>
<input type="email" name="email" class="inp" placeholder="Enter Your Email" required><br>
<label for="email">Email ID2</label><br>
<input type="email" name="email1" class="inp" placeholder="Enter Your Email" required>
<br>
<label for="email">Email ID3</label><br>
<input type="email" name="email2" class="inp" placeholder="Enter Your Email" required>
<br>
<label for="email">Email ID4</label><br>
<input type="email" name="email3" class="inp" placeholder="Enter Your Email" required>
<br>
<label for="email">Email ID5</label><br>
<input type="email" name="email4" class="inp" placeholder="Enter Your Email" required>
<br>
<label for="message">Message</label><br>
<textarea name="msg" class="msg-box" placeholder="Enter Your Message Here..." required></textarea><br>
<input type="submit" name="submit" value="Send" class="sub-btn">
</form>
</div>
</body>
</html>
**<!--mail_handler.php(php file)-->**
<?php
if(isset($_POST['submit'])){
$name=$_POST['name'];
$email=$_POST['email'];
$email1=$_POST['email1'];
$email2=$_POST['email2'];
$email3=$_POST['email3'];
$email4=$_POST['email4'];
$phone=$_POST['phone'];
$msg=$_POST['msg'];
$to="$email, $email1, $email2, $email3, $email4"; // Receiver Email ID, Replace with your email ID
$subject='Form Submission';
$message="Name :".$name."\n"."Phone :".$phone."\n"."Wrote the following :"."\n\n".$msg;
$headers="From: EHS#larsentoubro.com";
if(mail($to, $subject, $message, $headers)){
echo "<h1>Sent Successfully! Thank you"." ".$name.", We will contact you shortly!</h1>";
}
else{
echo "Something went wrong!";
}
}
?>
I have popup component in which I want to insert form validation on input element for name (required field and minlength 3 characters).
Is is possible to do it without setting up complete code in form tag?
<div class="scenario-div">
<label style="font-size: 1.4rem; font-weight: 400; margin-bottom: 10px;">{{context.header}}</label>
<div class="" style="width: 90%; margin-bottom: 10px; align-self: center;">
<div style="display: flex; flex-direction: column; margin-bottom: 10px;">
<label style="font-size: 1.2rem; font-weight: 500;">Name</label>
<div style="display:flex; flex-direction:row;">
<input type="text" [(ngModel)]="context.name" placeholder="enter Name" style="color: #569bd2; margin: 0px; width: 50%" minlength="3" required/>
<select *ngIf="context.showOptionDropdown" class="custom-select-project" style="width:50%" #optionSelect (change)="context.option.value">
<option disabled>Select type</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
</div>
</div>
<div style="display: flex; flex-direction: column; margin-bottom: 10px;" *ngIf="!context.hideDescription">
<label style="font-size: 1.2rem; font-weight: 400;">Description</label>
<textarea rows="4" [(ngModel)]="context.description" cols="50" maxlength="250" placeholder="Enter text here" style="color: #569bd2; resize: none; font-weight: 400; font-size: 1.2rem;"></textarea>
</div>
</div>
<div>
<button class="btn-main" (click)="confirm(context)" style="width: 15%;">Confirm</button>
</div>
'Validation' based on ngModel
<input type="text" required name="title" [(ngModel)]="titleModel">
<span style="color:red" *ngIf="titleModel?.length > 10">
10 max
</span>
<span style="color:red" *ngIf="!titleModel">
required
</span>
<button [disabled]="titleModel?.length > 10 || !titleModel">OK</button>
DEMO
'Validation' based on local template variable:
<input type="text" (keyup)='0' #title>
<span style="color:red" *ngIf="title.value.length > 10">
10 max
</span>
<span style="color:red" *ngIf="!title.value">
required
</span>
<button [disabled]="title.value.length > 10 || !title.value">OK</button>
DEMO
You need to use FormControl from the reactive forms API, which can be used with a standalone <input> that's not wrapped into a <form> tag.
Component({
...
template: `<input type="text" [formControl]="name">`
})
class MyComponent {
name = new FormControl('',
[Validators.required, Validators.minLength(3)]);
}
I'm using a form with materialize css. I have a link with my login project here: http://clients.paulofrutuoso.pt/login.html I want to put a show and hide password in the form. I'm using this example: https://github.com/cloudfour/hideShowPassword
And I have this CSS for the icons
::-ms-reveal,
::-ms-clear {
display: none !important;
}
.hideShowPassword-toggle {
background-color: transparent;
background-image: url('../images/wink.png'); /* fallback */
background-image: url('../images/wink.svg'), none;
background-position: 0 center;
background-repeat: no-repeat;
border: 2px solid transparent;
border-radius: 0.25em;
cursor: pointer;
font-size: 100%;
height: 44px;
margin: 0;
max-height: 100%;
padding: 0;
overflow: 'hidden';
text-indent: -999em;
width: 46px;
-moz-appearance: none;
-webkit-appearance: none;
}
.hideShowPassword-toggle-hide {
background-position: -44px center;
}
.hideShowPassword-toggle:hover,
.hideShowPassword-toggle:focus {
border-color: #0088cc;
outline: transparent;
}
This is the html:
<div class="container clearfix">
<div class="container-app-club">
<div class="row">
<div class="col s5 right-align"> <img class="responsive-img " src="images/palmeiras.png" width="130" height="130"> </div>
<div class="col s2 center-align"><hr class="vertical"/></div>
<div class="col s5 left-align"> <img class="responsive-img " src="images/app-brasao.png" width="130" height="130"> </div>
</div>
</div>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label class="active" data-success="Campo Obrigatório">E-mail</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password-1" type="password" class="validate">
<label class="active" data-error="Campo Obrigatório">Senha</label>
<div class="form-error">Campo obrigatório</div>
</div>
<div class="col s12 right-align"> Recupere sua senha! </div>
</div>
</form>
</div>
<div class="col s12">
<button class="btn btn-w waves-effect" href="preencher-cpf.html">Login</button>
</div>
<div class="col s12 center-align" style="margin-top:15px;"> Ainda não está registado? Cadastre-se </div>
</div>
And I have this JS in the html:
$('#password-1').hidePassword(true);
The icon is on the right end of the form and it toggles just fine but the size of the input doesn't shows in responsive way. The icon crashes the input responsible design.
Any ideas to solve this?
thank you so much.
Done. I just add this css code:
.hideShowPassword-wrapper{
position: relative;
display: inline-block;
vertical-align: baseline;
width: 100%!important;
}
.hideShowPassword-field{
margin: 0px;
padding-right: 0!important;
}
I am aware Kentico has a form-builder built in as well as a custom layout feature. Is it possible to import a form with its own particular set of css rules?
For example, I have the following form: Form
body
{
margin-left: 0;
margin-top: 0;
background-color: #F5F5F5;
}
.clearFix
{
clear: both;
}
p
{
font-size: 13px;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 35px;
margin-top: 15px;
color: #696969;
float: left;
}
#lastName
{
margin-left: 300px;
}
.city
{
margin-left: 318px;
}
#province
{
margin-left: 294px;
}
#oID
{
margin-left: 294px;
}
.postalCode
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#schoolName
{
margin-left: 285px;
}
#courseFee
{
margin-left: 268px;
}
#courseEndDate
{
margin-left: 258px;
}
.netIncome
{
margin-left: 255px;
}
.lastNameDependent
{
float: left;
margin-left: 200px;
}
.ageDependent
{
float: left;
margin-left: 200px;
}
#ontarioTeachingCert
{
float: left;
margin-top: 10px;
}
#certificateOfQualification
{
float: left;
margin-top: 10px;
}
#letterOfPermission
{
float: left;
margin-top: 10px;
}
#other
{
float: left;
margin-top: 10px;
}
#previousBursaryYears
{
margin-left: 81px;
}
.oectaPositionReference
{
margin-left: 332px;
}
#daytimeTele
{
margin-left: 295px;
}
#teachingYears
{
margin-left: 241px;
}
#membershipStatus
{
margin-left: 279px;
}
.pTitles
{
font-size: 18px;
margin-top: 15px;
margin-bottom: 8px;
margin-left: 35px;
color: #696969;
font-weight: bold;
}
.thinLine
{
height: 0.5px;
width: 671px;
content: "";
background-color: #cccccc;
margin-left: 35px;
}
#lowerThinLine
{
margin-top: 15px;
height: 1px;
}
#firstNameBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#lastNameBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
.addressBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#oectaIdBox
{
width: 300px;
height: 25px;
margin-left: 64px;
}
#otcTextBox
{
width: 300px;
height: 25px;
margin-left: 60px;
margin-bottom: 10px;
}
#coqTextBox
{
width: 300px;
height: 25px;
margin-left: 71px;
margin-bottom: 10px;
}
#lopTextBox
{
width: 300px;
height: 25px;
margin-left: 111px;
margin-bottom: 10px;
}
#courseNameBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#courseCostBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#teachingExperienceBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#underGradBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#otherTextBox
{
width: 300px;
height: 25px;
margin-left: 201px;
margin-bottom: 10px;
}
#grossSalaryBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#netSalaryBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#distanceToCourseBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
.firstNameDependentBox
{
width: 150px;
height: 25px;
margin-left: 35px;
float: left;
}
.lastNameDependentBox
{
width: 150px;
height: 25px;
margin-left: 114px;
float: left;
}
.ageDependentBox
{
width: 70px;
height: 25px;
margin-left: 111px;
}
.firstNameReferenceBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
.OECTAPositionReferenceBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#memberstatusBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#startDate
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#endDate
{
width: 300px;
height: 25px;
margin-left: 60px;
}
.bigTextArea
{
width: 667px;
height: 60px;
margin-left: 35px;
}
#dependentComments
{
height: 90px;
}
#purposeOfStudy
{
height: 90px;
}
.citySelect
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#provinceSelect
{
width: 300px;
height: 25px;
margin-left: 60px;
}
.UnitSelect
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#schoolBoardSelect
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#schoolNmaeSelect
{
width: 300px;
height: 25px;
margin-left: 63px;
}
#bursaryYears
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#previousBursaries
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#otcCheckBox
{
margin-left: 35px;
margin-top: 10px;
float: left;
}
#coqCheckBox
{
margin-left: 35px;
margin-top: 10px;
float: left;
}
#lopCheckBox
{
margin-left: 35px;
margin-top: 10px;
float: left;
}
#otherCheckBox
{
margin-left: 35px;
margin-top: 10px;
float: left;
}
#finalConformation
{
float: left;
margin-left: 415px;
margin-top: -18px;
}
.daytimeTelephoneBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#email
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#formStyle10
{
display: block;
height: 100%;
width: 100%;
}
input[type="radio"]
{
display: none;
}
.tabs
{
float: none;
width: 800px;
padding: 0;
position: relative;
margin: 75px 75px;
list-style: none;
}
.tabs li
{
float: left;
margin-right: 2px;
}
.tabs label
{
display: block;
position: relative;
background: #E6E6E6;
height: 60px;
width: 115px;
margin-right: 3px;
padding: 0px 15px 1px 15px;
line-height: 60px;
font-family: 'Lucida Sans';
font-size: 15px;
text-align: center;
color: #696969;
cursor: pointer;
z-index: 1;
box-shadow: 0.5px -2px 2px rgba(0,0,0,0.1), 0.5px -1px 2px rgba(0,0,0,0.1);
}
.tabs label:hover
{
background: #ffffff;
}
.tab-content
{
height: 650px;
width: 745px;
position: absolute;
display:none;
z-index: 2;
left: 0;
top: 61px;
background-color: #F5F5F5;
font-size: 16px;
font-family: 'Lucida Sans';
font-weight: normal;
box-sizing:border-box;
box-shadow: 1px 2px 2px rgba(0,0,0,0.1), -1px -2px 2px rgba(0,0,0,0.1);
}
[id^=tab]:checked + label
{
background: #F5F5F5;
z-index: 3;
}
[id^=tab]:checked~[id^=tab-content]
{
display:block;
}
.tabs li:first-child
{
box-shadow: 1px 2px 2px rgba(0,0,0,0.1), -1px -2px 2px rgba(0,0,0,0.1);
}
#submitButton
{
height: 30px;
width: 150px;
float: right;
margin-right: 35px;
margin-top: 15px;
}
HTML:
<form id="formStyle10" runat="server">
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab-1" checked />
<label for="tab-1">Information</label>
<div id="tab-content-1" class="tab-content">
<p class="pTitles">Personal Information</p>
<div class="clearFix"></div>
<div class="thinLine"></div>
<div class="clearFix"></div>
<p>First Name</p>
<p id="lastName">Last Name</p>
<div class="clearFix"></div>
<input type="text" name="firstName" id="firstNameBox" />
<input type="text" name="lastName" id="lastNameBox" />
<div class="clearFix"></div>
<p>Address</p>
<p class="city">City</p>
<div class="clearFix"></div>
<input type="text" name="addressBox" class="addressBox" />
<select class="citySelect">
<option>Select</option>
<option>City 2</option>
<option>City 3</option>
<option>City 4</option>
</select>
<div class="clearFix"></div>
<p>Postal Code</p>
<p id="province">Province</p>
<div class="clearFix"></div>
<input type="text" name="postalCode" class="postalCode" />
<select id="provinceSelect">
<option>Select</option>
<option>Prov 1</option>
<option>Prov 2</option>
<option>Prov 3</option>
</select>
<div class="clearFix"></div>
<p>OECTA Unit</p>
<p id="oID">OECTA ID</p>
<div class="clearFix"></div>
<select class="UnitSelect">
<option>Select</option>
<option>Prov 1</option>
<option>Prov 2</option>
<option>Prov 3</option>
</select>
<input type="text" name="oectaIdBox" id="oectaIdBox" />
<div class="clearFix"></div>
<p>School Board</p>
<p id="schoolName">School Name</p>
<div class="clearFix"></div>
<select id="schoolBoardSelect">
<option>Select</option>
<option>Board 1</option>
<option>Board 2</option>
<option>Board 3</option>
</select>
<select id="schoolNmaeSelect">
<option>Select</option>
<option>School 1</option>
<option>School 2</option>
<option>School 3</option>
</select>
<div class="clearFix"></div>
<p>Email Address</p>
<p id="membershipStatus">Membership Status</p>
<div class="clearFix"></div>
<input type="email" name="email" id="email" />
<input type="text" name="memberStatusBox" id="memberstatusBox" />
<div class="clearFix"></div>
<p>Use this section to briefly describe the purpose of your study</p>
<div class="clearFix"></div>
<textarea class="bigTextArea" id="purposeOfStudy"></textarea>
</div>
</li>
<!-- -->
<li>
<input type="radio" name="tabs" id="tab-2" />
<label for="tab-2">Qualifications</label>
<div id="tab-content-2" class="tab-content">
<p class="pTitles">Teaching Qualifications</p>
<div class="clearFix"></div>
<div class="thinLine"></div>
<div class="clearFix"></div>
<p>Professional and Academic Information<br/ > Involvement in OECTA (i.e. Committees, AGM Delegate, Unit Meetings, etc.)</p> <div class="clearFix"></div>
<textarea class="bigTextArea"></textarea>
<div class="clearFix"></div>
<p>Qualifications (Check all that apply)</p>
<div class="clearFix"></div>
<input type="checkbox" name="otcCheckBox" id="otcCheckBox" />
<p id="ontarioTeachingCert">Ontario Teaching Certificate</p>
<input type="text" name="otcTextBox" id="otcTextBox" placeholder="Year of Issue" />
<div class="clearFix"></div>
<input type="checkbox" name="coqCheckBox" id="coqCheckBox" />
<p id="certificateOfQualification">Certificate of Qualification</p>
<input type="text" name="coqTextBox" id="coqTextBox" placeholder="Year of Issue" />
<div class="clearFix"></div>
<input type="checkbox" name="lopCheckBox" id="lopCheckBox" />
<p id="letterOfPermission">Letter of Permission</p>
<input type="text" name="lopTextBox" id="lopTextBox" placeholder="Year of Issue" />
<div class="clearFix"></div>
<input type="checkbox" name="otherCheckBox" id="otherCheckBox" />
<p id="other">Other</p>
<input type="text" name="lopTextBox" id="otherTextBox" placeholder="Please Specify" />
<div class="clearFix"></div>
<p>QECO Category</p>
<p id="teachingYears">Years of Teaching Experience</p>
<div class="clearFix"></div>
<select class="UnitSelect" id="quecoCategory">
<option>Select</option>
<option>Category A</option>
<option>Category A1</option>
<option>Category A2 </option>
<option>Category A3</option>
<option>Category A4</option>
</select>
<input type="text" name="teachingExperienceBox" id="teachingExperienceBox" />
<div class="clearFix"></div>
<p>If you have obtained any degrees/diplomas, please list them here</p>
<textarea class="bigTextArea"></textarea>
<p>If non-degree, how many undergraduate courses have you compelted?</p>
<div class="clearFix"></div>
<input type="text" name="underGradBox" id="underGradBox" />
<div class="clearFix"></div>
</div>
</li>
<!-- -->
<li>
<input type="radio" name="tabs" id="tab-3" />
<label for="tab-3">Expenses</label>
<div id="tab-content-3" class="tab-content">
<p class="pTitles">Expenses and Financial Information</p>
<div class="clearFix"></div>
<div class="thinLine"></div>
<div class="clearFix"></div>
<p>Name of Course</p>
<p id="courseFee">Course Fee</p>
<div class="clearFix"></div>
<input type="text" name="courseNameBox" id="courseNameBox" />
<input type="text" name="courseCostBox" id="courseCostBox" />
<div class="clearFix"></div>
<p>Course Start Date</p>
<p id="courseEndDate">Course End Date</p>
<div class="clearFix"></div>
<input type="date" name="startDate" id="startDate" />
<input type="date" name="endDate" id="endDate" />
<div class="clearFix"></div>
<p>Total Gross Salary</p>
<p class="netIncome">Total Net Income</p>
<div class="clearFix"></div>
<input type="text" name="grossSalaryBox" id="grossSalaryBox" />
<input type="text" name="netSalaryBox" id="netSalaryBox" />
<div class="clearFix"></div>
<p>Other Income Sources</p>
<div class="clearFix"></div>
<textarea class="bigTextArea" placeholder="Please list the all other income sources, including other bursaries and other forms of financial assistance along with the amount for each."></textarea> <div class="clearFix"></div>
<p>Have you received an OECTA Bursary Before?</p>
<p id="previousBursaryYears">Year(s) If applicable</p>
<div class="clearFix"></div>
<select id="previousBursaries">
<option>Select</option>
<option>Yes</option>
<option>No</option>
</select>
<input type="text" name="bursaryYears" id="bursaryYears" />
<div class="clearFix"></div>
<p>Distance to Travel For Course</p>
<div class="clearFix"></div>
<input type="text" name="distanceToCourseBox" id="distanceToCourseBox" />
<div class="clearFix"></div>
<p>Please list all expenses this bursary will be used for</p>
<div class="clearFix"></div>
<textarea class="bigTextArea"></textarea>
</div>
</li>
<!-- -->
<li>
<input type="radio" name="tabs" id="tab-4" />
<label for="tab-4">Dependents</label>
<div id="tab-content-4" class="tab-content">
<p class="pTitles">Dependents</p>
<div class="clearFix"></div>
<div class="thinLine"></div>
<div class="clearFix"></div>
<p>Please list any and all dependents</p>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<input type="text" class="firstNameDependentBox" />
<input type="text" class="lastNameDependentBox" />
<input type="text" class="ageDependentBox" />
<div class="clearFix"></div>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<input type="text" class="firstNameDependentBox" />
<input type="text" class="lastNameDependentBox" />
<input type="text" class="ageDependentBox" />
<div class="clearFix"></div>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<input type="text" class="firstNameDependentBox" />
<input type="text" class="lastNameDependentBox" />
<input type="text" class="ageDependentBox" />
<div class="clearFix"></div>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<input type="text" class="firstNameDependentBox" />
<input type="text" class="lastNameDependentBox" />
<input type="text" class="ageDependentBox" />
<div class="clearFix"></div>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<input type="text" class="firstNameDependentBox" />
<input type="text" class="lastNameDependentBox" />
<input type="text" class="ageDependentBox" />
<div class="clearFix"></div>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<p>Comments</p>
<div class="clearFix"></div>
<textarea class="bigTextArea" id="dependentComments" placeholder="Please list any other information you believe may assist in your application"></textarea>
<div class="clearFix"></div>
</div>
</li>
<!-- -->
<li>
<input type="radio" name="tabs" id="tab-5" />
<label for="tab-5">References</label>
<div id="tab-content-5" class="tab-content">
<p class="pTitles">References</p>
<div class="clearFix"></div>
<p>Please include at least TWO references who can speak to your OECTA involvement</p></p>
<div class="clearFix"></div>
<div class="thinLine"></div>
<div class="clearFix"></div>
<p>Name</p>
<p class="oectaPositionReference">OECTA Position Held</p>
<div class="clearFix"></div>
<input type="text" name="firstNameReferenceBox" class="firstNameReferenceBox" />
<input type="text" name="OECTAPositionReferenceBox" class="OECTAPositionReferenceBox" />
<div class="clearFix"></div>
<p>Address</p>
<p class="city">City</p>
<div class="clearFix"></div>
<input type="text" name="addressBox" class="addressBox" />
<select class="citySelect">
<option>Select</option>
<option>City 1</option>
<option>City 2</option>
<option>City 3</option>
</select>
<div class="clearFix"></div>
<p>Postal Code</p>
<p id="daytimeTele">Daytime Telephone</p>
<div class="clearFix"></div>
<input type="text" name="postalCode" class="postalCode" />
<input type="tel" name="daytimeTelephone" class="daytimeTelephoneBox" />
<div class="clearFix"></div>
<br />
<p>Name</p>
<p class="oectaPositionReference">OECTA Position Held</p>
<div class="clearFix"></div>
<input type="text" name="firstNameReferenceBox" class="firstNameReferenceBox" />
<input type="text" name="OECTAPositionReferenceBox" class="OECTAPositionReferenceBox" />
<div class="clearFix"></div>
<p>Address</p>
<p class="city">City</p>
<div class="clearFix"></div>
<input type="text" name="addressBox" class="addressBox" />
<select class="citySelect">
<option>Select</option>
<option>City 1</option>
<option>City 2</option>
<option>City 3</option>
</select>
<div class="clearFix"></div>
<p>Postal Code</p>
<p id="daytimeTele">Daytime Telephone</p>
<div class="clearFix"></div>
<input type="text" name="postalCode" class="postalCode" />
<input type="tel" name="daytimeTelephone" class="daytimeTelephoneBox" />
<div class="clearFix"></div>
<div class="thinLine" id="lowerThinLine"></div>
<p>By selecting the following you are confirming that you have included current copies of both your Ontario Teaching Certificate of Qualifications and Registration and a copy of the course description, including cost, date of course commencement and the name of the institution.</p>
<input type="checkbox" name="finalConformation" id="finalConformation" />
<div class="clearFix"></div>
<input type="submit" name="submitButton" id="submitButton" value="Submit" />
</div>
</li>
</ul>
</form>
Is there a way to import this form and its specifications into a pre-existing kentico site?
Your best possible bet, which we often do a lot will be to do following:-
Create you form control fields using Kentico fields. Basically mapping your fields in kentico.
Use custom layout to generate basic structure of your form.
Go to source of your custom layout and add and wrapper DIVS, Classes, and IDs around your key elements.
This approach will solve most of the use cases, unless you have a complex form functionality.
Cheers,
Chetan
You can get partially there, you can use a custom layout to get any wrapping divs around your items, and you can add your own class/style to the inputs and labels through the fields tab in the form. One thing you won't be able to do is to include the form tag as in your html. ASP.Net only allows one form in the page markup, unless it is hosted in an iframe or something other than being in the part markup. You could combine the styling elements and custom layout with some jquery to get very close to the same markup.
There are other options, but the ones mentioned above could at least get you started.
Technically speaking there is no way to import that form out of the box. The easiest way to complete this task is to recreate the form and add a custom layout to format it the way you want.
The problem I'm guessing you'll run into though is using Kentico's forms and form controls will cause your layout to be considerably different than what you have. So you'll need to adjust your CSS rules accordingly based on the additional elements that are added by Kentico.
You can store your css in the main css file if you choose or add a HTML head webpart to your page template and add your css there.
I have a html5 form which displays as expected in IE8 and above, also in Chrome, Safari, Forefox and Opera. But in IE7 the label alignment is completely different - the labels are displayed above the input fields rather than to the left of them and horizontally aligned which is what I'm after.
I haven't found this question asked on StackOverflow, but did find something very similar looking on CSS tricks. I did have a link here but as a first time poster my question was rejected due to having more than 2 links in it (due to the additional 2 links below showing screenshots of the issue). So I had to remove it... The answer to the post on CSS tricks gives me some areas to look at, but it's not specific - it says "Figured it out on my own. Solution involved a combination of moving the label tags and some IE conditional CSS."
The difference in display of the form is shown in these screenshots:
IE7: http://www.s203574650.websitehome.co.uk/Screenshots/IE7_form.jpg
IE10: http://www.s203574650.websitehome.co.uk/Screenshots/IE10_form.jpg
HTML code:
<form id="contact" action="contact_us.php" method="post">
<div>
<label for="fullname">Your Full Name:</label>
<input id="fullname" name="fullname" type="text" placeholder="eg. John Smith" required aria- required="true" >
</div>
<div>
<label for="email">Your Email Address:</label>
<input id="email" name="email" type="email" placeholder="eg. johnsmith#gmail.com" required aria- required="true" title="Please enter a valid email address">
</div>
<div>
<label for="phone">Your Phone Number (optional):</label>
<input id="phone" name="phone" type="tel" placeholder="eg. 07000 123456" pattern="([0-9]|( |-)?) {10,14}" title="Please use only digits, spaces and hyphens.">
</div>
<div>
<label for="experience">Your Badminton Experience:</label>
<select name="experience">
<option value="default">Please Choose</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
<option value="Don't know">Don't know</option>
</select>
</div>
<div>
<label for="club_matches">Have you previously played matches for a club?:</label>
<input type="radio" name="club_matches" value="Yes">Yes
<input type="radio" name="club_matches" value="No" checked>No
</div>
<div>
<label for="info">Additional Info / Questions: </label>
<textarea name="info" type="text">
</textarea>
</div>
<div>
<label for="blank"></label>
<input type="submit" id="submit" value="Submit Form" name="sent">
</div>
</form>
And the CSS:
/* styles for contact form */
#contact
{
background-color: #DDE2E2;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: solid slategrey 2px;
box-shadow: 3px 3px 5px slategrey;
-o-box-shadow: 3px 3px 5px slategrey;
-moz-box-shadow: 3px 3px 5px slategrey;
-webkit-box-shadow: 3px 3px 5px slategrey;
padding: 3%;
font-family: arial;
color: #0099FF;
font-weight:bold;
align:center;
width: 80%;
margin-left:40px;
}
label
{
width: 40%;
float:left;
text-align:right;
margin-right: 2em;
font-size: 0.8em;
}
label, select, textarea, input
{
margin-bottom: 1.5em;
clear:left;
margin-left: 1em;
}
#submit
{
margin-top: 5%;
margin-bottom: 0;
}
The problem is that you're clearing floats for the select boxes, textareas, and inputs as well as for the labels, when you should only be clearing them for the labels.
label, select, textarea, input {
margin-bottom: 1.5em;
clear: left;
margin-left: 1em;
}
Remove clear: left; from the CSS selector for label, select, textarea, input and add it to the one for label:
label {
width: 40%;
float: left;
clear: left;
text-align: right;
margin-right: 2em;
font-size: 0.8em;
}
label, select, textarea, input {
margin-bottom: 1.5em;
margin-left: 1em;
}