Shopify fully custom contact section block on home page

Tech Easy Solutions

Shopify fully custom contact section block on home page

<section class="contact-information" >

      <!--<div class="left-shape">

        <img src="images/left-shape.png" class="img-fluid">

      </div>-->

      <div class="container c-container">

        <div class="row">

          <div class="col-lg-6 col-md-6 col-sm-12 col-12">

            <div class=" contact-us">

                        {% form 'contact' %}

                      {% if form.posted_successfully? %}

                       <center> <p class="note form-success">

                          {{ 'contact.form.post_success' | t }}

                         </p></center>

                      {% endif %}

                      {{ form.errors | default_errors }}

              <form>

                <div class="form-group position-relative">

                           

                            <input type="text" class="form-control" id="ContactFormName" name="contact[name]" placeholder="{{ 'contact.form.name' | t }}" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" class="input-full">

                            </div>

                          <div class="form-group position-relative">

                            

                            <input type="tel" class="form-control" id="ContactFormPhone" name="contact[phone]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}" class="input-full">

                            </div>

                          <div class="form-group position-relative">

                            

                            <input type="email"  class="form-control" id="ContactFormEmail" name="contact[email]" placeholder="Email Address" autocorrect="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" class="input-full">

                            </div>

                            {%comment%}

                            <div class="form-group position-relative">

                            

                            <input

                              type="text"

                              id="ContactFormBirthday"

                              name="contact[Birthday]"

                              placeholder="Birthday"

                            />

                            </div>{%endcomment%}

                            <div class="form-group position-relative">

                            

                            <textarea id="ContactFormMessage"class="form-control" rows="3" name="contact[body]" placeholder="{{ 'contact.form.message' | t }}" class="input-full">{% if form.body %}{{ form.body }}{% endif %}</textarea>

                            </div>

                            <button type="submit" class="btn btn-submit">

                            SUBMIT

                        </button>

                            

              </form>

                        {% endform %}

            </div>

          </div>

          <div class="col-lg-3 col-md-3 col-sm-6 col-12">

            <div class="contact-information-right">

              <div class="contact-us-head">

                <h4>CONTACT INFORMATION</h4>

              </div>

              <div class="contact-info-us">

                <span>

                              <img src="{{ section.settings.adr_img | img_url: 'master' }}" class="img-fluid" alt="Address">   

                            </span>

                            <p>{{section.settings.adr_content}}</p>

              </div>

              <div class="contact-info-us">

                <span>

                               

                                <img src="{{ section.settings.phone_img | img_url: 'master' }}" class="img-fluid" alt="phone">  

                            </span>

                            <p>{{section.settings.ph_content}}</p>

              </div>

              <div class="contact-info-us">

                <span>

                                <img src="{{ section.settings.toll_free_img | img_url: 'master' }}" class="img-fluid" alt="phone">  

                            </span>

                                <p>{{section.settings.toll_content}}</p>

              </div>

            </div>

          </div>

          <div class="col-lg-3 col-md-3 col-sm-6 col-12">

            <div class="contact-us-head hour">

                <h4>{{section.settings.hour_title}}</h4>

              </div>

            <div class="contact-us-show-room">

                        {{section.settings.hour_content}}

              

            </div>

            <div class="contact-us-head connect">

                <h4>CONNECT WITH US</h4>

              </div>

              <div class="contact-social-icon">

                            {% if settings.social_facebook_link != blank %}

                

                  <a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">

                    <i class="fab fa-facebook-f" aria-hidden="true"></i>   

                  </a>

                

              {% endif %}

              {% if settings.social_twitter_link != blank %}

                

                  <a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">

                    <i class="fab fa-twitter" aria-hidden="true"></i>

                     

                  </a>

                

              {% endif %}

          

        </div>

          </div>

        </div>

      </div>

    </section>

{% schema %}

{

  "name": {

    "en": "Contact US Form"

  },

  "settings": [

    {

      "type": "image_picker",

      "id": "background_img",

      "label": {

        "en": "Background image"

      }

    },

    {

      "type": "text",

      "id": "contact_title",

      "default": "CONTACT INFORMATION",

      "label": {

        "en": "Title"

      }

    },

    {

      "type": "image_picker",

      "id": "adr_img",

      "label": {

        "en": "Address icon"

      }

    },

    {

      "type": "html",

      "id": "adr_content",

      "default": "<p>6161 Philips Highway<br>Jacksonville, FL 32216</p>",

      "label": {

        "en": "Content"

      }

    }

    ,

    {

      "type": "image_picker",

      "id": "phone_img",

      "label": {

        "en": "Phone icon"

      }

    },

    {

      "type": "html",

      "id": "ph_content",

      "default": "<p>904-731-3401<br>1-800-872-3401 (Toll Free)</p>",

      "label": {

        "en": "Phone Content"

      }

    }

    ,

    {

      "type": "image_picker",

      "id": "toll_free_img",

      "label": {

        "en": "Toll free icon"

      }

    },

    {

      "type": "html",

      "id": "toll_content",

      "default": "<p>1-888-340-3401</p>",

      "label": {

        "en": "Toll Content"

      }

    },

    {

      "type": "html",

      "id": "hour_title",

      "default": "SHOWROOM HOURS",

      "label": {

        "en": "Opning hours html"

      }

    },

    {

      "type": "html",

      "id": "hour_content",

      "default": "<p>Monday - Friday<span>8am - 5pm</span></p>",

      "label": {

        "en": "Opning hours html"

      }

    }

  ],

  "presets": [

    {

      "name": "Contact US form",

      "category": "Advanced"

    }

  ]

}

{% endschema %}

you need any help contact me