Event Registration Form

Simple Event Registration Form with all the essential fields and field types, The Event Registration Form is a responsive form designed for single page event registration. You can make it fully working by simply adding formbold API endpoint then copy-paste on your website, you're done!
Live Preview ↗
<div class="formbold-main-wrapper">
  <!-- Author: FormBold Team -->
  <!-- Learn More: https://formbold.com -->
  <div class="formbold-form-wrapper">
    <div class="formbold-event-wrapper">
      <span>WEBINARS</span>
      <h3>The design leadership conference</h3>

      <svg width="490" height="215" viewBox="0 0 490 215" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect width="490" height="215" rx="5" fill="url(#pattern0)"/>
      <defs>
      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image0_1675_1746" transform="translate(0 -0.524787) scale(0.000379363 0.000864594)"/>
      </pattern>
         <img src="your-image-url-here.jpg">
<h4>What you’ll learn</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </p>

      <div class="formbold-event-details">
        <h5>Event Details</h5>

        <ul>
          <li>
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clip-path="url(#clip0_1675_1725)">
                <path
                  d="M12.75 2.25H15.75C15.9489 2.25 16.1397 2.32902 16.2803 2.46967C16.421 2.61032 16.5 2.80109 16.5 3V15C16.5 15.1989 16.421 15.3897 16.2803 15.5303C16.1397 15.671 15.9489 15.75 15.75 15.75H2.25C2.05109 15.75 1.86032 15.671 1.71967 15.5303C1.57902 15.3897 1.5 15.1989 1.5 15V3C1.5 2.80109 1.57902 2.61032 1.71967 2.46967C1.86032 2.32902 2.05109 2.25 2.25 2.25H5.25V0.75H6.75V2.25H11.25V0.75H12.75V2.25ZM11.25 3.75H6.75V5.25H5.25V3.75H3V6.75H15V3.75H12.75V5.25H11.25V3.75ZM15 8.25H3V14.25H15V8.25Z"
                  fill="#536387"
                />
              </g>
              <defs>
                <clipPath id="clip0_1675_1725">
                  <rect width="18" height="18" fill="white" />
                </clipPath>
              </defs>
            </svg>
            Jan 25, 2023
          </li>
          <li>
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clip-path="url(#clip0_1675_1735)">
                <path
                  d="M9 16.5C4.85775 16.5 1.5 13.1422 1.5 9C1.5 4.85775 4.85775 1.5 9 1.5C13.1422 1.5 16.5 4.85775 16.5 9C16.5 13.1422 13.1422 16.5 9 16.5ZM9 15C10.5913 15 12.1174 14.3679 13.2426 13.2426C14.3679 12.1174 15 10.5913 15 9C15 7.4087 14.3679 5.88258 13.2426 4.75736C12.1174 3.63214 10.5913 3 9 3C7.4087 3 5.88258 3.63214 4.75736 4.75736C3.63214 5.88258 3 7.4087 3 9C3 10.5913 3.63214 12.1174 4.75736 13.2426C5.88258 14.3679 7.4087 15 9 15ZM9.75 9H12.75V10.5H8.25V5.25H9.75V9Z"
                  fill="#536387"
                />
              </g>
              <defs>
                <clipPath id="clip0_1675_1735">
                  <rect width="18" height="18" fill="white" />
                </clipPath>
              </defs>
            </svg>
            10:30am - 2pm MDT
          </li>
          <li>
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clip-path="url(#clip0_1675_1730)">
                <path
                  d="M9 17.7959L4.227 13.0229C3.28301 12.0789 2.64014 10.8762 2.3797 9.56683C2.11925 8.25746 2.25293 6.90026 2.76382 5.66687C3.27472 4.43347 4.13988 3.37927 5.24991 2.63757C6.35994 1.89588 7.66498 1.5 9 1.5C10.335 1.5 11.6401 1.89588 12.7501 2.63757C13.8601 3.37927 14.7253 4.43347 15.2362 5.66687C15.7471 6.90026 15.8808 8.25746 15.6203 9.56683C15.3599 10.8762 14.717 12.0789 13.773 13.0229L9 17.7959ZM12.7125 11.9624C13.4467 11.2282 13.9466 10.2927 14.1492 9.27435C14.3517 8.25596 14.2477 7.20039 13.8503 6.24111C13.4529 5.28183 12.78 4.46192 11.9167 3.88507C11.0533 3.30821 10.0383 3.00032 9 3.00032C7.96167 3.00032 6.94666 3.30821 6.08332 3.88507C5.21997 4.46192 4.54706 5.28183 4.14969 6.24111C3.75231 7.20039 3.64831 8.25596 3.85084 9.27435C4.05337 10.2927 4.55333 11.2282 5.2875 11.9624L9 15.6749L12.7125 11.9624ZM9 9.74994C8.60218 9.74994 8.22065 9.5919 7.93934 9.3106C7.65804 9.02929 7.5 8.64776 7.5 8.24994C7.5 7.85212 7.65804 7.47058 7.93934 7.18928C8.22065 6.90798 8.60218 6.74994 9 6.74994C9.39783 6.74994 9.77936 6.90798 10.0607 7.18928C10.342 7.47058 10.5 7.85212 10.5 8.24994C10.5 8.64776 10.342 9.02929 10.0607 9.3106C9.77936 9.5919 9.39783 9.74994 9 9.74994Z"
                  fill="#536387"
                />
              </g>
              <defs>
                <clipPath id="clip0_1675_1730">
                  <rect width="18" height="18" fill="white" />
                </clipPath>
              </defs>
            </svg>
            New York, USA
          </li>
          <li>
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clip-path="url(#clip0_1675_1740)">
                <path
                  d="M8.17501 1.57422L15.5993 2.63547L16.6598 10.0605L9.76576 16.9545C9.62512 17.0951 9.43438 17.1741 9.23551 17.1741C9.03664 17.1741 8.84591 17.0951 8.70526 16.9545L1.28026 9.52947C1.13966 9.38882 1.06067 9.19809 1.06067 8.99922C1.06067 8.80035 1.13966 8.60962 1.28026 8.46897L8.17501 1.57422ZM8.70526 3.16572L2.87101 8.99922L9.23551 15.363L15.069 9.52947L14.274 3.96072L8.70526 3.16572ZM10.2953 7.93872C10.0139 7.65726 9.85587 7.27556 9.85594 6.87758C9.85598 6.68052 9.89482 6.4854 9.97027 6.30336C10.0457 6.12131 10.1563 5.95591 10.2956 5.81659C10.435 5.67728 10.6004 5.56678 10.7825 5.4914C10.9646 5.41602 11.1597 5.37724 11.3568 5.37728C11.7548 5.37735 12.1364 5.53551 12.4178 5.81697C12.6991 6.09843 12.8572 6.48013 12.8571 6.87811C12.857 7.27609 12.6988 7.65773 12.4174 7.93909C12.1359 8.22046 11.7542 8.37848 11.3562 8.37841C10.9583 8.37834 10.5766 8.22018 10.2953 7.93872Z"
                  fill="#536387"
                />
              </g>
              <defs>
                <clipPath id="clip0_1675_1740">
                  <rect width="18" height="18" fill="white" />
                </clipPath>
              </defs>
            </svg>
            Information & tech
          </li>
        </ul>
      </div>
    </div>

    <form action="https://formbold.com/s/FORM_ID" method="POST">
      <h2 class="formbold-form-title">Register now</h2>

      <div class="formbold-input-flex">
        <div>
          <label for="firstname" class="formbold-form-label">
            First name*
          </label>
          <input
            type="text"
            name="firstname"
            id="firstname"
            class="formbold-form-input"
          />
        </div>
        <div>
          <label for="lastname" class="formbold-form-label"> Last name* </label>
          <input
            type="text"
            name="lastname"
            id="lastname"
            class="formbold-form-input"
          />
        </div>
      </div>

      <div class="formbold-input-flex">
        <div>
          <label for="email" class="formbold-form-label"> Email* </label>
          <input
            type="email"
            name="email"
            id="email"
            class="formbold-form-input"
          />
        </div>
        <div>
          <label for="phone" class="formbold-form-label"> Phone number* </label>
          <input
            type="text"
            name="phone"
            id="phone"
            class="formbold-form-input"
          />
        </div>
      </div>

      <div class="formbold-input-flex">
        <div>
          <label for="jobtitle" class="formbold-form-label"> Job Title* </label>
          <input
            type="text"
            name="jobtitle"
            id="jobtitle"
            class="formbold-form-input"
          />
        </div>
        <div>
          <label for="company" class="formbold-form-label"> Company* </label>
          <input
            type="text"
            name="company"
            id="company"
            class="formbold-form-input"
          />
        </div>
      </div>

      <div class="formbold-input-flex">
        <div>
          <label for="state" class="formbold-form-label"> State* </label>
          <input
            type="text"
            name="state"
            id="state"
            class="formbold-form-input"
          />
        </div>
        <div>
          <label for="country" class="formbold-form-label"> Country* </label>
          <input
            type="text"
            name="country"
            id="country"
            class="formbold-form-input"
          />
        </div>
      </div>

      <div>
        <label for="postcode" class="formbold-form-label"> Post code* </label>
        <input
          type="text"
          name="postcode"
          id="postcode"
          class="formbold-form-input"
        />
      </div>

      <p class="formbold-policy">
        By filling out this form and clicking submit, you acknowledge our
        <a href="#">privacy policy.</a>
      </p>
      <button class="formbold-btn">Submit Event Registration</button>
    </form>
  </div>
</div>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    font-family: 'Inter', sans-serif;
  }
  .formbold-main-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
  }

  .formbold-form-wrapper {
    margin: 0 auto;
    max-width: 550px;
    width: 100%;
    background: white;
  }

  .formbold-event-wrapper span {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 2.5px;
    color: #6a64f1;
    display: inline-block;
    margin-bottom: 12px;
  }
  .formbold-event-wrapper h3 {
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    color: #07074d;
    width: 60%;
    margin-bottom: 15px;
  }
  .formbold-event-wrapper h4 {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #07074d;
    width: 60%;
    margin: 25px 0 15px;
  }
  .formbold-event-wrapper p {
    font-size: 16px;
    line-height: 24px;
    color: #536387;
  }

  .formbold-event-details {
    background: #fafafa;
    border: 1px solid #dde3ec;
    border-radius: 5px;
    margin: 25px 0 30px;
  }
  .formbold-event-details h5 {
    color: #07074d;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    padding: 15px 25px;
  }
  .formbold-event-details ul {
    border-top: 1px solid #edeef2;
    padding: 25px;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    row-gap: 14px;
  }
  .formbold-event-details ul li {
    color: #536387;
    font-size: 16px;
    line-height: 24px;
    width: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .formbold-form-title {
    color: #07074d;
    font-weight: 600;
    font-size: 28px;
    line-height: 35px;
    width: 60%;
    margin-bottom: 30px;
  }

  .formbold-input-flex {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
  }
  .formbold-input-flex > div {
    width: 50%;
  }
  .formbold-form-input {
    text-align: center;
    width: 100%;
    padding: 13px 22px;
    border-radius: 5px;
    border: 1px solid #dde3ec;
    background: #ffffff;
    font-weight: 500;
    font-size: 16px;
    color: #536387;
    outline: none;
    resize: none;
  }
  .formbold-form-input:focus {
    border-color: #6a64f1;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
  }
  .formbold-form-label {
    color: #536387;
    font-size: 14px;
    line-height: 24px;
    display: block;
    margin-bottom: 10px;
  }

  .formbold-policy {
    font-size: 14px;
    line-height: 24px;
    color: #536387;
    width: 70%;
    margin-top: 22px;
  }
  .formbold-policy a {
    color: #6a64f1;
  }
  .formbold-btn {
    text-align: center;
    width: 100%;
    font-size: 16px;
    border-radius: 5px;
    padding: 14px 25px;
    border: none;
    font-weight: 500;
    background-color: #6a64f1;
    color: white;
    cursor: pointer;
    margin-top: 25px;
  }
  .formbold-btn:hover {
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
  }
</style>