add contact form to accordion

This commit is contained in:
imohkay 2021-10-27 18:30:05 +05:30
parent 84c80ab632
commit 6e13ac13b2
2 changed files with 33 additions and 20 deletions

View file

@ -1,7 +1,7 @@
main > .contact {
.contact {
max-width: var(--container-lg-width);
margin: 0 auto;
padding: var(--spacing-2);
padding: var(--spacing) 0;
h1 {
font-size: 22px;
@ -26,8 +26,11 @@ main > .contact {
border: 0;
line-height: 1.3;
display: block;
max-width: 500px;
width: 100%;
@media screen and (min-width: 800px) {
width: 50%;
}
}
textarea {
@ -43,6 +46,8 @@ main > .contact {
font-weight: 700;
padding: var(--spacing) var(--spacing-2);
display: block;
background-size: 400% 100%;
animation: background_animation 60s ease-in-out infinite, text_animation 60s ease-in-out infinite;
}
}

View file

@ -128,6 +128,31 @@
</div>
</div>
</li>
<li>
<label for="bio-contact" class="accordion-title">
<h3>Contact 聯絡</h3>
<span class="accordion-caret animated-title"><span class="text">&#xe901;</span></span>
</label>
<input type="checkbox" id="bio-contact" class="accordion-checkbox">
<div class="accordion-content">
<div class="contact">
{% if submitted %}
Thanks for your message
{% else %}
<form method="post">
<label for="input-email">Your Email</label>
<input name="email" type="email" id="input-email" required>
<label for="input-msg">Message 訊息</label>
<textarea name="message" id="input-msg" required></textarea>
<input type="submit" value="Send Message 傳送訊息">
{% csrf_token %}
</form>
{% endif %}
</div>
</div>
</li>
</ul>
</div>
<br>
@ -137,23 +162,6 @@
<p>本計畫由國立臺灣美術館策劃文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。</p>
</div>
<div class="contact">
{% if submitted %}
Thanks for your message
{% else %}
<h1>Contact 聯絡</h1>
<form method="post">
<label for="input-email">Your Email</label>
<input name="email" type="email" id="input-email" required>
<label for="input-msg">Message 訊息</label>
<textarea name="message" id="input-msg" required></textarea>
<input type="submit" value="Send Message 傳送訊息">
{% csrf_token %}
</form>
{% endif %}
</div>
{% endblock %}
{% block end %}