https://github.com/twinklebyte/contact-form
Contact form created using CSS Grid
https://github.com/twinklebyte/contact-form
Last synced: 6 months ago
JSON representation
Contact form created using CSS Grid
- Host: GitHub
- URL: https://github.com/twinklebyte/contact-form
- Owner: TwinkleByte
- Created: 2024-05-23T08:26:43.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-23T19:13:55.000Z (over 1 year ago)
- Last Synced: 2025-05-31T09:43:01.098Z (about 1 year ago)
- Language: HTML
- Homepage:
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Contact form solution
This is a solution to the [Contact form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/contact-form--G-hYlqKJj). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
**Note: Delete this note and update the table of contents based on what sections you keep.**
## Overview
### The challenge
Users should be able to:
- Complete the form and see a success toast message upon successful submission
- Receive form validation messages if:
- A required field has been missed
- The email address is not formatted correctly
- Complete the form only using their keyboard
- Have inputs, error messages, and the success message announced on their screen reader
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
### Screenshot
### Links
- Solution URL: [Solution](https://github.com/TwinkleByte/Contact-form)
- Live Site URL: [Live Site](https://twinklebyte.github.io/Contact-form/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Javascript
- Mobile-first workflow
### What I learned
I learned Javascript, text area css element and Input css element.
To see how you can add code snippets, see below:
```html
```
```css
#message-input-id {
font-size: 1rem;
line-height: 25px;
word-spacing: 3px;
width: 656px;
height: 100px;
border: solid 1px var(--t5);
border-radius: 10px;
outline: none;
padding: 14px 12px 4px 24px;
resize: none;
box-sizing: border-box;
transition: all 0.35s;
}
input[type=text] {
border: solid 1px var(--t5);
border-radius: 10px;
outline: none;
padding: 0px 15px 0px 15px;
box-sizing: border-box;
transition: all 0.35s;
}
input[type=text]:hover, input[type=text]:focus {
border: solid 1px var(--button-color);
}
input[type=text]::placeholder {
color: black;
font-size: 20px;
opacity: 1; /* Firefox */
}
```
```js
var checkbox = document.getElementById("check-box");
var checkicon = document.getElementById("check-icon");
const checkedicon = '';
const uncheckedicon = '';
var isChecked = false;
checkbox.onclick = function() {
isChecked = !isChecked;
if (isChecked) {
checkicon.innerHTML = checkedicon;
} else {
checkicon.innerHTML = uncheckedicon;
}
};
const selectedSVG = ``;
const defaultSVG = ``;
document.getElementById('general-enquiry').addEventListener('click', function() {
if (this.classList.contains('selected-option')) {
this.classList.remove('selected-option');
this.querySelector('svg').outerHTML = defaultSVG;
} else {
this.classList.add('selected-option');
this.querySelector('svg').outerHTML = selectedSVG;
document.getElementById('support-request').classList.remove('selected-option');
document.getElementById('support-request').querySelector('svg').outerHTML = defaultSVG;
}
});
document.getElementById('support-request').addEventListener('click', function() {
if (this.classList.contains('selected-option')) {
this.classList.remove('selected-option');
this.querySelector('svg').outerHTML = defaultSVG;
} else {
this.classList.add('selected-option');
this.querySelector('svg').outerHTML = selectedSVG;
document.getElementById('general-enquiry').classList.remove('selected-option');
document.getElementById('general-enquiry').querySelector('svg').outerHTML = defaultSVG;
}
});
```
## Author
- Frontend Mentor - [@TwinkleByte](https://www.frontendmentor.io/profile/TwinkleByte)
- Github - [@TwinkleByte](https://github.com/TwinkleByte)