Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An example in jquery to notify slack filled data in the contact form
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.