Skip to content

Commit

Permalink
Initial Push
Browse files Browse the repository at this point in the history 
Co-Authored-By: Konrad Papała <[email protected]>
  • Loading branch information
@c0fe @kpion
c0fe and kpion committed Aug 5, 2019
1 parent abca8e2 commit 7412908
Show file tree
Hide file tree
Showing 21 changed files with 11,726 additions and 0 deletions.
22 changes: 22 additions & 0 deletions functions.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<?php

function get_client_ip() {
$ipaddress = '';
if (isset($_SERVER['HTTP_CLIENT_IP']))
$ipaddress = $_SERVER['HTTP_CLIENT_IP'];
else if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
$ipaddress = $_SERVER['HTTP_X_FORWARDED_FOR'];
else if(isset($_SERVER['HTTP_X_FORWARDED']))
$ipaddress = $_SERVER['HTTP_X_FORWARDED'];
else if(isset($_SERVER['HTTP_FORWARDED_FOR']))
$ipaddress = $_SERVER['HTTP_FORWARDED_FOR'];
else if(isset($_SERVER['HTTP_FORWARDED']))
$ipaddress = $_SERVER['HTTP_FORWARDED'];
else if(isset($_SERVER['REMOTE_ADDR']))
$ipaddress = $_SERVER['REMOTE_ADDR'];
else
$ipaddress = 'UNKNOWN';
return $ipaddress;
}

?>
151 changes: 151 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<html>
<head>
<title>Mango Form</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- load bootstrap via CDN -->

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

</head>
<body>
<div class="col-sm-6 col-sm-offset-3">

<h1>Contact Form</h1>

<!-- OUR FORM -->
<form name="mangoForm" id="form" action="mangoForm.php" method="POST">

<!-- FIRST NAME -->
<div name="firstName-group" id="firstName-group" class="form-group">
<label for="firstName">First Name:</label>
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>

<!-- LAST NAME -->
<div id="lastName-group" class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>

<!-- COMPANY NAME -->
<div id="companyName-group" class="form-group">
<label for="companyName">Company Name:</label>
<input type="text" class="form-control" name="companyName" id="companyName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>

<!-- COMPANY ADDRESS -->
<div id="companyAddress-group" class="form-group">
<label for="companyAddress">Company Address:</label>
<input type="text" class="form-control" name="companyAddress" id="companyAddress" placeholder="Henry Pym">
<!-- errors will go here -->
</div>

<!-- CITY -->
<div id="city-group" class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" name="city" id="city" placeholder="Henry Pym">
<!-- errors will go here -->
</div>

<div id="state-group" class="form-group">
<label for="state">State</label>
<select id="state" name="state" class="form-control">
<option value="" selected>Choose...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>

<!-- ZIPCODE -->
<div id="zipcode-group" class="form-group">
<label for="zipcode">Zipcode:</label>
<input type="text" class="form-control" name="zipcode" id="zipcode" placeholder="12345">
<!-- errors will go here -->
</div>

<!-- EMAIL ADDRESS -->
<div id="emailAddress-group" class="form-group">
<label for="emailAddress">Email Address:</label>
<input type="text" class="form-control" name="emailAddress" id="emailAddress" placeholder="[email protected]">
<!-- errors will go here -->
</div>

<!-- PHONE NUMBER -->
<div id="phoneNumber-group" class="form-group">
<label for="phoneNumber">Phone Number:</label>
<input type="text" class="form-control" name="phoneNumber" id="phoneNumber" placeholder="12345">
<!-- errors will go here -->
</div>

<!-- MESSAGE -->
<div id="message-group" class="form-group">
<label for="message">Message:</label>
<input type="text" class="form-control" name="message" id="message" placeholder="Ant Man">
<!-- errors will go here -->
</div>

<!-- GOOGLE RECAPTCHA -->
<div class="form-group">
<div class="g-recaptcha" data-sitekey="PUBLIC_KEY_HERE"></div>
</div>

<button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button>

</form>

</div>
<script src="mangoForm.js" defer></script> <!-- load our javascript file -->
</body>
<script src='https://www.google.com/recaptcha/api.js'></script>
</html>
153 changes: 153 additions & 0 deletions mangoForm.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
/*!
* MangoForm Vanilla Fetch v1.0.0
* Website (https://github.com/c0fe/MangoForm-Vanilla-JS)
* Licensed under MIT (https://github.com/c0fe/MangoForm-Vanilla-JS/blob/master/LICENSE)
*/

document.querySelector("#mangoForm").addEventListener("submit", function(e) {
//create variable for contact form url
var formURL = 'mangoForm.php';
//prevent default submission
event.preventDefault();
//define form fields
var mangoForm = {
'firstName': document.querySelector('input[name=firstName]').value,
'lastName': document.querySelector('input[name=lastName]').value,
'companyName': document.querySelector('input[name=companyName]').value,
'companyAddress': document.querySelector('input[name=companyAddress]').value,
'city': document.querySelector('input[name=city]').value,
'state': document.querySelector('select[name=state]').value,
'zipcode': document.querySelector('input[name=zipcode]').value,
'emailAddress': document.querySelector('input[name=emailAddress]').value,
'phoneNumber': document.querySelector('input[name=phoneNumber]').value,
'message': document.querySelector('input[name=message]').value,
'g-recaptcha-response': grecaptcha.getResponse()
}


//define request variable
var formRequest = new Request(formURL, {
method: 'POST',
body: JSON.stringify(mangoForm),
headers: {
"content-type": "application/json; charset=utf-8"
}
});

fetch(formRequest)
.then(function(formResponse) {
return formResponse.json();
})
.then(function(data) {
//handle server responses
if (!data.success) {
//handle error messages
//handle error message for firstName
//console.log(data);
if (data.errors.firstName && !document.querySelector('#firstName-group .help-block')) {
document.getElementById("firstName-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.firstName;
document.getElementById("firstName-group").append(helpBlock);
}
//handle errors for lastName
if (data.errors.lastName && !document.querySelector('#lastName-group .help-block')) {
document.getElementById("lastName-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.lastName;
document.getElementById("lastName-group").appendChild(helpBlock);
}
//handle errors for companyName
if (data.errors.companyName && !document.querySelector('#companyName-group .help-block')) {
document.getElementById("companyName-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.companyName;
document.getElementById("companyName-group").appendChild(helpBlock);
}
//handle errors for companyAddress
if (data.errors.companyAddress && !document.querySelector('#companyAddress-group .help-block')) {
document.getElementById("companyAddress-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.companyAddress;
document.getElementById("companyAddress-group").appendChild(helpBlock);
}
//handle errors for city
if (data.errors.city && !document.querySelector('#city-group .help-block')) {
document.getElementById("city-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.city;
document.getElementById("city-group").appendChild(helpBlock);
}
//handle errors for state
if (data.errors.state && !document.querySelector('#state-group .help-block')) {
document.getElementById("state-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.state;
document.getElementById("state-group").appendChild(helpBlock);
}
//handle errors for zipcode
if (data.errors.zipcode && !document.querySelector('#zipcode-group .help-block')) {
document.getElementById("zipcode-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.zipcode;
document.getElementById("zipcode-group").appendChild(helpBlock);
}
//handle errors for emailAddress
if (data.errors.emailAddress && !document.querySelector('#emailAddress-group .help-block')) {
document.getElementById("emailAddress-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.emailAddress;
document.getElementById("emailAddress-group").appendChild(helpBlock);
}
//handle errors for phoneNumber
if (data.errors.phoneNumber && !document.querySelector('#phoneNumber-group .help-block')) {
document.getElementById("phoneNumber-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.phoneNumber;
document.getElementById("phoneNumber-group").appendChild(helpBlock);
}
//handle errors for message
if (data.errors.message && !document.querySelector('#message-group .help-block')) {
document.getElementById("message-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.message;
document.getElementById("message-group").appendChild(helpBlock);
}
// handle errors for captcha ---------------
if (data.errors.captcha) {
swal({
title: "Error!",
text: data.errors.captcha,
icon: "error",
});
}
// handle errors for phpmailer ---------------
if (data.message) {
swal({
title: "Error!",
text: data.message,
icon: "error",
});
}
}
document.getElementById("form").reset();
if (data.success) {
swal({
title: "Success!",
text: data.message,
icon: "success",
});

}
});
})
Loading

0 comments on commit 7412908

Please sign in to comment.