Devlog #1: Adding the Contact Page (And Taming CSS Flexbox)

Hey everyone! Quick update on the Gold & Girl site.

Until now, we didn’t actually have a way for people to reach out directly through the site. I finally sat down and built out the Contact Page from scratch, and honestly, it turned out to be a massive lesson in debugging layout quirks and form handling.

Here’s a quick breakdown of what went down and what’s new since the last version:

• Building the Contact Form: I set up a clean two-column layout containing an info card on the left and the enquiry form on the right.
• Fixing Template Strings & Typos: At first, my success message banner was rendering raw template literal variables on page load. I stripped out the hardcoded text placeholders from the HTML and used proper JavaScript backticks (template literals) to dynamically inject the user’s name and enquiry type cleanly upon submission. I also caught and fixed a typo where I spelled “received” as “recieved.”
• Taming the Social Icons: I wanted links to our social channels at the bottom. My first attempt resulted in giant brand logos breaking the page. To fix this, I wrapped them into a dedicated .socials-section container with a clean translucent off-white background matching our honey theme. I used CSS Flexbox to align the text handles right next to their corresponding icons horizontally instead of stacking them vertically, which looks way cleaner.
• Hooking up a Live Backend: Having a form look pretty is cool, but it’s useless if the messages go nowhere. Since this is a static site, I integrated Web3Forms via an API access key using a hidden POST action. Now, whenever someone submits an enquiry, it bypasses client-side storage and fires an email notification straight to my inbox in real time.

The site is looking super polished now and actually functions like a real business page. I think its ready to ship!!