Save HTML Form Data To Text File Using PHP

Hello Programmers, let me welcome you to the Blog Desire. You may have an HTML form. And you might have tried to save it’s submitted data into a text file. So, today we are going to talk about, how to save your HTML form data into a text file!

If you have already created an HTML form then congrats, you are going like a pro. But if you haven’t built any yet, don’t worry, we’ll make one for you. First of all, we need to create a PHP file.

To run a PHP file on your computer, you need a local server. In this case, you will find several free software on the internet. For example, XAMPP and WAMP are two software, which will help you to build a local server on your computer. My personal recommendation is XAMPP software.

Creating an HTML Form

If you are a Windows user and installed xampp software, go to C:\xampp\htdocs and create a new folder there. You can set anything as the folder name or you can use my-form as the folder name. After creating the folder, you can open xampp software and start apache and MySQL. You can follow the image below.

If everything is fine, go to your newly created folder and create a file named index.php and add the following codes to it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>My HTML Form</title>
</head>
<body class="blogdesire-body">
  <div class="blogdesire-wrapper">
    <div class="blogdesire-heading">
      My HTML Form
    </div>
    <form class="blogdesire-form" method="post">
      <input type="text" name="username" placeholder="Uername" required autocomplete="off"> <br>
      <input type="password" name="password" placeholder="Password" required autocomplete="off"> <br>
      <input type="submit" name="submit" value="SAVE" class="blogdesire-submit">
    </form>
  </div>
</body>
</html>

After creating and saving the file, open your web browser and type http://locahost/my-form [your folder name]. If you did everything clearly, you should see a blank form. But if you found any problem, you should read the instruction again.

Add Style To Our Form

Now, create another file named style.css in the same folder and the following code. This will add some styles to our newly created form.

@import url('https://fonts.googleapis.com/css?family=Grenze&display=swap');
.blogdesire-body{
  background-image: linear-gradient(-20deg, #ff2846 0%, #6944ff 100%);
  background-repeat: no-repeat;
  min-height: 99vh;
   font-family: 'Grenze', serif;
}
.blogdesire-wrapper{
   padding: 20px;
   width: 100%;
   margin: auto;
   box-shadow: 0px 8px 60px -10px rgba(13, 28, 39, 0.6);
   background: #fff;
   border-radius: 12px;
   max-width: 700px;
   position: relative;
}
.blogdesire-heading{
  display: block;
  text-align: center;
  font-size: 30px;
  color: #6944ff;
}
.blogdesire-form{
 
}
.blogdesire-form input{
  width: 96%;
  border: 1px solid #6944ff;
  color: #6944ff;
  padding: 2%;
  border-radius: 20px;
  margin-top: 15px;
  font-family: 'Grenze', serif;
}
.blogdesire-form input:last-child{
  background: #6944ff;
  color: #fff;
  width: 20%;
}

Now save the style.css file and refresh the webpage, you should see a form like this.

See the Pen Awesome HTML Form by MD Khokon Mia (@memorable-moments) on CodePen.

Save Submitted Data

Alright guys, we have created our HTML form and added some awesome styles to it. It’s time to save all the submitted data through this form. To do this, add the following code to the beginning of our PHP file and save it again.

<?php
if(isset($_POST['submit'])){
$Name = "Username:".$_POST['username']."
";
$Pass = "Password:".$_POST['password']."
";
$file=fopen("saved.txt", "a");
fwrite($file, $Name);
fwrite($file, $Pass);
fclose($file);
}
?>

Refresh the webpage and input some data in your form. Now you will find a new text file named saved.txt in your newly created folder. If you open that saved.txt file, you will find all the submitted data saved in it.

So, this was all for the day guys. I hope you have found this article useful. If so, please bring me a smile by just sharing this article with your friends 🙂

Post Views: 10,785