Forms #2

In this example below you will see how to do a Forms #2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by davidaycock, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright davidaycock ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Forms #2</title>
  
  
  
  
  
</head>

<body>

  <h1>General Inquiry Form</h1>
<p>Please tell us a little bit about your company. Someone will be in touch with you shortly. </p>

<!--this is a div that contains all of the 5 inputs, first name, last name, company name, phone, and email-->
<div> <form>
  <p> First Name <br>
  <input type="text" name=firstname/>
  </p>
  <p> Last Name <br>
  <input type="text" name="lastname">
  </p>
  <p> Company Name <br>
  <input type="text" name=companyname/>
  </p>
  <fieldset> <legend>Personal Info</legend>
  <p> Phone <br>
  <input type="text" name=phone#/>
  </p>
  <p> Email <br>
  <input type="text" name=email/>
    </p> </fieldset> </form> </div>

<!--this form is both of the option forms below the personal info fieldset-->
<form> <p> <b>Options - Choose one</b> <br>
  <input type="radio" value = "firstoption"/> First option <br>
  <input type="radio" value = "secondoption"/> Second option <br>
  <input type="radio" value = "thirdoption"/> Third option
  </p>
  <p> <b>Check all that apply</b> <br>
  <input type="Checkbox" value = "yabba"/> Yabba <br>
  <input type="Checkbox" value = "dadda"/> Dabba <br>
  <input type="Checkbox" value = "jabba"/> Jabba 
  </p> </form>

<!--this is the form where they tell us how they know heard about us, it is not complete because I am currently thinking of the possible options-->
<form> 
  <p> How did you hear about us? <br>
    <select name="platform">
      <option value="">Please select one...</option>
      <option value=""></option>
      <option value=""></option>
    </select>  
  </p>
</form>

<!--this is the comment box where they write down anything they want-->
<form> <p> Comments
    <br>
  <textarea name="comments" cols="40" rows="8"></textarea> </form>  

<!--span tag of code for images-->
<span> <img src="http://www.financenewspro.com/wp-content/uploads/2016/05/small-business.jpg" width="200"> <img src="http://www.aurameir.com/wp-content/uploads/2016/08/Business_Incubation_Startup.jpg" width="200"> <img src="http://cdn.business2community.com/wp-content/uploads/2016/07/busines11.jpg"width="200" height="133"></span> <br>
   
<input type="submit" value="Submit">
  
  

</body>

</html>

Comments