LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
    
CSS
* {
  transition: .25s ease;
}
.contact-wrap {
  width: 100%;

  display: flex;
  flex-direction: column;
}
.form-wrapper {
  padding: 0;
  font-size: 1rem;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.form-div {
  box-sizing: border-box;
  background-color: transparent;
  width: 100%;
  padding: 2em;
  max-width: 50em;
  min-height: 25em;
}
.input-wrap {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.feedback-input {
  box-shadow: none;
  border-radius: 0;
  background-clip: padding-box;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-bottom: 2px solid #333;
  color: #333;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  background-color: transparent;
  padding: 1em;
  margin: 0 0 2em 0;
  width: 100%;
}
.input-wrap .feedback-input:last-child {
  margin-left: 2em;
}
.feedback-input:focus {
  border: 2px solid #333;
  background-color: transparent;
  outline: none;
}
textarea {
  font-size: 1rem;
  height: 10em;
  overflow: hidden;
  resize: none;
}
.message {
  text-align: left;
  margin: 0;
}
.checkbox-wrap {
  padding: 0;
  margin: 1em 0;
  text-align: center;
  position: relative;
}
.checkbox {
  visibility: hidden;
}
.captcha {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  padding: 0;
  color: #333;
  position: relative;
}
.captcha:before {
  background-color: transparent;
  border: 2px solid rgba(0,0,0, 1);
  border-radius: 100%;
  content: '';
  position: absolute;
  top: 2px;
  left: -25px;
  z-index: 1;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
.checkbox:checked ~ .captcha:before {
  background-color: #333;
}
.send-button {
  font-size: 1rem;
  border: 2px solid #333;
  cursor: pointer;
  min-width: 11.5em;
  letter-spacing: 1px;
  background-color: transparent;
  font-family: 'Roboto', sans-serif;
  padding: 0.75em 0.3em;
  margin: 0 auto;
  color: #333;
  font-weight: 600;
  outline: none;

  display: flex;
  justify-content: center;
}
.send-button:hover {
  background-color: #333;
  color: #fff;
}
::-webkit-input-placeholder {
  color: #333;
  font-family: 'Roboto', sans-serif;
  text-align: left;
}  
::input-placeholder {
  color: #333;
  font-family: 'Roboto', sans-serif;
  text-align: left;
}
::-webkit-input-placeholder {
  color: #333;
  font-family: 'Roboto', sans-serif;
  text-align: left;
}
:-ms-input-placeholder {
  color: #333;
  font-family: 'Roboto', sans-serif;
  text-align: left;
}
::placeholder {
  color: #333;
  font-family: 'Roboto', sans-serif;
  text-align: left;
}

@media only screen and (max-width: 426px) {
  .input-wrap {
    flex-direction: column;
  }
  .input-wrap .feedback-input:last-child {
    margin-left: 0;
  }
}
JS
/*$(function() {
  //  to validate your form with js
  var $form  = $('#form');
  $form.on('submit', function (event) { //Change-path to php file
    $.ajax({
      type: "POST",
      url: "../php/mail.php",
      data: $form.serialize()
    }).done(function() {
      alert('Thanks, got your message.');
      $form[0].reset();
    });
    event.preventDefault();
  });
});*/

// code for your php file
/* 

Description

Fully adaptive , workin' and complete contact form
Term
Wed, 12/27/2017 - 06:59

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv