Created
June 15, 2022 11:00
-
-
Save lmas3009/16cfb426b5016378d007fd748ffad99e to your computer and use it in GitHub Desktop.
Integrate dofeedbackin into your web project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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