So, im trying to get the informatino you put into an HTML into a Table in Php, problem is, i cant find any solutions online. and i dont know much about php yet. this is only my second time asking something so i still dont quite know the way you are supposed to fill in a question. anyway, here is the code in question:
HTML
</head>
<body>
<form action="http://www.cs.tut.fi/cgi-bin/run~jkorpela/echo.cgi"method="post">
<div>
<label for="vnaam">Voornaam</label>
<input type="text" id="vnaam" name="vnaam" required/>
</div>
<div>
<label for="anaam">Achternaam</label>
<input type="text" id="anaam" name="anaam" required/>
</div>
<div>
<label for="tnum">Telefoon Nummer</label>
<input type="text" id="tnum" name="tnum" />
</div>
<div>
<label for="tnum">E-mail</label>
<input type="email" id="tnum" name="tnum" />
</div>
<div>
<label for="adres">Adres</label>
<input type="" id="adres" name="adres" required/>
</div>
<div>
<label for="land">Land</label>
<select id="land" name="land">
<option value="ned">Nederland</option>
<option value="usa">Amerika</option>
<option value="eng">Engeland</option>
<option value="bel">België</option>
<option value="fr">Frankrijk</option>
<option value="ger">Duitsland</option>
</select>
</div>
<div class="button">
<button type="submit">Opsturen</button>
</div>
</form>
</body>
</html>
Css
<style type="text/css">
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the outline of the form */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
/* To make sure that all labels have the same size and are properly aligned */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 1em sans-serif;
/* To give the same size to all text field */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* To give a little highlight on active elements */
border-color: #000;
}
textarea {
/* To properly align multiline text fields with their labels */
vertical-align: top;
/* To give enough room to type some text */
height: 5em;
/* To allow users to resize any textarea vertically
It does not work on all browsers */
resize: vertical;
}
.button {
/* To position the buttons to the same position of the text fields */
padding-left: 90px; /* same size as the label elements */
}
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
margin-left: .5em;
}
</style>
<form method='POST' action='formhandler.php'>
<input type='text' name='name' value='john'>
<input type='text' name='address' value='32 flowers street'>
<input type='text' name='email' value='john#example.com'>
</form>
A typical form like this one will be delivered to the php file formhandler.php by the browser.
Then you handle it in your formhandler.php file
formhandler.php
$name = isset($_POST['name']) ? $_POST['name'] : "";
$address= isset($_POST['address']) ? $_POST['address'] : "";
$email= isset($_POST['email']) ? $_POST['email'] : "";
echo $name; //john
echo $address; //32 flowers street
echo $email; //john#example.com
Now you have the form data. use it as you like, store them in a database, build another html response file to the user or do what ever you want to do with them.
for example, we are going to feedback the data to the user.
echo "We have successfully received your inputs as <br>
<table>
<tbody>
<tr><td>name</td><td>$name</td></tr>
<tr><td>address</td><td>$address</td></tr>
<tr><td>email</td><td>$email</td></tr>
</tbody>
</table>";
Note: in a real life production you need to validate any inputs come to your php files first.
First change
<form action="http://www.cs.tut.fi/cgi-bin/run~jkorpela/echo.cgi"method="post">
to Something like
<form action="http://www.cs.tut.fi/getdata.php" method="post">
Because you are using cgi-bin/run~jkorpela/echo.cgi which is not used for get php data because its a cgi file. it should a .php extension file and php should be installed on your server. and I am assuming that http://www.cs.tut.fi/ is the url for your website.
Where getdata.php is the php file where you get all your input values. You need to create that file on your server. If you are on AWS then it might be something like /var/www/html/
getdata.php
<?php
echo "<pre>";
print_r($_REQUEST);
?>
Related
I want to add simple html form without breaking the extisiting design or license of Classic Editor plugin which is GPLv2
I added simple code in classic-edior.php file (I'm not sure If it's the best way but I'm making a wp-plugin that must this simple form comes in Classic Edior creating post page so I can't use adding short code maybe?.
function myfunction()
{
// after this next, plain HTML
?>
<!-- HTML !-->
<!-- HTML !-->
<div style=" ">
<button class="button-2" role="button" style=" display: flex; margin-left:25%; justify-content: center; ">Button</button>
<form action="/action_page.php" style=" margin: auto; width: 50%;border: 3px solid black; padding: 10px;">
<label for="fname">Action:</label><br>
<input type="text" id="fname" name="fname" value=" "><br>
<input type="submit" value="Submit">
</form>
</div>
<!-- more HTML code here -->
<?php // back to PHP
// .. some more PHP stuff
return;
}
myfunction();
Put the code between the ending question mark
For e.g.
function myfunction()
{
// PASTE THE HTML CODE HERE
}
?>
How can i be able to search and retrieve data from a mysql table fields. When the records are found then the user is notified the record was found.
I have created my html form with action and php script to fetch data from the database.
When i click on search it only displays no records found.
I want to fetch data from 3 fields in the table.
my html form below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Conduct Database Search</title>
<style type="text/css">
body,
td,
th {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<p><img src="images/logonew.png" width="150" height="73" alt="Find Real Me Logo" /> </p>
<hr>
<p>Welcome to the conduct database search page. You can verify domestic worker's conduct and history.
</p>
<p>Search database by entering First name, Middle name and ID No. below and click the Search Conduct Database.
</p>
<form id="form1" action="search15.php" name="form1" method="post">
<p>
<label for="First_name">First name:</label>
<input name="First_name" type="text" required="required" id="First_name" title="First name" size="30" maxlength="30">
</p>
<p>
<label for="Last_name">Last name:</label>
<input name="Last_name" type="text" required="required" id="Last_name" title="last_name" size="30" maxlength="30">
</p>
<p>
<label for="ID_NO">ID Number:</label>
<input name="ID_NO" type="number" required="required" id="ID_NO" title="ID_NO">
</p>
<p>
<input name="submit" type="submit" id="submit" formaction="search15.php" formmethod="POST" value="Search Conduct Database">
</p>
<p> </p>
</form>
<hr>
<p>Copyright All Rights Reserved </p>
</body>
</html>
```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Conduct Database Search Results</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!-- body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #006600;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul,
ol,
dl {
/* Due to variations between browsers, it's best practices to zero padding and margin
on lists. For consistency, you can either specify the amounts you want here, or on the list items
(LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you
write a more specific selector. */
padding: 0;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0;
/* removing the top margin gets around an issue where margins can escape from their
containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px;
/* adding the padding to the sides of the elements within the divs, instead of
the divs themselves, gets rid of any box model math. A nested div with side padding can also be
used as an alternate method. */
}
a img {
/* this selector removes the default blue border displayed in some browsers around an image
when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors
that
create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline;
/* unless you style your links to look extremely unique, it's best to
provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover,
a:active,
a:focus {
/* this group of selectors will give a keyboard navigator the same
hover
experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an
image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFFFFF;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have
padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side
padding or border to the div itself, it will be added to the width you define to create the *total*
width. You may also choose to remove the padding on the element in the div and place a second div
within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #333333;
color: #CCC;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {
/* this class can be used to float an element right in your page. The floated element must
precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft {
/* this class can be used to float an element left in your page. The floated element must
precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat {
/* this class can be placed on a <br /> or empty div as the final element following
the last floated div (within the #container) if the #footer is removed or taken out of the
#container */
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<div align="left">
<img src="logo.png" width="180" height="88"></div>
<!-- end .header -->
</div>
<div class="content">
<div align="right"></div>
<div align="right">
<p>Home | Services | Contact | Search Again</p>
<hr>
<p> </p>
</div>
<h1>Results</h1>
<?php
//load database connection
$host = "localhost";
$user = "mydata";
$password = "mydata";
$database_name = "mydata";
$pdo = new PDO("mysql:host=$host;dbname=$database_name", $user, $password, array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));
// Search from MySQL database table
$search=$_POST['submit'];
$query = $pdo->prepare("select * from red_data1 where ID_NO LIKE '%$search%' OR First_name LIKE
'%$search%' OR Middle_name LIKE '%$search%' OR Last_name LIKE '%$search%' LIMIT 0 , 10");
$query->bindValue(1, "%$search%", PDO::PARAM_STR);
$query->execute();
// Display search result
if (!$query->rowCount() == 0) {
echo "Your Reference Search <b>found</b> the following in our database:<br/> <br/>";
echo "<a href='http://localhost/frm_test2/contact' target='_blank'>Click here </a> to
contact us for more information relating to your search.<br/> <br/>";
echo "<table style=\"font-family:arial;color:#333333;\">";
echo "<tr><td style=\"border-style:solid;border-width:1px;border-
color:#98bf21;background:#98bf21;\">ID No.</td><td style=\"border-style:solid;border-
width:1px;border-color:#98bf21;background:#98bf21;\">First Name</td><td style=\"border-
style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Middle Name</td><td
style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Last
Name</td>
</tr>";
while ($results = $query->fetch()) {
echo "<tr><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['ID_NO'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['First_name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['Middle_name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['Last_name'];
echo "</td></tr>";
}
echo "</table>";
} else {
echo 'No Records found ';
}
?>
<p> </p>
<!-- end .content -->
</div>
<div class="footer">
<p align="center">Copyright </p>
<!-- end .footer -->
</div>
<!-- end .container -->
</div>
</body>
</html>
$search = $_POST['search'];
$sql = "SELECT * FROM TABLE_NAME WHERE CONCAT('database column names') LIKE '%".$search."%' ";
I have a query from mysql, I am getting one row at the time randomly, I am teaching and I want the row to just show one field at the time. for example, I want my students to see the title of the book, I will ask them Who is the author and after they finish guessing I will click the button that says author or Theme and they will see the author name or the theme of the title. As of right now I am able to see all the fields with the information that they contain, but I haven't been able to hide the author and theme to just display them with the click of each of the button.
<form action="index3.php" method="get">
<?php while($row = mysqli_fetch_array($result2)): ;?>
Title of book : <?php echo $row[3];?>
<br/><br/>
<input type="button" value="Author" name="publish">
<?php echo $row[0];?>
<br/><br/>
<input type="button" value="Group"><?php echo $row[1];?>
<br/><br/>
<input type="button" value="Theme"> <?php echo $row[2];?>
<br/><br/>
<input type="submit" value="Next">
</form>
Some JavaScript is required to show hidden fields. A helpful tip here, use associative arrays on this, it's not readable when you use numeric arrays (I am guessing the names below):
jsFiddle of below: https://jsfiddle.net/4sg5wjm3/
<form action="index3.php" method="get">
<!-- use mysqli_fetch_assoc here instead of mysqli_fetch_array -->
<?php while($row = mysqli_fetch_assoc($result2)): ?>
<div class="book-group">
<h3>Title of book : <?php echo $row['book_title'] ?></h3>
<div class="hide pad-bottom author">
<?php echo $row['author'] ?>
</div>
<div class="hide pad-bottom group">
<?php echo $row['book_group'] ?>
</div>
<div class="hide pad-bottom theme">
<?php echo $row['book_theme'];?>
</div>
Reveal Author
Reveal Theme
Reveal Group
NEXT
</div>
<?php endwhile;?>
</form>
<!-- Need jQuery library -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
// Document ready
$(function(){
// When user clicks reveal button
$(".reveal").on('click', function(e) {
// Stop normal action of <a> tag
e.preventDefault();
// Find the parent div, then find the appropriate child div based on
// what the data- attribute is of the clicked button
$(this).parents('.book-group').find('.'+$(this).data('reveal')).fadeIn('fast');
});
});
</script>
<!-- Some styles to make the show/hide work -->
<style>
* {
font-family: Arial;
}
.hide {
display: none;
}
.pad-bottom {
padding-bottom: 1em;
}
a:link,
a:visited {
background-color: green;
float: left;
clear: both;
padding: 0.5em;
font-size: 1.2em;
border-radius: 3px;
text-decoration: none;
color: #FFF;
transition: background-color 0.5s;
margin: 0.2em;
}
.book-group {
display: flex;
flex-direction: row;
margin: 0.5em;
padding: 0.5em;
border-top: 1px solid #ccc;
}
</style>
Note, I have not done anything with the next button, it can have JS applied to it as well in the same manor as to show and hide the book-group classes so only one book shows at a time.
I need help on my php program.
I have 2 forms inside my testing.php
Main form named "mainform"
the other Form is with checkbox named "modalForm"
My program works like this. If you click the disabled textbox, a modal will pop-up containing the form with checkbox. If only 1 of the checkbox were check I'm gonna display the textlabel of it on my disabled textbox otherwise if more than 2 were check I will display the value "Multiple" on the disabled textbox.
In short I will display only the textlabel on UI while its value will be inserted/updated into the system database.
I tried lots of condition and still i dont get it. anyone help me please.
Here is my look a like code
testing.php
<form method="post" name="mainform" action="">
<label>TestLabel</label>
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" name="test" placeholder="test" value="">
</a>
</form>
<form method="post" name="modalForm" id="modalForm" action="testing.php">
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="mark">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="joe">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="kevin">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="michael">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="jordan">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
styles.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
Hope you guys can help me. I wanna know how can I pass the value of the checkboxes on my mainform . Thank you so much in advance.
I tried that code,set id="submit" at the submit button of the modal form and id="test_modal[]" at checkboxes,I used some functions of jquery I set at header the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(e) {
// var checked = [];
i=0;
temp=""
$("input[name='test_modal[]']:checked").each(function ()
{ temp=$(this).val();
i++;
// checked.push($(this).val());
});
if (i==1)
$("#test").val(temp);
else if (i>1)
$("#test").val('multiple');
$("#modal").fadeOut();
// alert($("#do").val())
e.preventDefault();
});
});</script>
Here is the sample for couple of cases that you may find usefull for your problem.
PHP variable to Javascript variable:
<?php $myvar=10; ?>
<script type="text/javascript">
jsvar = <?php echo $myvar; ?>;
document.write(jsvar); // Test to see if its prints 10:
</script>
Form variable to Javascript variable:
<form name="myform4"> <input type="hidden" name="formvar" value="100"> </form>
<script type="text/javascript">
jsvar = document.myform4.formvar.value;
document.write(jsvar) // test
</script>
PHP variable to Form variable:
<form name="myform4">
<input type="hidden" name="formvar" value="<?php $phpvar=10; echo $phpvar; ?>"> // PHP code inside HTML!!
</form>
Javascript variable to Form variable:
<form name="myform3">
<!-- It needn't be a "hidden" type, but anything from radio buttons to check boxes -->
<input type="hidden" name="formvar" value="">
</form>
<script type="text/javascript">
jsvar=10;
document.myform3.formvar.value = jsvar;
</script>
JavaScript:
You can solve this problem just with JS. To do so, you have to replace you action-Attribute in the form-Tag to action="#". To read more about the hashtag there, look up this link.
After that, you have to call a JS-Function when the Form gets submitted. YOu can do this with adding onSubmit="countCheckboxes()" to the <form>-Attribute. This means, that if the form gets submitted, this JS-Function gets executed. Now, you just have to create a new JS-Function called countCheckboxes(). There, you can count the selected checkboxes with this line:
alert(document.querySelectorAll('input[type="checkbox"]:checked').length);
Check now, if there is just one selected checkbox or more and set the value of the <input>.
Tip:
Get the value of the only checked checkbox, you have to restructure your HTML like this:
<label>
Step 1
<input type="checkbox" ... />
</label>
<label>
Step 2
...
And then get the (first and only) text in the label with the checked box like this:
document.querySelectorAll('input[type="checkbox"]:checked')[0].parentElement.textContent
jQuery:
To open and close your modal you should use JS. I recommend you to use the jQuery library (Check out this article to learn how to use jQuery in your JS). With that, you can simply open and close the modal with .fadeIn() and .fadeOut().
In fact, here we have another problem: Normally in jQuery, you can check if something got clicked with this code:
$("#idOfYouElement").click(function() {
// this code gets executed if the element got clicked
});
But in your case, the input is disabled and doesn't fire a clickevent and this results that the .click()-Function also doesn't get executed. To fix this, we place a <div> over the input, which is transparent so the users don't see it. Then we add the .click()-Function to this div and not the input. This would look like this:
HTML:
<form method="post" name="mainform" action="">
<label>TestLabel</label>
<input type="text" id="inpCheckboxes" name="test" placeholder="test" value="" disabled >
</form>
JavaScript:
$("#inpCheckboxes").click(function(){
$("#idOfYourModal").fadeIn();
});
After this, we have to close the modal after the submit-button got clicked. There are multiple solutions for that, for me, this one using .submit() is the cleanest:
$("#idOfYourForm").submit(function() {
$("#idOfyourModal").fadeOut(); // Since your Modal is also your Form, you could also use here $(this).fadeOut();
});
You also want to count all your checked checkboxes. You can combine this with your function above, since you want to count the checkboxes when the user hits 'submit'. The jQuery-way to count theboxes would be:
var l = $("input[type='checkbox']:checked").length;
With this value, you can now use a if else to set the value of your <input>-Field (remember to remove now the disabled-Attribute from it).
I've created a page in Wordpress and used this form as template. But when I submit the form it shows Error 404 page not found.
I've tried various scripts in php but I didnt get fruitful results. Hoping for the best answers. Thanks :)
Here is my coding
<?php
/*
template name: visit
*/
$servername= "localhost";
$username="root";
$password="";
$database="wp_chandan";
if(isset($_POST['name']) && isset($_POST['email']))
{
$name=$_POST['name'];
$email=$_POST['email'];
var_dump($email);
#mysql_connect($servername,$username,$password);
#mysql_select_db($database);
$query=mysql_query("insert into visitor_d (NAME,Email) values ('$name','$email') ");
} ?>
<html>
<head>
<?php get_header(); ?>
<style type='text/css'>
/* form elements */
form {
margin:100px;
padding: 10px 2px;
background: #F5F5F5;
width: 50%;
height:auto;
border:1px solid green;
}
input {
padding:2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
align:center;
}
input.button {
font: bold 12px Arial, Sans-serif;
height: 24px;
margin: 0;
align:center;
padding: 2px 3px;
color: #333;
background: #e7e6e6 url(MarketPlace-images/button.jpg) repeat-x;
border: 1px solid #dadada;
}
</style>
</head>
<form action="" method="POST">
<fieldset>
<legend><b><u>Visitor Details:</u></b></legend>
Name: <input type="text" name="name" placeholder="Fill Name" required><br><br>
Email: <input type="text" name="email" required placeholder="Enter Email"><br><br>
<input type="submit" name="submit"><br>
</fieldset>
</form>
<?php get_footer();?>
</html>
Make sure that you don't have any reserved WordPress terms in the name attributes in the fields of the form.
WordPress uses many of these reserved terms for it's internal rewriting and as a result if you using name attributes such as "name", it breaks the WordPress rewrite rules and causes this 404 Not Found page after submitting the form.
See more here: http://www.lost-in-code.com/platforms/wordpress/wordpress-404-not-found-when-submitting-form/
html5 doesn't like the empty action attribute, it does cause issues in some browsers. you have not selected a standard so i assume the browser will default to html5
<form action="#" method="POST">
Setting the action as # should work but one thing to watch out for is actions added before your page template is loaded, this can obviously grab the $_POST and redirects would be common so that may also be a reason.
also
Name: <input type="text" name="name" placeholder="Fill Name" required>
WP does not like when you call a field "name" it conflicts with something (i have forgotten the reason by now)
Name: <input type="text" name="aname" placeholder="Fill Name" required>