xpde Posted March 6, 2018 Share Posted March 6, 2018 Basic Form Design ~ This is just a general design by yours truly. I hope you guys enjoy it ~ ~ Instructions ~ Copy the code stated below Create a PHP document (Preferably signup.php) Paste the code to the document Upload to your MOFH Website via FTP ta-da, nice looking signup page ~ Here's the code for the page ~ Spoiler <?php // Should Edit $domain = "example.com"; // Shouldn't Edit $randInt = md5(rand(6000,PHP_INT_MAX)); ?> <!DOCTYPE html> <html> <head> <title><?php echo $domain; ?> // Signup</title> <style> @import url('https://fonts.googleapis.com/css?family=Roboto:300,400'); *{font-family:'Roboto';color:#343434}body{margin:0}h1{margin-top:0;margin-bottom:20px;font-weight:300;text-align:center}.btn{padding:10px 15px;font-family:'Roboto';font-size:10pt;background:#6DBED6;color:white;width:100%;box-sizing:border-box;text-transform:uppercase;transition:background 1s ease-out;border:none}.btn:hover{background:#569DB3;color:white}.form-input{padding:10px;width:100%;box-sizing:border-box;font-size:10pt;border:1px solid #e4e4e4;outline:none;margin-top:3px;margin-bottom:3px}.form-input:hover,.form-input:focus{border:1px solid #000;border-image:linear-gradient(to right,#6DBED6 0%,#6DAD72 100%);border-image-slice:1}select{padding:5px 8px;width:130%;border:1px solid #e4e4e4;border-radius:0;box-shadow:none;cursor:pointer;background:transparent;background-image:none;-webkit-appearance:none}.container{display:flex;align-items:center;justify-content:center;background:linear-gradient(to right,#8C7699 0%,#718FB0 100%);width:100%;height:100vh}.security-container{background:#eee;display:flex;justify-content:space-evenly;width:100%;box-sizing:border-box;padding:10px;margin-top:3px;margin-bottom:3px}.signupForm{border-top:10px solid #000;border-image:linear-gradient(to right,#6DBED6 0%,#6DAD72 100%);border-image-slice:1;width:500px;background:white;height:auto;padding:15px;-webkit-box-shadow:0 0 40px 2px rgba(80,80,80,.3);-moz-box-shadow:0 0 40px 2px rgba(80,80,80,.3);box-shadow:0 0 40px 2px rgba(80,80,80,.3)}.securityImage{background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),url(https://order.<?php echo $domain;?>/image.php?id=<?PHP echo $randInt;?>);background-position:center center;background-repeat:no-repeat;background-size:cover;width:183px;height:40px;margin:0 auto}.securityImage:hover{background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0)),url(https://order.<?php echo $domain;?>/image.php?id=<?PHP echo $randInt;?>);background-position:center center;background-repeat:no-repeat;background-size:cover;width:183px;height:40px;margin:0 auto} </style> <script> function ismaxlength(obj) { var mlength = obj.getAttribute ? parseInt(obj.getAttribute("maxlength")) : "" if (obj.getAttribute && obj.value.length > mlength) obj.value = obj.value.substring(0, mlength) } </script> </head> <body> <div class="container"> <div class="signupForm"> <form id="updatedetails" name="updatedetails" class="signup" method="post" action="https://order.<?php echo $domain; ?>/register2.php"> <h1>Form Name</h1> <input class="form-input" type="text" name="username" placeholder="Sub-domain" maxlength="16" onkeyup="return ismaxlength(this)"> <input class="form-input" type="password" name="password" placeholder="Password" maxlength="20" onkeyup="return ismaxlength(this)"> <input class="form-input" type="email" name="email" size="30" placeholder="E-mail"> <select class="form-input" name="website_category"> <option disabled selected>What's the site's category?</option> <option>Personal</option> <option>Business</option> <option>Hobby</option> <option>Forum</option> <option>Adult</option> <option>Dating</option> <option>Software / Download</option> </select> <select class="form-input" name="website_language"> <option disabled selected>What's the site's language?</option> <option>English</option> <option>Non-English</option> </select> <div class="security-container"> <input type="hidden" name="id" value="<?PHP echo $randInt; ?>"> <div class="securityImage" style="margin-top: 3px"></div> <input class="form-input" type="text" name="number" placeholder="Enter the security code!"> </div> <button type="submit" class="btn">Submit</button> </form> </div> </div> </body> </html> you're welcome Quote Link to comment Share on other sites More sharing options...
xpde Posted March 6, 2018 Author Share Posted March 6, 2018 10 hours ago, PlanetCloud said: Nice! But what does this actually do? <script> function ismaxlength(obj) { var mlength = obj.getAttribute ? parseInt(obj.getAttribute("maxlength")) : "" if (obj.getAttribute && obj.value.length > mlength) obj.value = obj.value.substring(0, mlength) } </script> I sawed this a lot but since Im not a JS developer, I dont get this... Also there should be $title.. instead of using using test.com // Signup, it's better to use Your Hosting Name // Signup or Your Hosting Name - Signup (In my opinion).. Btw, Nice design For the JS question(used in default mofh signup.php) thats so users cant type anymore than default max input. For the variable statement *$title* - No, I once again disagree and find that to be useless due to the fact that you can modify the title to whatever you want it to be, takes under 30 seconds. No need for useless variables. This is just a design. And thanks for the compliment. Quote Link to comment Share on other sites More sharing options...
xpde Posted March 7, 2018 Author Share Posted March 7, 2018 52 minutes ago, PlanetCloud said: Alright, but on HTML5 there's input attribute that allows you to limit the form characther which can be founded here : https://www.w3schools.com/tags/att_input_maxlength.asp And I noticed you had implemented it too, why does the JS included there if the limit is applied? I don't you understood my previous statement.. You can still type beyond the maxlength before submit. The JavaScript snippet prevents this. Quote Link to comment Share on other sites More sharing options...
xpde Posted March 8, 2018 Author Share Posted March 8, 2018 On 3/6/2018 at 9:38 PM, PlanetCloud said: Owh, alright, thank you for this information No problemo, comerade. Quote Link to comment Share on other sites More sharing options...
Emad Ahmed Posted April 9, 2018 Share Posted April 9, 2018 Thanks in advance for this work Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.