www.tribute.co Open in urlscan Pro
2606:4700:3108::ac42:2add  Public Scan

Form analysis
2 forms found in the DOM

POST /start/

<form id="onboarding-start-form" novalidate="" action="/start/" method="POST">
  <input type="hidden" name="csrfmiddlewaretoken" value="PFUxvDUl4hiSamB74Hm5yfRwqIOwpEEMdka2SvIysgndRlEVGg2pKDFNLW5oz8LW">
  <input type="hidden" name="utm_campaign" value="end-of-year" id="id_utm_campaign">
  <input type="hidden" name="utm_source" value="iterable" id="id_utm_source">
  <input type="hidden" name="utm_medium" value="email" id="id_utm_medium">
  <input type="hidden" name="promo_code" id="id_promo_code">
  <input type="hidden" name="affiliate_id" id="id_affiliate_id">
  <input type="hidden" name="registry_id" id="id_registry_id">
  <input type="hidden" name="mode" id="id_mode">
  <input type="hidden" name="qr_shortcode" id="id_qr_shortcode">
  <input type="hidden" name="qr_activation_code" id="id_qr_activation_code">
  <input type="hidden" name="save_the_date" id="id_save_the_date">
  <div class="container mt-3 mt-md-4">
    <div class="pb-3 mb-3 step row justify-content-center mb-md-0 pb-md-0 border-bottom">
      <div class="my-2 col">
        <div class="border-0 shadow-sm card p-md-5 start-card first-card open">
          <div class="card-header start-card-header">
            <div class="row d-flex align-items-center">
              <div class="col-auto text-center col-md-1">
                <div class="start-card-step d-flex align-items-center justify-content-center rounded-circle fs-5"> 1 <i class="bi bi-check d-none"></i>
                </div>
              </div>
              <div class="col prompt text-dark"> Who is the Tribute for? </div>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-10 offset-md-1">
                <label for="id_recipients_name" class="form-label">Recipient's name</label>
                <input type="text" class="form-control form-control-lg" placeholder="Enter recipient's name" id="id_recipients_name" name="recipients_name" aria-describedby="id_recipients_name_validation" autofocus="" required=""
                  _="on keyup debounced at 500ms call validateRecipients()">
                <div id="id_recipients_name_validation" class="mt-2 invalid-feedback"> Recipient's name must have at least two characters </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pb-3 mb-3 step row justify-content-center mb-md-0 pb-md-0 border-bottom">
      <div class="my-2 col">
        <div class="border-0 shadow-sm card p-md-5 start-card second-card open">
          <div class="card-header start-card-header">
            <div class="row d-flex align-items-center">
              <div class="col-auto text-center col-md-1">
                <div class="start-card-step d-flex align-items-center justify-content-center rounded-circle fs-5"> 2 <i class="bi bi-check d-none"></i>
                </div>
              </div>
              <div class="col prompt text-dark"> What's the occasion? </div>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col col-md-10 offset-md-1" _=" init
                      -- Set initial value (if any) as active
                      set occasionValue to #id_tribute_type.value
                      if occasionValue is not empty
                        set selectedButton to first from <button.btn-occasion[type-value=`$occasionValue`]/>
                        add .active to selectedButton
                        set moreOccasions to closest .more-occasions to selectedButton
                        if moreOccasions is not empty
                          toggle .show on .more-occasions
                        end
                        if occasionValue == 0
                          call toggleOccasionInput(true)
                        end
                        validateRecipients()
                        validateOccasion()
                      end
                      
                    end
                  ">
                <input type="hidden" name="tribute_type" id="id_tribute_type">
                <div id="id_tribute_type_validation" class="invalid-feedback occasion-validation"> You need to pick an occasion </div>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="1" _="on click
                      call setActive(me, 1)
                    ">
                  <img src="/static/images/occasion_icons/Birthday.svg" alt="Birthday" class="me-1">
                  <span class="btn-occasion-text">Birthday</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="20" _="on click
                      call setActive(me, 20)
                    ">
                  <img src="/static/images/occasion_icons/Valentine's Day.svg" alt="Valentine's Day" class="me-1">
                  <span class="btn-occasion-text">Valentine's Day</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="11" _="on click
                      call setActive(me, 11)
                    ">
                  <img src="/static/images/occasion_icons/Workplace.svg" alt="Workplace" class="me-1">
                  <span class="btn-occasion-text">Workplace</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="14" _="on click
                      call setActive(me, 14)
                    ">
                  <img src="/static/images/occasion_icons/Graduation.svg" alt="Graduation" class="me-1">
                  <span class="btn-occasion-text">Graduation</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="2" _="on click
                      call setActive(me, 2)
                    ">
                  <img src="/static/images/occasion_icons/Wedding.svg" alt="Wedding" class="me-1">
                  <span class="btn-occasion-text">Wedding</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="3" _="on click
                      call setActive(me, 3)
                    ">
                  <img src="/static/images/occasion_icons/Anniversary.svg" alt="Anniversary" class="me-1">
                  <span class="btn-occasion-text">Anniversary</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="5" _="on click
                      call setActive(me, 5)
                    ">
                  <img src="/static/images/occasion_icons/Get Well Soon.svg" alt="Get Well Soon" class="me-1">
                  <span class="btn-occasion-text">Get Well Soon</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="26" _="on click
                      call setActive(me, 26)
                    ">
                  <img src="/static/images/occasion_icons/Thank You.svg" alt="Thank You" class="me-1">
                  <span class="btn-occasion-text">Thank You</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="9" _="on click
                      call setActive(me, 9)
                    ">
                  <img src="/static/images/occasion_icons/In Memory.svg" alt="In Memory" class="me-1">
                  <span class="btn-occasion-text">In Memory</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="21" _="on click
                      call setActive(me, 21)
                    ">
                  <img src="/static/images/occasion_icons/Love You.svg" alt="Love You" class="me-1">
                  <span class="btn-occasion-text">Love You</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="24" _="on click
                      call setActive(me, 24)
                    ">
                  <img src="/static/images/occasion_icons/Retirement.svg" alt="Retirement" class="me-1">
                  <span class="btn-occasion-text">Retirement</span>
                </button>
                <button type="button" class="p-2 bg-white rounded btn btn-occasion d-inline-flex align-items-center fs-7" type-value="0" _="on click
                      call setActive(me, 0)
                    ">
                  <img src="/static/images/occasion_icons/Custom.svg" alt="Custom" class="me-1">
                  <span class="btn-occasion-text">Custom</span>
                </button>
              </div>
            </div>
            <div class="mt-3 row more-occasions collapse show" data-bs-toggle="collapse" data-bs-target=".second-card .more-occasions">
              <div class="text-center col-12"> See more </div>
              <div class="text-center col-12">
                <i class="bi-chevron-down"></i>
              </div>
            </div>
            <div class="row more-occasions collapse">
              <div class="col col-md-10 offset-md-1">
                <button type="button" class="btn btn-occasion fs-7" type-value="4" _="on click
                      call setActive(me, 4)
                    ">
                  <span class="btn-occasion-text">Congrats</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="6" _="on click
                      call setActive(me, 6)
                    ">
                  <span class="btn-occasion-text">Military</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="7" _="on click
                      call setActive(me, 7)
                    ">
                  <span class="btn-occasion-text">Just Because</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="8" _="on click
                      call setActive(me, 8)
                    ">
                  <span class="btn-occasion-text">Religious</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="10" _="on click
                      call setActive(me, 10)
                    ">
                  <span class="btn-occasion-text">Moving</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="12" _="on click
                      call setActive(me, 12)
                    ">
                  <span class="btn-occasion-text">Baby Shower</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="13" _="on click
                      call setActive(me, 13)
                    ">
                  <span class="btn-occasion-text">New Baby</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="15" _="on click
                      call setActive(me, 15)
                    ">
                  <span class="btn-occasion-text">Holiday</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="16" _="on click
                      call setActive(me, 16)
                    ">
                  <span class="btn-occasion-text">Christmas</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="17" _="on click
                      call setActive(me, 17)
                    ">
                  <span class="btn-occasion-text">Hanukkah</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="18" _="on click
                      call setActive(me, 18)
                    ">
                  <span class="btn-occasion-text">New Years</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="19" _="on click
                      call setActive(me, 19)
                    ">
                  <span class="btn-occasion-text">Thanksgiving</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="22" _="on click
                      call setActive(me, 22)
                    ">
                  <span class="btn-occasion-text">Friendship</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="23" _="on click
                      call setActive(me, 23)
                    ">
                  <span class="btn-occasion-text">Miss You</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="25" _="on click
                      call setActive(me, 25)
                    ">
                  <span class="btn-occasion-text">Sympathy</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="27" _="on click
                      call setActive(me, 27)
                    ">
                  <span class="btn-occasion-text">Thinking of You</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="28" _="on click
                      call setActive(me, 28)
                    ">
                  <span class="btn-occasion-text">Mother's Day</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="29" _="on click
                      call setActive(me, 29)
                    ">
                  <span class="btn-occasion-text">Father's Day</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="30" _="on click
                      call setActive(me, 30)
                    ">
                  <span class="btn-occasion-text">Bar Mitzvah</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="31" _="on click
                      call setActive(me, 31)
                    ">
                  <span class="btn-occasion-text">Bat Mitzvah</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="32" _="on click
                      call setActive(me, 32)
                    ">
                  <span class="btn-occasion-text">Testimonial Collection</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="33" _="on click
                      call setActive(me, 33)
                    ">
                  <span class="btn-occasion-text">Dementia</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="34" _="on click
                      call setActive(me, 34)
                    ">
                  <span class="btn-occasion-text">Teacher Appreciation</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="35" _="on click
                      call setActive(me, 35)
                    ">
                  <span class="btn-occasion-text">Veteran</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="36" _="on click
                      call setActive(me, 36)
                    ">
                  <span class="btn-occasion-text">Active Duty Military</span>
                </button>
                <button type="button" class="btn btn-occasion fs-7" type-value="37" _="on click
                      call setActive(me, 37)
                    ">
                  <span class="btn-occasion-text">End of Life</span>
                </button>
              </div>
            </div>
            <div class="row more-occasions collapse" data-bs-toggle="collapse" data-bs-target=".second-card .more-occasions">
              <div class="text-center col-12">
                <i class="bi-chevron-up"></i>
              </div>
              <div class="text-center col-12"> See less </div>
            </div>
            <div class="mt-2 row collapse custom-type-input mt-md-3">
              <div class="col">
                <label for="id_custom_type" class="form-label">Custom occasion *</label>
                <input type="text" class="form-control form-control-lg" placeholder="Custom occasion *" id="id_custom_type" name="custom_type" aria-describedby="id_custom_type_validation" required="" _=" on click debounced at 1s call validateOccasion()
                      on keyup debounced at 500ms call validateOccasion()">
                <div id="id_custom_type_validation" class="invalid-feedback"> Custom occasion cannot be empty </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mb-3 step row justify-content-center mb-md-5">
      <div class="my-2 col">
        <div class="border-0 shadow-sm card p-md-5 start-card third-card open">
          <div class="card-header start-card-header">
            <div class="row d-flex align-items-center">
              <div class="col-auto text-center col-md-1">
                <div class="start-card-step d-flex align-items-center justify-content-center rounded-circle fs-5"> 3 <i class="bi bi-check d-none"></i>
                </div>
              </div>
              <div class="col prompt text-dark"> When's the deadline? </div>
              <p class="mb-0 d-none d-md-block w-75 offset-md-1">We recommend 3-5 days before the Tribute delivery so you have time to edit your video. </p>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col offset-md-1">
                <div class="card-datepicker gy-4">
                  <input type="hidden" name="tribe_submission_deadline" id="id_tribe_submission_deadline">
                  <div id="id_recipients_name_validation" class="invalid-feedback"> You must pick a deadline </div>
                  <div id="datepicker-container">
                    <div class="pika-single">
                      <div class="pika-lendar">
                        <div id="pika-title-uo" class="pika-title" role="heading" aria-live="assertive">
                          <div class="pika-label">February<select class="pika-select pika-select-month" tabindex="-1">
                              <option value="0" disabled="disabled">January</option>
                              <option value="1" selected="selected">February</option>
                              <option value="2">March</option>
                              <option value="3">April</option>
                              <option value="4">May</option>
                              <option value="5">June</option>
                              <option value="6">July</option>
                              <option value="7">August</option>
                              <option value="8">September</option>
                              <option value="9">October</option>
                              <option value="10">November</option>
                              <option value="11">December</option>
                            </select></div>
                          <div class="pika-label">2023<select class="pika-select pika-select-year" tabindex="-1">
                              <option value="2023" selected="selected">2023</option>
                              <option value="2024">2024</option>
                              <option value="2025">2025</option>
                              <option value="2026">2026</option>
                              <option value="2027">2027</option>
                              <option value="2028">2028</option>
                              <option value="2029">2029</option>
                              <option value="2030">2030</option>
                              <option value="2031">2031</option>
                              <option value="2032">2032</option>
                              <option value="2033">2033</option>
                            </select></div><button class="pika-prev is-disabled" type="button">Previous Month</button>
                        </div>
                        <table cellpadding="0" cellspacing="0" class="pika-table" role="grid" aria-labelledby="pika-title-uo">
                          <thead>
                            <tr>
                              <th scope="col"><abbr title="Sunday">Sun</abbr></th>
                              <th scope="col"><abbr title="Monday">Mon</abbr></th>
                              <th scope="col"><abbr title="Tuesday">Tue</abbr></th>
                              <th scope="col"><abbr title="Wednesday">Wed</abbr></th>
                              <th scope="col"><abbr title="Thursday">Thu</abbr></th>
                              <th scope="col"><abbr title="Friday">Fri</abbr></th>
                              <th scope="col"><abbr title="Saturday">Sat</abbr></th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr class="pika-row">
                              <td class="is-empty"></td>
                              <td class="is-empty"></td>
                              <td class="is-empty"></td>
                              <td data-day="1" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="1">1</button></td>
                              <td data-day="2" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="2">2</button></td>
                              <td data-day="3" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="3">3</button></td>
                              <td data-day="4" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="4">4</button></td>
                            </tr>
                            <tr class="pika-row">
                              <td data-day="5" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="5">5</button></td>
                              <td data-day="6" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="6">6</button></td>
                              <td data-day="7" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="7">7</button></td>
                              <td data-day="8" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="8">8</button></td>
                              <td data-day="9" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="9">9</button></td>
                              <td data-day="10" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="10">10</button></td>
                              <td data-day="11" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="11">11</button></td>
                            </tr>
                            <tr class="pika-row">
                              <td data-day="12" class="is-disabled" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="12">12</button></td>
                              <td data-day="13" class="is-today" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="13">13</button></td>
                              <td data-day="14" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="14">14</button></td>
                              <td data-day="15" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="15">15</button></td>
                              <td data-day="16" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="16">16</button></td>
                              <td data-day="17" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="17">17</button></td>
                              <td data-day="18" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="18">18</button></td>
                            </tr>
                            <tr class="pika-row">
                              <td data-day="19" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="19">19</button></td>
                              <td data-day="20" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="20">20</button></td>
                              <td data-day="21" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="21">21</button></td>
                              <td data-day="22" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="22">22</button></td>
                              <td data-day="23" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="23">23</button></td>
                              <td data-day="24" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="24">24</button></td>
                              <td data-day="25" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="25">25</button></td>
                            </tr>
                            <tr class="pika-row">
                              <td data-day="26" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="26">26</button></td>
                              <td data-day="27" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="27">27</button></td>
                              <td data-day="28" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="28">28</button></td>
                              <td class="is-empty"></td>
                              <td class="is-empty"></td>
                              <td class="is-empty"></td>
                              <td class="is-empty"></td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <div class="pika-lendar">
                        <div id="pika-title-bq" class="pika-title" role="heading" aria-live="assertive">
                          <div class="pika-label">March<select class="pika-select pika-select-month" tabindex="-1">
                              <option value="-1" disabled="disabled">January</option>
                              <option value="0">February</option>
                              <option value="1" selected="selected">March</option>
                              <option value="2">April</option>
                              <option value="3">May</option>
                              <option value="4">June</option>
                              <option value="5">July</option>
                              <option value="6">August</option>
                              <option value="7">September</option>
                              <option value="8">October</option>
                              <option value="9">November</option>
                              <option value="10">December</option>
                            </select></div>
                          <div class="pika-label">2023<select class="pika-select pika-select-year" tabindex="-1">
                              <option value="2023" selected="selected">2023</option>
                              <option value="2024">2024</option>
                              <option value="2025">2025</option>
                              <option value="2026">2026</option>
                              <option value="2027">2027</option>
                              <option value="2028">2028</option>
                              <option value="2029">2029</option>
                              <option value="2030">2030</option>
                              <option value="2031">2031</option>
                              <option value="2032">2032</option>
                              <option value="2033">2033</option>
                            </select></div><button class="pika-next" type="button">Next Month</button>
                        </div>
                        <table cellpadding="0" cellspacing="0" class="pika-table" role="grid" aria-labelledby="pika-title-bq">
                          <thead>
                            <tr>
                              <th scope="col"><abbr title="Sunday">Sun</abbr></th>
                              <th scope="col"><abbr title="Monday">Mon</abbr></th>
                              <th scope="col"><abbr title="Tuesday">Tue</abbr></th>
                              <th scope="col"><abbr title="Wednesday">Wed</abbr></th>
                              <th scope="col"><abbr title="Thursday">Thu</abbr></th>
                              <th scope="col"><abbr title="Friday">Fri</abbr></th>
                              <th scope="col"><abbr title="Saturday">Sat</abbr></th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr class="pika-row">
                              <td class="is-empty"></td>
                              <td class="is-empty"></td>
                              <td class="is-empty"></td>
                              <td data-day="1" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="1">1</button></td>
                              <td data-day="2" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="2">2</button></td>
                              <td data-day="3" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="3">3</button></td>
                              <td data-day="4" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="4">4</button></td>
                            </tr>
                            <tr class="pika-row">
                              <td data-day="5" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="5">5</button></td>
                              <td data-day="6" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="6">6</button></td>
                              <td data-day="7" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="7">7</button></td>
                              <td data-day="8" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="8">8</button></td>
                              <td data-day="9" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="9">9</button></td>
                              <td data-day="10" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="10">10</button></td>
                              <td data-day="11" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="11">11</button></td>
                            </tr>
                            <tr class="pika-row">
                              <td data-day="12" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="12">12</button></td>
                              <td data-day="13" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="13">13</button></td>
                              <td data-day="14" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="14">14</button></td>
                              <td data-day="15" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="15">15</button></td>
                              <td data-day="16" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="16">16</button></td>
                              <td data-day="17" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="17">17</button></td>
                              <td data-day="18" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="18">18</button></td>
                            </tr>
                            <tr class="pika-row">
                              <td data-day="19" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="19">19</button></td>
                              <td data-day="20" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="20">20</button></td>
                              <td data-day="21" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="21">21</button></td>
                              <td data-day="22" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="22">22</button></td>
                              <td data-day="23" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="23">23</button></td>
                              <td data-day="24" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="24">24</button></td>
                              <td data-day="25" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="25">25</button></td>
                            </tr>
                            <tr class="pika-row">
                              <td data-day="26" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="26">26</button></td>
                              <td data-day="27" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="27">27</button></td>
                              <td data-day="28" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="28">28</button></td>
                              <td data-day="29" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="29">29</button></td>
                              <td data-day="30" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="30">30</button></td>
                              <td data-day="31" class="" aria-selected="false"><button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="2" data-pika-day="31">31</button></td>
                              <td class="is-empty"></td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <a data-bs-toggle="modal" data-bs-target="#saveTheDateModal" role="button">
<div class="p-2 mx-2 mt-4 text-center alert alert-info not-ready text-dark fs-7" role="alert">
<strong class="fw-medium">Not ready yet?</strong> Plan ahead and get a friendly reminder.
</div>
</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="px-3 mb-5 text-center">
      <div class="account-form-error magic text-danger fs-6">
        <div class="mb-2">
        </div>
      </div>
      <button type="submit" class="px-5 py-3 btn btn-primary btn-lg btn-launch" id="launch"> Continue </button>
    </div>
  </div>
  <script lang="javascript">
    setDatePicker()
  </script>
</form>

POST /api/v2/savethedate/

<form id="saveTheDateForm" class="needs-validation" method="POST" action="/api/v2/savethedate/" novalidate="">
  <h1 class="h2">Save the Date!</h1>
  <p class="mb-4"> Let us remind you a few weeks before the occasion – plus, get a promo code to <strong class="text-dark fw-semibold">save 20%</strong> on your video. </p>
  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="recipientName" name="recipients_name" placeholder="Enter the reecipient's name" autocomplete="off" required="">
    <label for="recipientName">Who's the Tribute for?</label>
    <div class="invalid-feedback text-center"> Please enter the recipient's name </div>
  </div>
  <div class="row mb-3">
    <div class="col-md mb-3 mb-md-0">
      <div class="form-floating">
        <select class="form-select" id="occasion" name="occasion" aria-label="What's the occasion?">
          <option value="Birthday" selected="">🎂 Birthday</option>
          <option value="Graduation">🎓 Graduation</option>
          <option value="Teacher Appreciation">🍎 Teacher Appreciation</option>
          <option value="Mother's Day">🤰 Mother's Day</option>
          <option value="Father's Day">👨 Father's Day</option>
          <option value="Anniversary">❤️ Anniversary</option>
          <option value="Wedding">👰🏼 Wedding</option>
          <option value="Baby Shower">🍼 Baby Shower</option>
          <option value="Congrats">🥂 Congrats</option>
          <option value="Military">🎖️ Military</option>
          <option value="Workplace">👔 Workplace</option>
          <option value="Retirement">💼 Retirement</option>
        </select>
        <label for="occasion">What's the occasion?</label>
      </div>
    </div>
    <div class="col-md">
      <div class="form-floating">
        <input type="text" class="form-control datepicker-input" id="date" name="occasion_date" placeholder="MM/DD/YYYY" data-format="**/**/****" data-mask="MM/DD/YYYY" autocomplete="off" required="">
        <div class="datepicker datepicker-dropdown">
          <div class="datepicker-picker">
            <div class="datepicker-header">
              <div class="datepicker-title" style="display: none;"></div>
              <div class="datepicker-controls"><button type="button" class="btn prev-btn" disabled=""><i class="bi bi-arrow-left"></i></button><button type="button" class="btn view-switch">March 2023</button><button type="button"
                  class="btn next-btn"><i class="bi bi-arrow-right"></i></button></div>
            </div>
            <div class="datepicker-main">
              <div class="datepicker-view">
                <div class="days">
                  <div class="days-of-week" style="display: none;"><span class="dow">Su</span><span class="dow">Mo</span><span class="dow">Tu</span><span class="dow">We</span><span class="dow">Th</span><span class="dow">Fr</span><span
                      class="dow">Sa</span></div>
                  <div class="datepicker-grid"><span class="datepicker-cell day prev disabled" data-date="1677369600000">26</span><span class="datepicker-cell day prev disabled" data-date="1677456000000">27</span><span
                      class="datepicker-cell day prev disabled" data-date="1677542400000">28</span><span class="datepicker-cell day disabled" data-date="1677628800000">1</span><span class="datepicker-cell day disabled"
                      data-date="1677715200000">2</span><span class="datepicker-cell day disabled" data-date="1677801600000">3</span><span class="datepicker-cell day disabled" data-date="1677888000000">4</span><span
                      class="datepicker-cell day disabled" data-date="1677974400000">5</span><span class="datepicker-cell day focused" data-date="1678060800000">6</span><span class="datepicker-cell day" data-date="1678147200000">7</span><span
                      class="datepicker-cell day" data-date="1678233600000">8</span><span class="datepicker-cell day" data-date="1678320000000">9</span><span class="datepicker-cell day" data-date="1678406400000">10</span><span
                      class="datepicker-cell day" data-date="1678492800000">11</span><span class="datepicker-cell day" data-date="1678579200000">12</span><span class="datepicker-cell day" data-date="1678665600000">13</span><span
                      class="datepicker-cell day" data-date="1678752000000">14</span><span class="datepicker-cell day" data-date="1678838400000">15</span><span class="datepicker-cell day" data-date="1678924800000">16</span><span
                      class="datepicker-cell day" data-date="1679011200000">17</span><span class="datepicker-cell day" data-date="1679097600000">18</span><span class="datepicker-cell day" data-date="1679184000000">19</span><span
                      class="datepicker-cell day" data-date="1679270400000">20</span><span class="datepicker-cell day" data-date="1679356800000">21</span><span class="datepicker-cell day" data-date="1679443200000">22</span><span
                      class="datepicker-cell day" data-date="1679529600000">23</span><span class="datepicker-cell day" data-date="1679616000000">24</span><span class="datepicker-cell day" data-date="1679702400000">25</span><span
                      class="datepicker-cell day" data-date="1679788800000">26</span><span class="datepicker-cell day" data-date="1679875200000">27</span><span class="datepicker-cell day" data-date="1679961600000">28</span><span
                      class="datepicker-cell day" data-date="1680048000000">29</span><span class="datepicker-cell day" data-date="1680134400000">30</span><span class="datepicker-cell day" data-date="1680220800000">31</span><span
                      class="datepicker-cell day next" data-date="1680307200000">1</span><span class="datepicker-cell day next" data-date="1680393600000">2</span><span class="datepicker-cell day next" data-date="1680480000000">3</span><span
                      class="datepicker-cell day next" data-date="1680566400000">4</span><span class="datepicker-cell day next" data-date="1680652800000">5</span><span class="datepicker-cell day next" data-date="1680739200000">6</span><span
                      class="datepicker-cell day next" data-date="1680825600000">7</span><span class="datepicker-cell day next" data-date="1680912000000">8</span></div>
                </div>
              </div>
            </div>
            <div class="datepicker-footer">
              <div class="datepicker-controls"><button type="button" class="btn today-btn" disabled="" style="display: none;">Today</button><button type="button" class="btn clear-btn" style="display: none;">Clear</button></div>
            </div>
          </div>
        </div>
        <label for="date">When is it?</label>
        <div class="invalid-feedback text-center"> Please enter a date </div>
      </div>
    </div>
  </div>
  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="yourName" name="name" placeholder="Enter your name" required="">
    <label for="yourName">What's your name?</label>
    <div class="invalid-feedback text-center"> Please enter the your name </div>
  </div>
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="yourEmail" name="email" placeholder="Enter your email" required="">
    <label for="yourEmail">What's your email?</label>
    <div class="invalid-feedback text-center"> Please enter your email </div>
  </div>
  <div class="d-grid mt-3">
    <button type="submit" class="btn btn-primary btn-lg py-3 fw-medium"> Save the Date! </button>
    <div class="invalid-feedback server-error mt-2 fs-6 text-center"> Something went wrong. Please try again. </div>
  </div>
</form>

Text Content

START YOUR TRIBUTE IN 30 SECONDS

1
Who is the Tribute for?
Recipient's name
Recipient's name must have at least two characters
2
What's the occasion?
You need to pick an occasion
Birthday Valentine's Day Workplace Graduation Wedding Anniversary Get Well Soon
Thank You In Memory Love You Retirement Custom
See more

Congrats Military Just Because Religious Moving Baby Shower New Baby Holiday
Christmas Hanukkah New Years Thanksgiving Friendship Miss You Sympathy Thinking
of You Mother's Day Father's Day Bar Mitzvah Bat Mitzvah Testimonial Collection
Dementia Teacher Appreciation Veteran Active Duty Military End of Life
See less
Custom occasion *
Custom occasion cannot be empty
3
When's the deadline?

We recommend 3-5 days before the Tribute delivery so you have time to edit your
video.

You must pick a deadline
FebruaryJanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember
202320232024202520262027202820292030203120322033
Previous Month

SunMonTueWedThuFriSat12345678910111213141516171819202122232425262728

MarchJanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember
202320232024202520262027202820292030203120322033
Next Month

SunMonTueWedThuFriSat12345678910111213141516171819202122232425262728293031

Not ready yet? Plan ahead and get a friendly reminder.

Continue


SAVE THE DATE!

Let us remind you a few weeks before the occasion – plus, get a promo code to
save 20% on your video.

Who's the Tribute for?
Please enter the recipient's name
🎂 Birthday 🎓 Graduation 🍎 Teacher Appreciation 🤰 Mother's Day 👨 Father's
Day ❤️ Anniversary 👰🏼 Wedding 🍼 Baby Shower 🥂 Congrats 🎖️ Military 👔
Workplace 💼 Retirement What's the occasion?
March 2023
SuMoTuWeThFrSa
2627281234567891011121314151617181920212223242526272829303112345678
TodayClear
When is it?
Please enter a date
What's your name?
Please enter the your name
What's your email?
Please enter your email
Save the Date!
Something went wrong. Please try again.


NICELY DONE!

We’ll reach out before your occasion with a reminder to start your Tribute and
your promo code.