modify a little

This commit is contained in:
2022-07-28 14:52:53 +03:00
parent 6a9a38cf6c
commit ff5e582e97
2 changed files with 57 additions and 19 deletions

View File

@ -15,20 +15,25 @@ description: Do you want to contact us?
{ description }
## Contact Form
<IconLock /> <b>Your IP will be logged for anti-abuse measures.</b>
<form action="https://segfautilities.projectsegfau.lt/api/form" method="POST">
<input type="text" name="email" class="FormTextbox" placeholder="Email" required="required"/>
<select id="commentType" name="commentType" required="required" class="button">
<option value="" selected="selected" disabled="disabled">Select a type of comment</option>
<option value="Feedback">Feedback</option>
<option value="Suggestion">Suggestion</option>
<option value="Question">Question</option>
<option value="Bug">Bug</option>
</select>
<br />
<textarea id="comment" name="message" rows="4" cols="50" required="required" class="FormTextbox">Your message.</textarea>
<div class="ip-note">
<IconLock />
<b>Your IP will be logged for anti-abuse measures.</b>
</div>
<div class="meta">
<input type="text" name="email" class="form-textbox" placeholder="Email" required="required"/>
<select id="commentType" name="commentType" required="required" class="button">
<option value="" selected="selected" disabled="disabled">Select a type of comment</option>
<option value="Feedback">Feedback</option>
<option value="Suggestion">Suggestion</option>
<option value="Question">Question</option>
<option value="Bug">Bug</option>
</select>
</div>
<textarea id="comment" name="message" rows="4" cols="25" required="required" class="form-textbox" placeholder="Your message"></textarea>
<HCaptcha
sitekey=67e84266-980c-4050-8a39-142a91928fe8
theme=dark
/>
<input type="submit" value="Submit" class="button" />
</form>
@ -44,16 +49,43 @@ _Please be aware that Microsoft often blocks non-popular emails, if you do conta
You can find ways to contact individual members [on our Members page](/members).
<style>
.FormTextbox {
form {
display: flex;
flex-direction: column;
gap: 1rem;
width: fit-content;
}
.ip-note {
display: flex;
align-items: center;
gap: 4px;
}
.meta {
display: flex;
align-items: center;
flex-direction: row;
gap: 1rem;
}
@media screen and (max-width: 450px) {
.meta {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
}
.form-textbox {
background-color: var(--tertiary);
color: var(--text);
border-radius: 10px;
border: none;
padding: 0.5rem;
margin-bottom: 5px;
font-family: 'Comfortaa', sans-serif;
}
.FormTextbox:focus {
.form-textbox:focus {
outline: none !important;
}
@ -68,14 +100,14 @@ You can find ways to contact individual members [on our Members page](/members).
text-decoration: none;
}
.button:hover {
.button:not(select):hover {
background-color: var(--accent-tertiary);
text-decoration: none;
transition: all 0.5s;
color: var(--secondary);
}
.button:active {
.button:not(select):active {
background-color: var(--accent-primary);
text-decoration: none;
transition: all 0.5s;