お問い合わせフォーム

<section
  id="contact-form-section-{{ section.id }}" 
  class="
    contact-form-section 
    {{ section.settings.bg_color }} 
    {{ section.settings.bg_gradient }}
    {{ section.settings.text_color }}
    {{ section.settings.border_top_width | prepend: 'border-top-' }}
    {{ section.settings.border_bottom_width | prepend: 'border-bottom-' }}
    {{ section.settings.border_color }} 
    {{ section.settings.pt | prepend: 'pt-' }} 
    {{ section.settings.pb | prepend: 'pb-' }}
  "
  style="
    --bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};
    --bs-border-opacity: {{ section.settings.border_opacity | append: '%' }};
  ">
  <div 
    class="container" 
    style="max-width: {{ section.settings.container_max_width }}px">
    <div class="row align-items-center">
      {% if section.settings.img != nil %}
        <div class="col-desktop-7 mb-6 mb-desktop-0">
          {% render 'image-url', img: section.settings.img, size: 900, orientation: section.settings.img_orientation, class: section.settings.img_border %}
        </div>
      {% endif %}
      <div class="{% if section.settings.img == nil %}col-desktop-18{% else %}col-desktop-11{% endif %}">
        {% render 'section-header' %}
        {% form 'contact' %}
          {% if form.posted_successfully? %}
            <p class="form-success alert alert-success mb-5" role="alert">
              {{ 'general.contact_form.success' | t }}
            </p>
          {% endif %}
          {{ form.errors | default_errors }}
          <div class="form-floating  mb-5">
            <input 
              id="contact-form-name"
              class="form-control" 
              type="text" 
              name="contact[name]"
              value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"  
              placeholder="{{ 'general.contact_form.name' | t }}"
              required>
            <label for="contact-form-name">
              {{ 'general.contact_form.name' | t }}
            </label>
          </div>
          <div class="form-floating  mb-5">
            <input 
              id="contact-form-email"
              class="form-control" 
              type="email" 
              name="contact[email]"
              value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"  
              placeholder="{{ 'general.contact_form.email' | t }}"
              spellcheck="false"
              autocapitalize="off"
              required>
            <label for="contact-form-email">
              {{ 'general.contact_form.email' | t }}
            </label>
          </div>
          <div class="form-floating  mb-5">
            <input 
              id="contact-form-phone"
              class="form-control" 
              type="tel" 
              name="contact[phone]"
              value="{{ customer.phone }}"  
              placeholder="{{ 'general.contact_form.phone' | t }}"
              pattern="[0-9\-]*"
              autocomplete="tel">
            <label for="contact-form-phone">
              {{ 'general.contact_form.phone' | t }}
            </label>
          </div>
          <div class="form-floating mb-5">
            <textarea
              id="contact-form-message"
              class="form-control"
              name="contact[message]"
              value="{{ customer.phone }}"  
              placeholder="{{ 'general.contact_form.message' | t }}"
              required
              style="height: 200px">
              {{- form.body -}}
            </textarea>
            <label for="contact-form-message">
              {{ 'general.contact_form.message' | t }}
            </label>
          </div>
          <button 
              type="submit" 
              class="btn btn-lg w-100 btn-primary">
              {{ 'general.contact_form.send' | t }}
          </button>
        {% endform %}
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Contact form",
  "settings": [
    {
      "type": "header",
      "content": "Styling"
    },
    {
      "type": "select",
      "id": "bg_color",
      "label": "Background color",
      "default": "bg-body",
      "options": [
        { "value": "bg-primary", "label": "Primary" },
        { "value": "bg-secondary", "label": "Secondary" },
        { "value": "bg-body", "label": "Body" },
        { "value": "bg-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "bg_opacity",
      "label": "Background opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "select",
      "id": "bg_gradient",
      "label": "Background gradient",
      "options": [
        { "value": "bg-gradient", "label": "Yes" },
        { "value": "", "label": "No" }
      ],
      "default": ""
    },
    {
      "type": "select",
      "id": "text_color",
      "label": "Text color",
      "default": "text-body",
      "options": [
        { "value": "text-primary", "label": "Primary" },
        { "value": "text-secondary", "label": "Secondary" },
        { "value": "text-body", "label": "Body" },
        { "value": "text-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "border_top_width",
      "label": "Border top width",
      "default": 0,
      "min": 0,
      "max": 16,
      "step": 1,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "border_bottom_width",
      "label": "Border bottom width",
      "default": 0,
      "min": 0,
      "max": 16,
      "step": 1,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "border_color",
      "label": "Border color",
      "default": "border-body",
      "options": [
        { "value": "border-primary", "label": "Primary" },
        { "value": "border-secondary", "label": "Secondary" },
        { "value": "border-body", "label": "Body" },
        { "value": "border-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "border_opacity",
      "label": "Border opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "text",
      "id": "container_max_width",
      "label": "Container max-width (px)",
      "info": "Leave empty to use the global container width"
    },
    {
      "type": "header",
      "content": "Header"
    },
    {
      "type": "text",
      "id": "header_title",
      "label": "Title",
      "default": "Contact form"
    },
    {
      "type": "select",
      "id": "header_title_font_size",
      "label": "Title font-size",
      "default": "h2",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "h4", "label": "H4" },
        { "value": "h5", "label": "H5" },
        { "value": "h6", "label": "H6" }
      ]
    },
    {
      "type": "richtext",
      "id": "header_description",
      "label": "Description (optional)",
      "default": "<p>Add on optional description for this section</p>"
    },
    {
      "type": "select",
      "id": "header_description_font_size",
      "label": "Description font-size",
      "default": "fs-md",
      "options": [
        { "value": "fs-sm", "label": "sm" },
        { "value": "fs-md", "label": "md" },
        { "value": "fs-lg", "label": "lg" },
        { "value": "fs-xl", "label": "xl" },
        { "value": "fs-xxl", "label": "xxl" }
      ]
    },
    {
      "type": "header",
      "content": "Image"
    },
    {
      "type": "image_picker",
      "id": "img",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "img_orientation",
      "label": "Image orientation",
      "default": "adapt",
      "options": [
        { "group": "Adapt", "value": "adapt", "label": "Adapt" },
        { "group": "Square", "value": "ratio-1x1", "label": "1x1" },
        { "group": "Horizontal", "value": "ratio-4x3", "label": "4x3" },
        { "group": "Horizontal", "value": "ratio-16x9", "label": "16x9" },
        { "group": "Horizontal", "value": "ratio-21x9", "label": "21x9" },
        { "group": "Vertical", "value": "ratio-3x4", "label": "3x4" },
        { "group": "Vertical", "value": "ratio-9x16", "label": "9x16" },
        { "group": "Vertical", "value": "ratio-9x21", "label": "9x21" }
      ]
    },
    {
      "type": "select",
      "id": "img_border",
      "label": "Image border",
      "default": "img-thumbnail",
      "options": [
        { "value": "", "label": "None" },
        { "value": "rounded",  "label": "Rounded" },
        { "value": "img-thumbnail", "label": "Thumbnail" }
      ]
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "pt",
      "label": "Top",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 10
    },
    {
      "type": "range",
      "id": "pb",
      "label": "Bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 10
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "presets": [
    {
      "name": "Contact form"
    }
  ]
}
{% endschema %}