Introduction
While this article is about applying to host a side event at TechCrunch Disrupt 2026, we can learn valuable skills about event planning and digital applications through this opportunity. In this tutorial, you'll learn how to create a simple web form that could be used for event applications. This is a beginner-friendly project that teaches you how to build basic HTML forms and understand the structure of online applications.
Prerequisites
To follow along with this tutorial, you'll need:
- A computer with internet access
- A simple text editor (like Notepad on Windows or TextEdit on Mac)
- Basic understanding of how websites work
- No programming experience required
Step-by-Step Instructions
Step 1: Create Your HTML File
We'll start by creating a basic HTML file that will serve as our event application form. HTML is the foundation of all websites - it's like the skeleton that holds everything together.
<!DOCTYPE html>
<html>
<head>
<title>TechCrunch Disrupt Side Event Application</title>
</head>
<body>
<h1>TechCrunch Disrupt 2026 Side Event Application</h1>
<p>Apply to host your side event in Silicon Valley</p>
</body>
</html>Why we do this: This creates the basic webpage structure. The <title> tag sets the browser tab title, and the <h1> tag creates a main heading for our application.
Step 2: Add the Application Form
Now we'll add a form where people can enter their information. Forms are how users submit data on websites.
<form action="#" method="post">
<h2>Event Information</h2>
<p><label for="eventname">Event Name:</label><br>
<input type="text" id="eventname" name="eventname" required></p>
<p><label for="description">Event Description:</label><br>
<textarea id="description" name="description" rows="4" cols="50" required></textarea></p>
<p><label for="date">Proposed Date:</label><br>
<input type="date" id="date" name="date" required></p>
<h2>Contact Information</h2>
<p><label for="name">Your Name:</label><br>
<input type="text" id="name" name="name" required></p>
<p><label for="email">Email Address:</label><br>
<input type="email" id="email" name="email" required></p>
<p><label for="company">Company/Organization:</label><br>
<input type="text" id="company" name="company"></p>
<p><input type="submit" value="Submit Application"></p>
</form>Why we do this: This creates a complete form with different input types. The 'required' attribute means users must fill in those fields before submitting. Textareas allow for longer text entries, while date inputs let users select dates easily.
Step 3: Add Some Basic Styling
Let's make our form look a bit better with some simple styling. We'll add CSS (Cascading Style Sheets) to make it more visually appealing.
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
.form-container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
max-width: 600px;
margin: 0 auto;
}
h1, h2 {
color: #333;
}
input[type="text"], input[type="email"], input[type="date"], textarea {
width: 100%;
padding: 8px;
margin: 5px 0 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>Why we do this: CSS makes our webpage look professional and user-friendly. It controls colors, fonts, spacing, and layout. The styling makes the form easier to use and more attractive.
Step 4: Complete Your HTML File
Let's put everything together in one complete HTML file:
<!DOCTYPE html>
<html>
<head>
<title>TechCrunch Disrupt Side Event Application</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
.form-container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
max-width: 600px;
margin: 0 auto;
}
h1, h2 {
color: #333;
}
input[type="text"], input[type="email"], input[type="date"], textarea {
width: 100%;
padding: 8px;
margin: 5px 0 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="form-container">
<h1>TechCrunch Disrupt 2026 Side Event Application</h1>
<p>Apply to host your side event in Silicon Valley</p>
<form action="#" method="post">
<h2>Event Information</h2>
<p><label for="eventname">Event Name:</label><br>
<input type="text" id="eventname" name="eventname" required></p>
<p><label for="description">Event Description:</label><br>
<textarea id="description" name="description" rows="4" cols="50" required></textarea></p>
<p><label for="date">Proposed Date:</label><br>
<input type="date" id="date" name="date" required></p>
<h2>Contact Information</h2>
<p><label for="name">Your Name:</label><br>
<input type="text" id="name" name="name" required></p>
<p><label for="email">Email Address:</label><br>
<input type="email" id="email" name="email" required></p>
<p><label for="company">Company/Organization:</label><br>
<input type="text" id="company" name="company"></p>
<p><input type="submit" value="Submit Application"></p>
</form>
</div>
</body>
</html>Why we do this: This combines everything we've learned into one working webpage. The div with class="form-container" creates a nice box around our form, and the styling makes everything look professional.
Step 5: Save and Test Your Form
Save your file with a .html extension (like event_application.html) and open it in your web browser. You should see a complete, styled form that looks professional.
Why we do this: Testing your work helps you see how it looks and works. It's important to test because you might find issues that need fixing before sharing with others.
Summary
In this tutorial, you've learned how to create a complete web form for event applications. You've built a form that includes:
- Event information fields
- Contact information fields
- Proper HTML structure
- Basic styling to make it look professional
This form could be used for any kind of event application, not just TechCrunch Disrupt. The skills you've learned - creating HTML forms, understanding input types, and basic styling - are fundamental skills that apply to many different web projects. Even though this is a simple form, it demonstrates the core concepts behind how online applications work, which is exactly what you'd need to understand for applying to events like TechCrunch Disrupt.
