SIGN MY GUESTBOOK?
It's finally done!
✼ UPDATED to include fonts used! ✼
During the last week of December, I started building my guestbook. I had been emailing Becky and she inspired me to style my own. (She's since published a great post on this topic.)
I stayed up until 4am two nights in a row. I thought I was done, until I realized I totally forgot about styling the date. I decided to pause it for another day. Nearly a month later, I picked the task up today and finished it within 30 minutes. ʕ-ᴥ-ʔ
How it works
I'm using Form.taxi to collect my guestbook submissions, which I'll then add one-by-one to the page.
The concept
Old-school ephemera has been the inspiration for my blog's look and feel. Each of the messages will look like a card in a "real" guestbook! (Ok, you must use your imagination.)
It currently looks like this:
Before.
But once populated with lovely messages (hopefully!), it will look like this:
After! (Placeholder text.)
I made a prototype page to test it out. It was quite complicated to do because I needed to create two columns. This involves both HTML within the page and CSS in Themes.
Styling the guestbook
All this code is just for the guestbook form. I enlisted Chatgpt for help during some parts, so if anyone wants to clean up my code or give me pointers, feel free to email me. I have a better understanding now of styling UI elements, but I still have no idea about the technical aspects.
I added the guestbook overflow part so I could style a scroll bar. I haven't gotten to that yet and will worry about it once I get enough messages to meet this requirement.*
*I deleted this from my code just now because I realized none of my pages follow this rule and I want to keep things consistent. But I'll leave it here in case anyone finds it useful.
CSS
/* Guestbook overflow */
body.page:has(.guestbook) {
height: 200vh;
display: flex;
flex-direction: column;
}
body.page:has(.guestbook) main {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
/* Guestbook */
.guestbook {
display: inline-block;
position: relative;
max-width: 350px;
border: 1px solid #ede9e4;
border-radius: 4px;
background-color: #fff;
padding: 50px;
font-size: 13pt;
margin: 0 0 0 2em;
}
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Adjusting image */
.guestbook img {
width: 100%;
margin: 0 0 20px 0;
}
.guestbook input:focus {
border-color: #0015ff;
outline: none;
}
.guestbook input {
font-family: var(--font-main);
font-size: 14pt;
text-transform: uppercase;
width: 100%;
margin: 0 0 1em 0;
border:none;
border-bottom: 1px solid #666;
padding: 0 5px 5px 0;
outline: none;
background-color: #fff;
resize: none;
}
.guestbook ::placeholder {
color: #999;
}
label[for="message"] {
display: block;
}
label[for="message"] {
margin-top: 20px !important; /* push the whole field down */
}
.guestbook textarea {
font-family: var(--font-secondary);
font-size: 18pt;
width: 100%;
height: 150px;
padding: 12px;
margin: 10px 0;
box-sizing: border-box;
border: 1px solid #666;
border-radius: 4px;
background-color: #fff;
resize: none;
}
.guestbook textarea:focus {
outline: none;
border: 1px solid #0015ff;
content: none;
}
.guestbook h5 {
margin-top: 0px;
color: #333;
font-size: 11pt;
}
.guestbook button[type=submit] {
background-color: #000;
border: none;
color: white;
height: 50px;
padding: 20px 32px 16px;
border-radius: 4px;
text-align: center;
font-family: var(--font-main);
font-size: 12pt;
text-decoration: none;
text-transform: uppercase;
margin: 4px 2px;
cursor: pointer;
}
Form.taxi provides an installation guide which is just HTML copy/pasted into the page. But because I wanted two columns, I had to create a div class for a row and a column.
HTML
<div class="row">
<div class="column">
<div class="guestbook">
<img src="[title image]">
<form action="[form url]" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="" required="" />
<label for="country">Country</label>
<input type="country" id="country" name="country" placeholder="Optional"/>
<label for="website">Website</label>
<input type="website" id="website" name="website" placeholder="Optional"/>
<label for="message">Message</label>
<textarea
id="message"
name="message"
placeholder="Say something nice :)"
required=""
></textarea>
<h5>Messages are individually viewed and won't be published immediately.</h5>
<button type="submit">Sign</button>
</form></div></div>
<div class="column">
<br>
<div class="message-1">
<p class="message">Be the first to leave a message!</p>
</div>
</div>
<br>
Some bits were copy/pasted from the previous form I used, such as the "required" field. I decided to not use it, but I also didn't want to delete this in case I break something.
Fonts used
Guestbook title: Jimmy Script
I didn't want to install a fourth font to my theme, so I decided to create this title in Canva and saved it as a PNG with transparent background.
Form fields, placeholder text, disclaimer, button: Special Elite
This is the default (Google) font for the Typewriter theme.
Message placeholder text: Cedarville Cursive
Two different cursive fonts on one page?! A graphic design taboo, but I wanted a scribbly, handwritten font since I imagine these to be handwritten messages. I also use this font in my NOTES section because I imagine that I'd handwrite my notes.
Next time...
I'll write about how I styled the messages later, because I only have the prototype to work with and it'd be cool to use real messages. Then I can write more about what the whole process is like!