Contact Us form in collapsable content

[Gazza1234]

Hi All

I need to know how to add a contact us form in the 'collapsable content' section on my site.

im looking to achieve something like this.

Any help would be great.

[comercioservice]

You can either create a new section or modify an existing one (like collapsible-content.liquid). liquid Copied Edit

<!-- sections/collapsible-contact-form.liquid -->

<div class="collapsible-wrapper">
  <button class="collapsible-toggle" onclick="this.nextElementSibling.classList.toggle('active')">
    Ask a Question
  </button>

  <div class="collapsible-content">
    <form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form">
      <input type="hidden" name="form_type" value="contact" />
      <input type="hidden" name="utf8" value="✓" />

      <div class="field-group">
        <label for="ContactFormName">Name</label>
        <input type="text" id="ContactFormName" name="contact[name]" required>
      </div>

      <div class="field-group">
        <label for="ContactFormEmail">Email</label>
        <input type="email" id="ContactFormEmail" name="contact[email]" required>
      </div>

      <div class="field-group">
        <label for="ContactFormMessage">Message</label>
        <textarea id="ContactFormMessage" name="contact[body]" rows="5" required></textarea>
      </div>

      <button type="submit" class="btn btn--primary">Send</button>
    </form>
  </div>
</div>

<style>
.collapsible-wrapper {
  margin-bottom: 20px;
}
.collapsible-toggle {
  background: none;
  border: none;
  font-weight: bold;
  cursor: pointer;
  padding: 10px 0;
}
.collapsible-content {
  display: none;
  padding-top: 10px;
}
.collapsible-content.active {
  display: block;
}
.field-group {
  margin-bottom: 15px;
}
.btn--primary {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
}
</style>

In a template file or page, include the section: liquid Copy Edit 
{% section 'collapsible-contact-form' %}

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

Thank you

[Gazza1234]

hi

Thanks for the reply - I have located the collapsible-content.liquid where do I add that code that you supplied.

I have some knowledge but don't wish to mess it up

thanks

G

[Gazza1234]

I went for the option of creating a new .liquid form and called it - collapsible-contact-form.liquid of which I added the code you supplied.

I have found this in my .JSON template but where do I add the code {% section 'collapsible-contact-form' %}

},
"collapsible_tab_pcWQxK": {
"type": "collapsible_tab",
"settings": {
"heading": "Have a Question ?",
"icon": "none",
"content": "",
"page": "contact"
}

thanks

G

[Gazza1234]

hi 

any chance you can help me with this as im not sure what I need to do 

thanks

G