LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  
  Contact Us



  

Contact Us

CSS
/*https://fonts.google.com */
/*called a selector*/
body {
  /* Defines the background colour, and font being used for the form */
  background-color:#BBDEFB;
  font-family: 'Spectral SC', serif;
  font-size: 1.2em;
}
header{
  /* Defines the position of the title on the screen */
  margin: 0 auto;
  width: 400px;
  text-align: center;
}
form{
  /* Defines the styling and position of the form on the screen */
  margin: 0 auto;
  width: 400px;
  padding: 1em;
  border: 1px solid #26A69A;
  border-radius: .5em;
  background-color: #26A69A;
  text-align: center;
}

/* Defines the spacing of the input boxes within the form */ 
form div + div {
  margin-top: 1em;
}

/* CSS_property: value; */
/* selector{
.class
#id
h1, p
div p*/

label{
  /* Defines the styling of the labels for the input boxes */
  display: inline-block;
  width: 90px;
  text-align: right;
  vertical-align: top;
  color: #000000
}

input, textarea{
  /* Defines the styling of the input boxes */
  font: .75em "Spectral SC";
  font-weight: 500;
  width: 300px;
  box-sizing: border-box;
  border: 1px solid #26A69A;
  padding: 2px;
}

input:focus, textarea:focus {
  border-color: #000000;
}

textarea {
/* Defines the position and size of the textbox for the 'Message' label */
vertical-align: top;
height: 5em;
}

/*Button div class */
.button {
/* Defines the position of the 'Submit' button in the form */
padding-left: 90px;
margin-bottom:50px;
}

#submit {
/* Defines the appearance of the 'Submit' button in the form */
background-color: #C51162;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: .75em;
font-family: inherit;
margin: 4px 2px;
cursor: pointer;
}

.button p {
margin-top:10px;
padding-left:5px
}

button {
margin-left: .5em;
}
JS
// Defines the variables, and gets them from the HTML
var email = document.getElementById("mail");
var submit = document.getElementById("submit")
var submit_msg = document.getElementById("submit_msg")
var nameElement = document.getElementById("name")

// Event listener for error message - validation
email.addEventListener("input", function (event) {
  if (email.validity.typeMismatch) {
    // Displays an error message.
    email.setCustomValidity("Please input a valid email address.");
  } else {
    // Doesn't output any error message
    email.setCustomValidity("");
  }
});

// Event listener adds a thank you message for form submission
submit.addEventListener("click", function(event) {
    submit_msg.innerHTML = "Thanks for your submission";
    //Using J-Query here, signified by the # symbol.
    setTimeout(function(){
    $('#submit_msg').remove();
    }, 5000);
});

// https://www.quirksmode.org/dom/events/blurfocus.html
// Removes default text from name field.

function nameFocus(e) {
  var element = e.target || window.event.srcElement;
  if ( element.value == "Name" )
    element.value = "";
}

function nameBlur(e) {
  var element = e.target || window.event.srcElement;
  if ( element.value === "" )
    element.value = "Name";
}

if ( nameElement.addEventListener ) {
  nameElement.addEventListener("focus", nameFocus, false);
  nameElement.addEventListener("blur", nameBlur, false);
} else if ( nameElement.attachEvent ) {
  nameElement.attachEvent("onfocus", nameFocus);
  nameElement.attachEvent("onblur", nameBlur);
}
Term
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv