poudelmadhav/slacknotify.html

## slacknotify.html
<!-- Dont forget to keep your webhook url in ENV["webhook_url"] -->
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<head>
<body>

<h3>Contact Form</h3>

<div>
  <form id="form" onsubmit="return validate()" action="">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="Australia">Australia</option>
      <option value="Canada">Canada</option>
      <option value="USA">USA</option>
      <option value="Nepal">Nepal</option>
    </select>

    <input type="submit" value="Submit">
  </form>
</div>
<script>
  function validate() {
    let fname = document.getElementById('fname').value;
    let lname = document.getElementById('lname').value;
    if ((fname == "") && (lname == ""))
    {
      alert("Please fill some information.");
      return false;
    } else {
      notifySlack();
      return true;
    }
  }
  // notifies to slack
  function notifySlack() {
    const url = ENV["webhook_url"];
    let text = "One user submitted a contact form in Madhav" +
                "\n> First Name: " + $("input[name=firstname]").val() +
                "\n> Last Name: " + $("input[name=lastname]").val() +
                "\n> Country: " + $("#country").children("option:selected").val();
    let payload = {
                    "text": text,
                    "mrkdwn": true,
                    "channel": "#rams",
                    "username": "Ravi Mathya",
                    "icon_url": "https://mathyaravi.com.np/photos/ravi.jpg"
                  };
    // let payload_attachment = {
    //                "attachments":[
    //                   {
    //                      "fallback":"One user submitted a contact form in Madhav",
    //                      "text": "this appears inside attachment",
    //                      "pretext":"One user submitted a contact form in Madhav",
    //                      "color":"good",
    //                      "fields":[
    //                         {
    //                            "title":"Contact Form Data of Madhav",
    //                            "value":text,
    //                            "short":true
    //                         }
    //                      ]
    //                   }
    //                ]
    //             };
    $.ajax({
        data: "payload="  + JSON.stringify(payload),
        dataType: 'json',
        processData: false,
        type: 'POST',
        url: url
    })
    alert("Form Successfully submitted.")
  }
</script>
</body>
</html>
	<!-- Dont forget to keep your webhook url in ENV["webhook_url"] -->
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous"></script>
	<style>
	input[type=text], select {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}

	input[type=submit] {
	width: 100%;
	background-color: #4CAF50;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	}

	input[type=submit]:hover {
	background-color: #45a049;
	}

	div {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 20px;
	}
	</style>
	<head>
	<body>

	<h3>Contact Form</h3>

	<div>
	<form id="form" onsubmit="return validate()" action="">
	<label for="fname">First Name</label>
	<input type="text" id="fname" name="firstname" placeholder="Your name..">

	<label for="lname">Last Name</label>
	<input type="text" id="lname" name="lastname" placeholder="Your last name..">

	<label for="country">Country</label>
	<select id="country" name="country">
	<option value="Australia">Australia</option>
	<option value="Canada">Canada</option>
	<option value="USA">USA</option>
	<option value="Nepal">Nepal</option>
	</select>

	<input type="submit" value="Submit">
	</form>
	</div>
	<script>
	function validate() {
	let fname = document.getElementById('fname').value;
	let lname = document.getElementById('lname').value;
	if ((fname == "") && (lname == ""))
	{
	alert("Please fill some information.");
	return false;
	} else {
	notifySlack();
	return true;
	}
	}
	// notifies to slack
	function notifySlack() {
	const url = ENV["webhook_url"];
	let text = "One user submitted a contact form in Madhav" +
	"\n> First Name: " + $("input[name=firstname]").val() +
	"\n> Last Name: " + $("input[name=lastname]").val() +
	"\n> Country: " + $("#country").children("option:selected").val();
	let payload = {
	"text": text,
	"mrkdwn": true,
	"channel": "#rams",
	"username": "Ravi Mathya",
	"icon_url": "https://mathyaravi.com.np/photos/ravi.jpg"
	};
	// let payload_attachment = {
	// "attachments":[
	// {
	// "fallback":"One user submitted a contact form in Madhav",
	// "text": "this appears inside attachment",
	// "pretext":"One user submitted a contact form in Madhav",
	// "color":"good",
	// "fields":[
	// {
	// "title":"Contact Form Data of Madhav",
	// "value":text,
	// "short":true
	// }
	// ]
	// }
	// ]
	// };
	$.ajax({
	data: "payload=" + JSON.stringify(payload),
	dataType: 'json',
	processData: false,
	type: 'POST',
	url: url
	})
	alert("Form Successfully submitted.")
	}
	</script>
	</body>
	</html>