theme-elegance/modules/contactform/views/templates/widget/contactform.tpl

{**
 * 2007-2019 PrestaShop and Contributors
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2019 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
<section class="mx-auto max-w-6xl">
  <form class="w-full flex flex-col gap-4" action="{$urls.pages.contact}" method="post" {if $contact.allow_file_upload}enctype="multipart/form-data"{/if}>
    {if !$notifications || $notifications.nw_error}
      <div class="form-group row">
        <div class="col-md-9 col-md-offset-3">
          <h3 class="text-xl font-medium">{l s='Contact us' d='Shop.Theme.Global'}</h3>
        </div>
      </div>
      <section class="form-fields w-full flex max-md:flex-col flex-wrap">
        <div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
          <label class="col-md-3 font-medium">{l s='Subject' d='Shop.Forms.Labels'}</label>
            <select name="id_contact" class="dropdown-toggle relative py-1 px-4 pr-8 w-full leading-1 border border-gray-300 text-left">
              {foreach from=$contact.contacts item=contact_elt}
                <option value="{$contact_elt.id_contact}">{$contact_elt.name}</option>
              {/foreach}
            </select>
        </div>

        <div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
          <label class="col-md-3 font-medium">{l s='Email address' d='Shop.Forms.Labels'}</label>
            <input
              class="form-control px-4 py-1 border border-gray-300 w-full"
              name="from"
              type="email"
              value="{$contact.email}"
              placeholder="{l s='your@email.com' d='Shop.Forms.Help'}"
            >
        </div>

        {if $contact.orders}
          <div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
            <label class="col-md-3 font-medium">
            {l s='Order reference' d='Shop.Forms.Labels'}

              <i class="text-xs font-light">
                {l s='( optional )' d='Shop.Forms.Help'}
              </i>
            </label>
            <div class="flex flex-col">
              <select name="id_order" class="dropdown-toggle relative w-full py-1 px-4 pr-8 leading-1 border border-gray-300 text-left">
                <option value="">{l s='Select reference' d='Shop.Forms.Help'}</option>
                {foreach from=$contact.orders item=order}
                  <option value="{$order.id_order}">{$order.reference}</option>
                {/foreach}
              </select>
            </div>
          </div>
        {/if}

        <div class="form-group flex flex-col gap-2 w-full md:w-1/2 px-2 my-2">
          <label class="col-md-3 font-medium">{l s='Message' d='Shop.Forms.Labels'}</label>
          <div class="col-md-9">
            <textarea
              class="form-control px-4 py-1 border border-gray-300 w-full"
              name="message"
              placeholder="{l s='How can we help?' d='Shop.Forms.Help'}"
              rows="1"
            >{if $contact.message}{$contact.message}{/if}</textarea>
          </div>
        </div>


        {if $contact.allow_file_upload}
          <div class="form-group flex flex-col gap-2 px-2 my-2 w-full md:w-1/2">
            <label class="col-md-3 font-medium">{l s='Attachment' d='Shop.Forms.Labels'}
              <i class="text-xs font-light">
                {l s='( optional )' d='Shop.Forms.Help'}
              </i>
            </label>
            <div class="flex flex-col w-full">
              <input type="file" name="fileUpload"
              class="form-control text-sm text-blue-950
                    border border-gray-300 w-full
                    file:mr-4 file:py-1.5 file:px-4
                    file:rounded-full file:border-0
                    file:text-sm file:font-semibold
                    file:bg-transparent file:text-blue-950
                    hover:file:text-blue-900"
              data-buttonText="{l s='Choose file' d='Shop.Theme.Actions'}">
            </div>
          </div>
        {/if}

        {if isset($id_module)}
          <div class="form-group row">
            <div class="offset-md-3">
              {hook h='displayGDPRConsent' id_module=$id_module}
            </div>
          </div>
        {/if}

      {hook h='displayPaCaptcha' posTo='contact'}</section>

      <footer class="form-footer text-sm-right">
        <style>
          input[name=url] {
            display: none !important;
          }
        </style>
        <input type="text" name="url" value=""/>
        <input type="hidden" name="token" value="{$token}" />
        <input class="uppercase font-medium py-2 text-center w-full bg-blue-950 hover:bg-blue-900 text-gray-50" type="submit" name="submitMessage" value="{l s='Send' d='Shop.Theme.Actions'}">
      </footer>
      {else}
      <div class="flex w-full justify-center font-semibold text-center">
        {l s='Thank You for contacting us, we will get back to you shortly.' d='Shop.Theme.Global'}
      </div>
    {/if}
  </form>
</section>