Hi,

How can I make the contact us form to work?

Regards,

Hi contact55297,

The form is only intended to show how the form fields look like in the theme. You are free to implement the contact form functionality the way you want it. You can use form plugins for the functionality and use the theme's CSS classes and id's.

An example is to use Magic Forms

1. Add jquery and framework extras on the scripts.htm since the theme don't include them and its used by magic forms.

   <script
   src="https://code.jquery.com/jquery-3.5.1.min.js"
   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
   crossorigin="anonymous"></script>
   {% framework extras %}

2. Add a generic ajax form component in the default.htm layout

3. Add the form in the contact.html partial. (the generic ajax form component must be on the layout)

   <form id="contact_form" class="w-full md:w-3/4" novalidate data-sal="slide-up" data-sal-easing="ease-in-cubic" data-sal-delay="100" data-request="{{ genericForm }}::onFormSubmit">
   
   {{ form_token() }}
   
   <div id="{{ genericForm }}_forms_flash"></div>
   
    <div class="input-group mb-2">
               <label for="name">Name</label>
               <input type="text" id="name" class="input" name="name">
           </div>
           <div class="input-group mb-2">
               <label for="email">Email</label>
               <input type="email" id="email" class="input" name="email">
           </div>
           <div class="input-group">
               <label for="message">Message</label>
               <textarea id="message" class="h-20" name="message"></textarea>
           </div>
           <button type="submit" class="btn btn--primary mt-8">Send</button>
   </form>

4. Since magic form has its own validation, you can remove the default form validation inside the assets/src/js/app.js and comment out validation. Recompile the code

You are free to use different form plugins, just use the themes classes to match the look.

Regards,