Last active
May 28, 2021 12:53
-
-
Save AsthaSharma1/031149d0f3569928edebf0830a55ab72 to your computer and use it in GitHub Desktop.
Making an HTML form that's powered by APISpreadsheets.com
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> | |
<head> | |
<title>DJ Song Form </title> | |
<script | |
src="https://code.jquery.com/jquery-3.4.1.js" | |
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" | |
crossorigin="anonymous"></script> | |
<script> | |
function SubForm (){ | |
$.ajax({ | |
url:'https://api.apispreadsheets.com/data/12633/', | |
type:'post', | |
data:$("#myForm").serializeArray(), | |
success: function(){ | |
alert("Form Submitted Successfully!") | |
}, | |
error: function(){ | |
alert("Error: Form Not Submitted") | |
} | |
}); | |
} | |
</script> | |
<style> | |
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); | |
body{ | |
text-align: center; | |
background-color: #FA8BFF; | |
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%); | |
font-family: 'Roboto', sans-serif; | |
} | |
input{ | |
border-top: 1px; | |
border-left: none; | |
border-right:none; | |
} | |
#form{ | |
background-color: white; | |
margin: 50px 350px 100px 350px; | |
padding: 40px 0 100px 0; | |
border-radius: 10px; | |
width: auto; | |
height: auto; | |
} | |
button{ | |
background-color: #FA8BFF; | |
background-image: linear-gradient(90deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%); | |
border:none; | |
color: white; | |
padding:20px 0 20px 0; | |
border-radius: 20px; | |
width:75%; | |
height:75%; | |
text-align: center; | |
font-size:25px; | |
text-decoration: none; | |
} | |
button:hover{ | |
background-color: #FA8BFF; | |
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%); | |
} | |
.writeInInputs{ | |
padding-top:10px; | |
} | |
.writeInInputs input{ | |
width:75%; | |
border-top: 1px; | |
border-left: none; | |
border-right:none; | |
padding:15px; | |
text-align: left; | |
} | |
.writeInInputs h3{ | |
text-align:left; | |
padding-left:12%; | |
} | |
#buttonBreak{ | |
padding:75px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="form"> | |
<form id="myForm"> | |
<h1><label>SONG FORM</label></h1> | |
<div class="writeInInputs"> | |
<h3><label>Song Name</label></h3> | |
<input name="Song" placeholder="Enter the Name of the Song" /> | |
<h3><label>Artist</label></h3> | |
<input name="Artist" placeholder="Enter the Name of the Artist"/> | |
<h3><label>Link<label/></h3> | |
<input name="Link" placeholder="Enter the Link of the Song"> | |
</div> | |
</form> | |
<div id="buttonBreak"> | |
<button onclick="SubForm()"> Submit </button> | |
</div> | |
<a href="display.html" target="_blank"> Check out the queue </a> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment