Jump to content


  • Content count

  • Joined

  • Last visited

  1. Hello i need help on the coding with the following contact form.. i like the overall appearance it looks cool but it takes the whole page it might help if it could be around 250px x 150 pix really half the width of the page preferably .. i don't want it to stretch to the whole width of the page. Really i want it to be aligned to the right of the page in the bottom corner in flex layout with out the field sets. i have tried some efforts on my own which is shown below but i just cant get it done properplly <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>My Example</title> <link rel="stylesheet" href="screen.css" media="screen"> <style media="screen"> body { background-color: #f0f0f0; font: 1em/1.5em verdana, arial, helvetica, sans-serif; color: #565656; text-align: right; } #contact-form { display: inline-block; padding: 1em; margin: 0.5em; border: 0.062em solid #ccc; border-radius: 0.75em; box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 ); background-color: #fff; text-align: left; } h1 { margin-top: 0; font-size: 1.25em; text-align: center; } fieldset { padding: 0.5em; margin: 0.25em 0; border: 0.062em solid #ccc; border-radius: 0.5em; background-color: #fefefe; } label { margin: 0 0.5em; } input, select, textarea { padding: 0.75em; border: 0.062em solid #ccc; border-radius: 0.25em; box-sizing: border-box; margin: 0.5em 0; } input[type=submit] { padding: 0.75em 1.25em; border: 0; border-radius: 0.25em; background-color: #4CAF50; color: #fff; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } </style> </head> <body> <form id="contact-form" action="#" method="post"> <h1>contact form</h1> <fieldset> <label for="name">Name: </label> <input id="name" type="text" name="First name" value="" placeholder="e.g mark" required> <label for="telephone">Telephone: </label> <input id="telephone" type="tel" name="telephone" value=""> </fieldset><fieldset> <label for="month">Birthday: </label> <select id="month" name="BirthMonth"> <option value="">Month</option> <option value="01">January</option> <option value="02">February</option> <option value="03">March</option> <option value="04">April</option> <option value="05">May</option> <option value="06">June</option> <option value="07">July</option> <option value="08">August</option> <option value="09">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <label for="day">Day: </label><input id="day" type="text" maxlength="2" name="BirthDay" placeholder="Day" required> <label for="year">Year: </label> <input id="year" type="text" maxlength="4" name="BirthYear" placeholder="Year" required> </fieldset><fieldset> <label for="gender">Gender: </label> <select id="gender" name="gender"> <option value="select">i am..</option> <option value="m">Male</option> <option value="f">Female</option> <option value="others">Other</option> </select> </fieldset><fieldset> <label for="city">City:</label> <select id="city" name="city"> <option value="sydney">Sydney</option> <option value="melbourne">Melbourne</option> <option value="cromwell">Cromwell</option> </select> </fieldset><fieldset> <label for="user-pwd">Password:</label> <input id="user-pwd" type="password" name="user-password"> <label for="email">Email: </label> <input id="email" type="email" name="email" value="" placeholder="kaygenesis@genesis.com" required> </fieldset><fieldset> <input type="submit" value="submit"> </fieldset> </form> </body> </html>