The first way is the way to go. Inherit the corresponding website template and adapt it to your requirement. See the original code using the HTML/CSS website editor to learn the differences between mandatory and non-mandatory fields and look at the following example I have made to make the phone number mandatory and the company name not mandatory in the website contactus template. It may give the idea:

<odoo>
  <data>
    <template name= "tw Website Contact Private" id="tw_website_contactus_private.contactus_form" inherit_id="website_crm.contactus_form">
      <xpath expr="//div[label[@for='phone']]" position="replace">
        <div class="form-group form-field o_website_form_required_custom">
          <label class="col-md-3 col-sm-4 control-label" for="phone">Phone Number</label>
          <div class="col-md-7 col-sm-8">
            <input type="text" class="form-control o_website_form_input" name="phone" required="" t-att-value="request.params.get('phone', '')"/>
          </div>
        </div>
      </xpath>
      <xpath expr="//div[label[@for='partner_name']]" position="replace">
        <div class="form-group form-field">
          <label class="col-md-3 col-sm-4 control-label" for="partner_name">Your Company</label>
          <div class="col-md-7 col-sm-8">
            <input type="text" class="form-control o_website_form_input" name="partner_name" t-att-value="request.params.get('partner_name', '')"/>
          </div>
        </div>
      </xpath>
    </template>
  </data>
</odoo>

Make a simple module with that and adapt it to your requirement. In your case it might be enough to remove the label class "label-optional" , if not, this might also help: https://www.odoo.com/forum/help-1/question/custom-forms-in-website-builder-84171