Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 22124809 authored by Martin Déclert's avatar Martin Déclert :cd:
Browse files

Création d'un formulaire de contact

parent dda5d37c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
server.js
+ 0
− 2
View file @ 22124809
require('dotenv').config()
const express = require('express')
const path = require('path')
const cors = require('cors')
const bodyParser = require('body-parser')
const PORT = process.env.PORT
......@@ -15,7 +14,6 @@ class Server {
}
init () {
this.server.use(cors())
this.server.use(bodyParser.urlencoded({ extended: false }))
this.server.use(bodyParser.json())
this.server.use(express.static('www'))
......
www/skin/css/main.css
+ 28
− 6
View file @ 22124809
......@@ -190,6 +190,9 @@ header nav a:hover {
font-family: "Hammersmith One";
}
.contact-page header nav .contact-link {
text-decoration: underline;
}
.contact-page h2 {
padding: 0;
margin-bottom: 2rem;
......@@ -198,15 +201,34 @@ header nav a:hover {
background: #0F3342;
padding: 4rem;
}
.contact-page .content > a {
display: block;
height: 2rem;
width: 2rem;
.contact-page .content #email-form .input-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 1rem;
}
.contact-page .content #email-form .input-wrapper .input, .contact-page .content #email-form .input-wrapper .right {
display: flex;
flex-direction: column;
}
.contact-page .content > a img {
.contact-page .content #email-form .input-wrapper .input textarea, .contact-page .content #email-form .input-wrapper .right textarea {
height: 100%;
width: 100%;
resize: vertical;
}
.contact-page .content #email-form .input-wrapper .input input, .contact-page .content #email-form .input-wrapper .input textarea, .contact-page .content #email-form .input-wrapper .right input, .contact-page .content #email-form .input-wrapper .right textarea {
border: none;
border-radius: 2px;
padding: 0.2rem 0.5rem;
}
.contact-page .content #email-form .input-wrapper .input:not(:last-child), .contact-page .content #email-form .input-wrapper .right:not(:last-child) {
margin-bottom: 1rem;
}
.contact-page .content #email-form input[type=submit] {
border: none;
background: transparent;
color: white;
font-size: 1.2rem;
margin-top: 1rem;
cursor: pointer;
}
.contact-page .content .social {
margin-top: 4rem;
......
www/skin/css/main.css.map
+ 1
− 1
View file @ 22124809
{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/atoms/header.scss","../scss/atoms/home.scss","../scss/atoms/resume.scss","../scss/atoms/contact.scss"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AC9CA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;;AChER;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;;AC7DZ;EACI;EACA;;AAGJ;EACI;;AAKJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAOZ;EACI;;AAEA;EACI;EACA;;AAEA;EACI;;;ACtChB;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAEA;EACI","file":"main.css"}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/atoms/header.scss","../scss/atoms/home.scss","../scss/atoms/resume.scss","../scss/atoms/contact.scss"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AC9CA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;;AChER;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;;AC7DZ;EACI;EACA;;AAGJ;EACI;;AAKJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAOZ;EACI;;AAEA;EACI;EACA;;AAEA;EACI;;;ACrCZ;EACI;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;;AAGI;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAEA;EACI","file":"main.css"}
\ No newline at end of file
www/skin/scss/atoms/contact.scss
+ 38
− 7
View file @ 22124809
.contact-page {
header {
nav .contact-link {
text-decoration: underline;
}
}
h2 {
padding: 0;
margin-bottom: 2rem;
......@@ -8,15 +14,40 @@
background: #0F3342;
padding: 4rem;
& > a {
display: block;
height: 2rem;
width: 2rem;
#email-form {
.input-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 1rem;
.input, .right {
display: flex;
flex-direction: column;
textarea {
height: 100%;
resize: vertical;
}
img {
height: 100%;
width: 100%;
input, textarea {
border: none;
border-radius: 2px;
padding: .2rem .5rem;
}
&:not(:last-child) {
margin-bottom: 1rem;
}
}
}
input[type=submit] {
border: none;
background: transparent;
color: white;
font-size: 1.2rem;
margin-top: 1rem;
cursor: pointer;
}
}
......
www/views/base.ejs
+ 1
− 1
View file @ 22124809
......@@ -13,4 +13,4 @@
<%- include('pages/parts/footer') -%>
</body>
</html>
\ No newline at end of file
</html>
www/views/pages/contact.ejs
+ 41
− 4
View file @ 22124809
......@@ -9,9 +9,29 @@
<h1>Martin Déclert</h1>
<div class="content">
<h2 class="white">Contact</h2>
<a href="mailto:mdeclert.dev@gmail.com">
<img src="assets/icons/send.svg" alt="send mail">
</a>
<form action="#" id="email-form">
<div class="input-wrapper">
<div class="left">
<div class="input">
<label for="email" class="white">Email</label>
<input type="email" name="email" id="email" placeholder="example@email.com">
</div>
<div class="input">
<label for="user_name" class="white">Nom complet</label>
<input type="text" name="fullName" id="fullName" placeholder="John Doe">
</div>
<div class="input">
<label for="object" class="white">Objet</label>
<input type="text" name="object" id="object" placeholder="Objet">
</div>
</div>
<div class="right">
<label for="message" class="white">Message</label>
<textarea name="message" id="message" placeholder="Votre message..."></textarea>
</div>
</div>
<input type="submit" value="Envoyer">
</form>
<div class="social">
<h2 class="white">Social</h2>
<div class="networks">
......@@ -30,6 +50,23 @@
<nav>
<a href="/" class="home-link">home</a>
<a href="/resume" class="resume-link">resume</a>
<a href="#contact" class="conatct-link">contact</a>
<a href="/contact" class="contact-link">contact</a>
</nav>
</header>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init("user_oVdNNyEw74xdbaMoyHmmG");
})();
</script>
<script type="module">
const form = document.querySelector('#email-form')
form.addEventListener('submit', function (event) {
event.preventDefault()
emailjs.sendForm('service_imbe9xu', 'contact_form', this, 'user_oVdNNyEw74xdbaMoyHmmG')
.then(response => console.log(response))
.catch(error => console.error(error))
})
</script>
www/views/pages/parts/header.ejs
+ 2
− 2
View file @ 22124809
......@@ -27,5 +27,5 @@
<nav>
<a href="/" class="home-link">home</a>
<a href="/resume" class="resume-link">resume</a>
<a href="/contact" class="conatct-link">contact</a>
</nav>
\ No newline at end of file
<a href="/contact" class="contact-link">contact</a>
</nav>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service