Event Registration Form

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Event Registration Form </title> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"><link rel="stylesheet" href="./style.css"> </head> <body>  <!DOCTYPE html> <html> <head> <title>Event Registration Form.</title> <div id="event-registration"> <h1>iFiveK Registration</h1> <form id="event-registration-form" method="POST" action="">  <fieldset> <h3>Personal Information</h3> <label for="first-name">First Name</label> <input type="text" id="first-name" name="first-name" /> <label for="last-name">Last Name</label> <input type="text" id="last-name" name="last-name" /> <label for="email">Email</label> <input type="email" id="email" name="email" /> <label for="street">Street Address</label> <input type="text" id="street" name="street" /> <label for="unit">Unit</label> <input type="text" id="unit" name="unit" /> <label for="city">City</label> <input type="text" id="city" name="city" /> <label for="state">State</label> <select id="states"> <option>-- Choose your state --</option> </select> <label for="postal-code">Postal Code</label> <input type="text" id="postal-code" name="postal-code" /> </fieldset> <fieldset> <h3>Additional Information</h3> <label for="size">Shirt Size</label> <div> <input type="radio" name="size" value="xsmall">XS <input type="radio" name="size" value="small">S <input type="radio" name="size" value="medium">M <input type="radio" name="size" value="large">L <input type="radio" name="size" value="xlarge">XL <br/> <input type="checkbox" name="pickup"> I will be picking up my shirt on race day. </div> </fieldset> <button type="button">Submit Form</button> </div> </head> <body> </body> </html>  <script src="./script.js"></script> </body> </html>

body { font-family: "Raleway", sans-serif; background-color: #ff6655; } h1 { text-align: center; margin: 20px auto; } form { width: 70%; margin: auto; } fieldset { padding: 20px; border: 1px solid #ccc; border-radius: 10px; margin: 20px auto; box-shadow: 0 0 5px #333; background-color: #eee; } label { display: block; margin-bottom: 5px; } input[type="text"],input[type="email"],select{ width: calc(100% - 20px); height: 20px; padding: 5px; border-radius: 6px; border: 1px solid #ccc; margin-bottom: 10px; } button { width: 100%; text-align: center; margin: auto !important; height: 40px; border-radius: 10px; background-color: #eee; }

This is an example of an event registration form layout, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The form consists of input text fields to enter the member details, a dropdown list to select the state, radio buttons to select the size and the 'Submit' button. The JavaScript methods have been used to specify and load the list of available states for the users to select from. The font style has been imported to the code with its URL. The body of the form is given the styles of font-family as "Raleway", sans-serif, and background-color as #ff6655. The information container is given a border style of 1px solid #ccc, box-shadow style of 0 0 5px #333¸and a background color of #eee. The input text fields are given a border style of 1px solid #ccc. The 'Submit' button is given a height of 40px, and background color as #eee. Source: https://codepen.io/AniG2017/pen/xPRbwe

Event Registration Form

Post Comment or Questions Cancel reply

Several Related Snippets