|
|
@@ -77,6 +77,39 @@ The `recipients` server is an array containing the e-mail addresses any message
|
|
77
|
77
|
|
|
78
|
78
|
Each e-mail sent by the form follows a template described in `template.pug` (it's [Pug](pugjs.org/)). If you want to change the way the e-mails you receive are displayed in your mailbox, just edit it! You don't even need to restart the server aftewards :smile:
|
|
79
|
79
|
|
|
|
80
|
+## Personnalising
|
|
|
81
|
+
|
|
|
82
|
+As you might have already seen, the contact form is generated without any form of style except your browser's default one. But that doesn't meen that you have to add an ugly form to your site to receive contact e-mails, as every element has a specific id (beginning with the `form_` prefix), allowing you to use your own style on your contact form.
|
|
|
83
|
+
|
|
|
84
|
+The generated form will look like this:
|
|
|
85
|
+
|
|
|
86
|
+```html
|
|
|
87
|
+<p id="form_status"></p>
|
|
|
88
|
+<div id="form_name">
|
|
|
89
|
+ <label for="form_name_input">Your name</label>
|
|
|
90
|
+ <input required="required" placeholder="Your name" id="form_name_input" type="text">
|
|
|
91
|
+</div>
|
|
|
92
|
+<div id="form_addr">
|
|
|
93
|
+ <label for="form_addr_input">Your e-mail address</label>
|
|
|
94
|
+ <input required="required" placeholder="Your e-mail address" id="form_addr_input" type="email">
|
|
|
95
|
+</div>
|
|
|
96
|
+<div id="form_subj">
|
|
|
97
|
+ <label for="form_subj_input">Your message's subject</label>
|
|
|
98
|
+ <input required="required" placeholder="Your message's subject" id="form_subj_input" type="text">
|
|
|
99
|
+</div>
|
|
|
100
|
+<div id="form_text">
|
|
|
101
|
+ <label for="form_text_textarea">Your message</label>
|
|
|
102
|
+ <textarea required="required" placeholder="Your message" id="form_text_textarea"></textarea>
|
|
|
103
|
+</div>
|
|
|
104
|
+<div id="form_subm">
|
|
|
105
|
+ <button type="submit" id="form_subm">Send the mail</button>
|
|
|
106
|
+</div>
|
|
|
107
|
+```
|
|
|
108
|
+
|
|
|
109
|
+Now it's all yours to make good use of all these identifiers and have a magnificient contact form :wink:
|
|
|
110
|
+
|
|
|
111
|
+I think that the code in itself is clear enough, if not please tell me so I can detail everything here!
|
|
|
112
|
+
|
|
80
|
113
|
|
|
81
|
114
|
## Contribute
|
|
82
|
115
|
|
|
|
@@ -96,4 +129,4 @@ If you want to talk with me in person about SMAM, you can contact me in differen
|
|
96
|
129
|
|
|
97
|
130
|
- Via Twitter at [@BrenAbolivier](https://twitter.com/BrenAbolivier)
|
|
98
|
131
|
- Via IRC, I'm usually hanging out on [Freenode](https://freenode.net) as *babolivier*
|
|
99
|
|
-- Via e-mail, at <oss@brendanabolivier.com>
|
|
|
132
|
+- Via e-mail, at <oss@brendanabolivier.com>
|
