Browse Source

Added personalisation instructions in the README

Brendan Abolivier 8 years ago
parent
commit
eff2c10ff8
Signed by: Brendan Abolivier <contact@brendanabolivier.com> GPG key ID: 8EF1500759F70623
1 changed files with 34 additions and 1 deletions
  1. 34
    1
      README.md

+ 34
- 1
README.md View File

77
 
77
 
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:
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
 ## Contribute
114
 ## Contribute
82
 
115
 
96
 
129
 
97
 - Via Twitter at [@BrenAbolivier](https://twitter.com/BrenAbolivier)
130
 - Via Twitter at [@BrenAbolivier](https://twitter.com/BrenAbolivier)
98
 - Via IRC, I'm usually hanging out on [Freenode](https://freenode.net) as *babolivier*
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>