Skip to content

Instantly share code, notes, and snippets.

@lmas3009
Created June 15, 2022 11:00
Show Gist options
  • Save lmas3009/16cfb426b5016378d007fd748ffad99e to your computer and use it in GitHub Desktop.
Save lmas3009/16cfb426b5016378d007fd748ffad99e to your computer and use it in GitHub Desktop.
Integrate dofeedbackin into your web project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>dofeedbackin | Demo</title>
<link rel="stylesheet" href="./style.css">
<script src="ADD_YOUR_API_KEY" id="dofeedbackin_api"></script>
</head>
<body>
<div class="container">
<div id="contact" >
<!-- This is requied for in your application -->
<input placeholder="Username" type="text" tabindex="1" id="dfin_username" >
<input placeholder="Email Id" type="email" tabindex="2" id="dfin_email" >
<input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" id="dfin_phone">
<textarea placeholder="Feedback 1" type="text" tabindex="4" id="dfin_feed1" ></textarea>
<textarea placeholder="Feedback 2 (optional)" type="text" tabindex="5" id="dfin_feed2"></textarea>
<textarea placeholder="Feedback 3 (optional)" type="text" tabindex="6" id="dfin_feed3"></textarea>
<button name="submit" onclick="dfinSubmit()" type="button" id="contact-submit" data-submit="...Sending">Submit</button>
<p class="copyright">Designed by <a href="http://dofeedbackin.netlify.app/" target="_blank" title="dofeedbackin">dofeedbackin</a></p>
</div>
</div>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 12px;
line-height: 30px;
color: #777;
background: #101426;
}
.container {
max-width: 400px;
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="button"] {
font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#contact h3 {
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="button"] {
cursor: pointer;
width: 100%;
border: none;
background: #101426;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="button"]:hover {
background: #101426;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="button"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.copyright {
text-align: center;
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment