This commit is contained in:
parent
8ffa4e3eb8
commit
6f01a9da9c
@ -1,63 +0,0 @@
|
|||||||
.contact-form {
|
|
||||||
background: linear-gradient(to bottom right, #F9B208, #E72E77); /* Gradient background */
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
max-width: 500px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 15px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.form-field {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.form-field label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
.form-field input,
|
|
||||||
.form-field textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
border: 2px solid #ddd;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 15px;
|
|
||||||
background-color: white; /* Field background */
|
|
||||||
color: black; /* Text color */
|
|
||||||
transition: border-color 0.3s;
|
|
||||||
}
|
|
||||||
.form-field input:focus,
|
|
||||||
.form-field textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #E72E77; /* Pink focus */
|
|
||||||
}
|
|
||||||
.form-field textarea {
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
.submit-button {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
background-color: #28a745; /* Green button color */
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px; /* Rounded corners */
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold; /* Bold text */
|
|
||||||
text-transform: uppercase; /* Full caps */
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
}
|
|
||||||
.submit-button:disabled {
|
|
||||||
background-color: #ddd;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.submit-button:hover:not(:disabled) {
|
|
||||||
background-color: #218838; /* Darker green on hover */
|
|
||||||
}
|
|
@ -95,7 +95,7 @@
|
|||||||
},
|
},
|
||||||
"site_background_color": {
|
"site_background_color": {
|
||||||
"type": "color",
|
"type": "color",
|
||||||
"default": "#ffffff"
|
"default": "linear-gradient(to bottom right, #F9B208, #E72E77)"
|
||||||
},
|
},
|
||||||
"header_and_footer_color": {
|
"header_and_footer_color": {
|
||||||
"type": "select",
|
"type": "select",
|
||||||
|
@ -1,35 +0,0 @@
|
|||||||
<link rel="stylesheet" href="{{asset "css/contact.css"}}">
|
|
||||||
|
|
||||||
{{#is "page" url="https://anydev.info/contact/"}}
|
|
||||||
|
|
||||||
<div class="contact-form">
|
|
||||||
<form action="mailto:anydev.anyway@gmail.com" method="post" enctype="text/plain" id="contactForm">
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="name">Name:</label>
|
|
||||||
<input type="text" id="name" name="name" placeholder="Your name" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="email">Email:</label>
|
|
||||||
<input type="email" id="email" name="email" placeholder="Your email" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="message">Message:</label>
|
|
||||||
<textarea id="message" name="message" placeholder="Your message" required></textarea>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="submit-button" id="submitBtn" disabled>Send Message</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const form = document.getElementById('contactForm');
|
|
||||||
const submitBtn = document.getElementById('submitBtn');
|
|
||||||
|
|
||||||
form.addEventListener('input', () => {
|
|
||||||
const isFormFilled = form.name.value && form.email.value && form.message.value;
|
|
||||||
submitBtn.disabled = !isFormFilled;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{{/is}}
|
|
Loading…
x
Reference in New Issue
Block a user