Advertisement
ayiemedia

sda

Aug 10th, 2023
131
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.21 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  8. <style>
  9. .register .nav-tabs .nav-link:hover{
  10. border: none;
  11. }
  12. .text-align{
  13. margin-top: -3%;
  14. margin-bottom: -9%;
  15.  
  16. padding: 10%;
  17. margin-left: 30%;
  18. }
  19. .form-new{
  20. margin-right: 22%;
  21. margin-left: 20%;
  22. }
  23. .register-heading{
  24. margin-left: 21%;
  25. margin-bottom: 10%;
  26. color: #e9ecef;
  27. }
  28. .register-heading h1{
  29. margin-left: 21%;
  30. margin-bottom: 10%;
  31. color: #e9ecef;
  32. }
  33. .register{
  34. background: -webkit-linear-gradient(left, #055a4f, #00c6ff);
  35. margin-top: 3%;
  36. padding: 3%;
  37. border-radius: 2.5rem;
  38. }
  39. .btnSubmit
  40. {
  41. width: 50%;
  42. border-radius: 1rem;
  43. padding: 1.5%;
  44. color: #fff;
  45. background-color: #03612e;
  46. border: none;
  47. cursor: pointer;
  48. margin-right: 6%;
  49. color: rgb(246, 246, 252);
  50. margin-top: 4%;
  51. }
  52. </style>
  53.  
  54. </head>
  55. <body>
  56.  
  57. <div class="container register">
  58. <div class="row">
  59. <div class="col-md-12">
  60. <div class="tab-pane fade show active text-align form-new" id="home" role="tabpanel" aria-labelledby="home-tab">
  61. <h3 class="register-heading">Connect Google Spreadsheet to HTML</h3>
  62. <div class="row register-form">
  63. <div class="col-md-12">
  64. <form method="post" autocomplete="off" name="google-sheet">
  65. <div class="form-group">
  66. <input type="text" name="Name" class="form-control" placeholder="Your Name *" value="" required=""/>
  67. </div>
  68. <div class="form-group">
  69. <input type="text" name="Email" class="form-control" placeholder="Your Email *" value="" required=""/>
  70. </div>
  71. <div class="form-group">
  72. <input type="number" name="Phone" class="form-control" placeholder="Your Contact Number *" value="" required=""/>
  73. </div>
  74. <div class="form-group">
  75. <input type="submit" name="submit" class="btnSubmit btn-block" value="Login" />
  76. </div>
  77. </form>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84.  
  85. <script>
  86. const scriptURL = 'https://script.google.com/macros/s/AKfycbynNvgEmP99pRGmCM0foaJmkTFZwJ5s9XlrEPJFUOZ1dMxYtchs-c4hjoVSYO3Wy8jOqw/exec'
  87. const form = document.forms['google-sheet']
  88.  
  89. form.addEventListener('submit', e => {
  90. e.preventDefault()
  91. fetch(scriptURL, { method: 'POST', body: new FormData(form)})
  92. .then(response => alert("Thanks for Contacting us..! We Will Contact You Soon..."))
  93. .catch(error => console.error('Error!', error.message))
  94. })
  95. </script>
  96.  
  97. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  98. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  99. </body>
  100. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement