Skip to content

Instantly share code, notes, and snippets.

@AsthaSharma1

AsthaSharma1/form.html

Last active May 28, 2021 12:53
Show Gist options
  • Save AsthaSharma1/031149d0f3569928edebf0830a55ab72 to your computer and use it in GitHub Desktop.
Save AsthaSharma1/031149d0f3569928edebf0830a55ab72 to your computer and use it in GitHub Desktop.
Download ZIP
Making an HTML form that's powered by APISpreadsheets.com
Raw
form.html
<!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