Selaa lähdekoodia

Implemented contact form

master
Nikola Ignjatovic 5 vuotta sitten
vanhempi
commit
e5f3e93151
4 muutettua tiedostoa jossa 153 lisäystä ja 78 poistoa
  1. BIN
      images/wallpaperOurPartners.jfif
  2. 15
    18
      index.html
  3. 100
    60
      scripts/custom.js
  4. 38
    0
      styles/custom.css

BIN
images/wallpaperOurPartners.jfif Näytä tiedosto


+ 15
- 18
index.html Näytä tiedosto

@@ -356,7 +356,7 @@
<div class="hex-in2 outer-hex">
<div class="hex inner-hex">
<div class="hex-in1">
<div class="hex-in2 hex-area" >
<div class="hex-in2 hex-area no-partner" >
<div class="gallery-info" style="top: -999px;">
<ul class="socials">
@@ -429,11 +429,9 @@
<div class="hex-in2 outer-hex">
<div class="hex inner-hex">
<div class="hex-in1">
<div class="hex-in2 hex-area">
<div class="hex-in2 hex-area no-partner">
<div class="gallery-info" style="top: -999px;">
<ul class="socials">
</ul>
<ul class="socials"></ul>
<a href="#" ><h4 class="white-color">Mould Group China</h4></a>
</div>
@@ -466,7 +464,7 @@
<div class="hex-in2 outer-hex">
<div class="hex inner-hex">
<div class="hex-in1">
<div class="hex-in2 hex-area">
<div class="hex-in2 hex-area no-partner">
<div class="gallery-info" style="top: -999px;">
<ul class="socials">
@@ -502,7 +500,7 @@
<div class="hex-in2 outer-hex">
<div class="hex inner-hex">
<div class="hex-in1">
<div class="hex-in2 hex-area" >
<div class="hex-in2 hex-area no-partner" >
<div class="gallery-info" style="top: -999px;">
<ul class="socials">
@@ -576,7 +574,7 @@
<div class="hex-in2 outer-hex">
<div class="hex inner-hex">
<div class="hex-in1">
<div class="hex-in2 hex-area" >
<div class="hex-in2 hex-area no-partner" >
<div class="gallery-info" style="top: -999px;">
<ul class="socials">
</ul>
@@ -611,7 +609,7 @@
<div class="hex-in2 outer-hex">
<div class="hex inner-hex">
<div class="hex-in1">
<div class="hex-in2 hex-area" >
<div class="hex-in2 hex-area no-partner" >
<div class="gallery-info" style="top: -999px;">
<ul class="socials">
@@ -778,13 +776,13 @@
<h3>CONTACT FORM</h3>
<h5>Do you have any questions? Send us a message</h5>
<div class="log"></div>
<form method="post" action="action.php">
<p><input id="name-txt" class="input-txt" name="name" type="text" placeholder="Write your name here..."></p>
<p><input id="email-txt" class="input-txt" name="email" type="text" placeholder="Write your email here..."></p>
<p><input id="subject-txt" class="input-txt" name="subject" type="text" placeholder="Write your subject here..."></p>
<p><textarea id="message-txt" class="textarea-txt" name="message" cols="30" rows="10" placeholder="Write your message here..."></textarea></p>
<input type="hidden" id="sendContac" name="sendContact" value="send" />
<p><input id="submit" name="submit" type="submit" value="SEND"></p>
<form id="contact-form" method="POST" action="https://formspree.io/xnqgkykr">
<input id="name-txt" class="input-txt" name="name" type="text" placeholder="Write your name here..." required>
<input id="email-txt" class="input-txt" name="email" type="email" placeholder="Write your email here..." required>
<input id="subject-txt" class="input-txt" name="subject" type="text" placeholder="Write your subject here..." required>
<textarea id="message-txt" class="textarea-txt" name="message" cols="30" rows="10" placeholder="Write your message here..." required></textarea>
<input type="hidden" id="sendContac" name="sendContact" value="Send" />
<input id="submit" name="submit" type="submit" value="SEND"></p>
</form>
</div><!-- end Contact Form -->
<div class="one_half contact-socials last">
@@ -793,7 +791,7 @@
<div class="hive contact-social wow swing facebook contact-socials-3s-first">
<div class="hex outer-hex">
<div class="hex-in1">
<a href="#">
<a href="https://www.facebook.com/DiligentSoftware/" target="_blank">
<div class="hex-in2 outer-hex">
<div class="hex inner-hex">
<div class="hex-in1">
@@ -1146,7 +1144,6 @@
<script id="wow_js_file" type="text/javascript" src="scripts/wow.min.js"></script>
<script id="waypoints_js_file" type="text/javascript" src="scripts/waypoints.js"></script>
<script type="text/javascript" src="scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="scripts/jquery-cookie-master/src/jquery.cookie.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/twitter/jquery.tweet.js"></script>
<script type="text/javascript" src="scripts/jquery.typed.js"></script>

+ 100
- 60
scripts/custom.js Näytä tiedosto

@@ -30,83 +30,123 @@ jQuery(document).ready(function($){
$(this).animate({width: progressValue +'%'}, 6000);
});
}

//contact form

var form = document.getElementById("contact-form");
var button = $("#contact-form #submit");
var status = $(".log");

function success(){
//form.reset();
button.style = "display: none ";
status.addClass("successfully").text("Thanks!");
}

function error() {
status.addClass("error").text("Oops! There was a problem.");
}

button.on("submit", function(ev) {
ev.preventDefault();
button.style = "display: none ";
var data = new FormData(form);
ajax(form.method, form.action, data, success, error);
});

function ajax(method, url, data, success, error) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
success();
} else {
error();
}
};
xhr.send(data);
}

//end contact form
$('#contact-wrap').waypoint(function() {
animate();
});
//nikola

$('.clear_storage').on('click', function(e){
window.localStorage.clear();
});
$('.clear_storage').on('click', function(e){
window.localStorage.clear();
});
var get_id = localStorage.getItem('pg_id');
var get_id = localStorage.getItem('pg_id');

// check page id, then scroll to its div
if(get_id)
scrollToID(null, get_id, 300);
if(get_id)
scrollToID(null, get_id, 300);

// click event to scroll to div
//section link in nav which refer to section on homepage
$('.home_link').on('click', function(e){
e.preventDefault();
var id = '#'+$(this).data('id');
localStorage.setItem('pg_id', id);
var url = $(this).attr("href");
scrollToID(url, id, 300);
$('.home_link').on('click', function(e){
e.preventDefault();
var id = '#'+$(this).data('id');
localStorage.setItem('pg_id', id);
var url = $(this).attr("href");
scrollToID(url, id, 300);
});
});
//Link from our partners section on homepage which refer to section on portfolio page
$('.partners_link').on('click', function(e){
e.preventDefault();
var id = '#'+$(this).data('id');
localStorage.setItem('pg_id', id);
var url = $(this).attr("href");
scrollToID(url, id, 300);
});
$('.partners_link').on('click', function(e){
e.preventDefault();
var id = '#'+$(this).data('id');
localStorage.setItem('pg_id', id);
var url = $(this).attr("href");
scrollToID(url, id, 300);
});

function scrollToID(url, id, speed) {
if(url!==null)
{
window.location.href = url;
function scrollToID(url, id, speed) {
if(url!==null)
{
window.location.href = url;
}
var offSet = 50;
var obj = $(id).offset();
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}
var offSet = 50;
var obj = $(id).offset();
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}

window.addEventListener('scroll', function(e) {
var loc = window.location;
if(loc.pathname.substring(loc.pathname.lastIndexOf('/') + 1, loc.pathname.length)=='index.html')
{
if( isOnScreen( $( '#intro-wrap' ) ) ) { /* Pass element id/class you want to check */
$("nav li.active").removeClass("active").find('.nav-active-mark').remove();
$("nav li.intro-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
}
if( isOnScreen( $( '#about-wrap' ) ) ) { /* Pass element id/class you want to check */
$("nav li.active").removeClass("active").find('.nav-active-mark').remove();
$("nav li.about-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
}
if( isOnScreen( $( '#our_partners-wrap' ) ) ) { /* Pass element id/class you want to check */
$("nav li.active").removeClass("active").find('.nav-active-mark').remove();
$("nav li.our_partners-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
}
if( isOnScreen( $( '#services-wrap' ) ) ) { /* Pass element id/class you want to check */
$("nav li.active").removeClass("active").find('.nav-active-mark').remove();
$("nav li.services-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
}
if( isOnScreen( $( '#contact-wrap' ) ) ) { /* Pass element id/class you want to check */
$("nav li.active").removeClass("active").find('.nav-active-mark').remove();
$("nav li.contact-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
}
window.addEventListener('scroll', function(e) {
var loc = window.location;
if(loc.pathname.substring(loc.pathname.lastIndexOf('/') + 1, loc.pathname.length)=='index.html')
{
if( isOnScreen( $( '#intro-wrap' ) ) ) { /* Pass element id/class you want to check */
$("nav li.active").removeClass("active").find('.nav-active-mark').remove();
$("nav li.intro-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
}
if( isOnScreen( $( '#about-wrap' ) ) ) { /* Pass element id/class you want to check */
$("nav li.active").removeClass("active").find('.nav-active-mark').remove();
$("nav li.about-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
}
if( isOnScreen( $( '#our_partners-wrap' ) ) ) { /* Pass element id/class you want to check */
$("nav li.active").removeClass("active").find('.nav-active-mark').remove();
$("nav li.our_partners-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
}
if( isOnScreen( $( '#services-wrap' ) ) ) { /* Pass element id/class you want to check */
$("nav li.active").removeClass("active").find('.nav-active-mark').remove();
$("nav li.services-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
}
if( isOnScreen( $( '#contact-wrap' ) ) ) { /* Pass element id/class you want to check */
$("nav li.active").removeClass("active").find('.nav-active-mark').remove();
$("nav li.contact-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
}
}
});
}
});

//nikola
/*========== Disables ==========*/

+ 38
- 0
styles/custom.css Näytä tiedosto

@@ -27,6 +27,10 @@
background-color: #d7dbd8!important;
}
#gallery .gallery-item-overlay .hex-area.no-partner
{
background-color: rgba(0,0,0,0.1)!important;
}
#gallery .gallery-item-overlay .outer-hex , #portfolio-header .gallery-item-overlay .outer-hex {
background-color: #9e9e9e;
}
@@ -103,6 +107,40 @@
{
background-color: rgba(153,60,149,0.7)!important;
}
#galery .gallery-item-overlay:hover .hex-area.no-partner
{
background-color: #d7dbd8!important;
}
#gallery .section-triangle-grey
{
/*background-color: #f6f6f6;*/
display: none;
}
#gallery
{
position: relative;
}
#our_partners-wrap::before{
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 36px 63px 0px 63px;
border-color: #f6f6f6 transparent transparent transparent;
top: 0;
left:50%;
transform: translateX(-50%);
z-index: 11;
}
.successfully
{
color:#00FF00;
}
.error
{
background-color: #FF0000;
}
@media (max-width: 1024px){
#gallery .gallery-box
{

Loading…
Peruuta
Tallenna