I got married last November! 👬 Hoooray!

My partner’s second name is Biddle. My second name is Smyth. Hence BiddleSmyth! It was either that or Smiddle and… that’s… not very good.

Anywho, as all soon to be married couples now know, they they need a nice shiny website to display run down of the day, location information and the all important RSVP form.

I didn’t want to go down the road of a Squarespace site. I clearly didn’t have enough on my list. A glutton for punishment I am 🙂 I wanted to put my newly learned CSS grid skills to the test and to put my own stamp on things.

Before going any further, take a look a the site and below I’ll break it down a little.

So, off I went and did some research to discover what content this sort of site usually included.

• Countdown Timer
• Timeline / Story recap
• The breakdown
• Locations
• Accommodation Options (we opted to ignore this one as it was in Dublin City Center.
• RSVP form

• 

• 

The timer was an interesting little project. I hadn’t really worked with time in JavaScript before so it was a bit of math to work out how long was left to go. Below is just a small sample!

var hours = Math.floor(distance_in_seconds % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
  var minutes = Math.floor(distance_in_seconds % (1000 * 60 * 60) / (1000 * 60));
  var seconds = Math.floor(distance_in_seconds % (1000 * 60) / 1000);

The story / recap section was a bit of fun. I wrote a first draft and then my wonderful friend, and full time copywriter, Kim Gillick , offered her services to whip it into shape. Design wise, I used CSS Grid (though, Flexbox would have worked just as well. A small little detail, but the overlapping of the images here would only be doable using CSS Grid or absolute positioning. I’m not really a fan of the latter as I think it’s very brittle. Grid’s a bit more robust.

Up next we had the day breakdown. I thought it’d lent itself to a mini timeline like layout. And then on mobile it worked quite nicely too. Nothing too fancy.

Then to the RSVP form. I had a Google form that I had sent out to some people and I just presumed that it’d be easily customizable whenever I went to embed it on my site. But nope. no it’s not. There’s very little you can do to a Google form out of the box.

I did a bit of digging and it’s possible to rock your own form just as long as the form’s action and the fields’ name attribute matches up with what Google expects. Below is a bit of the form code for reference.

<form action="https://docs.google.com/forms/d/e/1FAIpQLSdBUI1P3n8teWZVIy4fmLwFnBZ_CaZbvRhGgXPTfWCmEBysjQ/formResponse" method="post" target="hidden_iframe" onsubmit="submitted=true;">
    <fieldset>
        <label>Your Email address
            <br>
            <input class="text_fields" name="emailAddress" type="email" placeholder="Email" background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
        </label>
    </fieldset>
    <fieldset>
        <div>
            <label>
                <input type="checkbox" name="entry.1424661284" value="None"> None</label>
        </div>
        <div>
            <label>
                <input type="checkbox" name="entry.1424661284" value="Vegetarian"> Vegetarian</label>
        </div>
        <div>
            <label>
                <input type="checkbox" name="entry.1424661284" value="Vegan"> Vegan</label>
        </div>
        <div>
            <label>
                <input type="checkbox" name="entry.1424661284" value="Gluten-free"> Gluten-free</label>
        </div>
        <div>
            <label>
                <input type="checkbox" name="entry.1424661284" value="Dairy-free"> Dairy-free</label>
        </div>
        <div>
            <label>
                <input type="checkbox" name="entry.1424661284" value="Other"> Other</label>
        </div>
    </fieldset>
    <input class="form_button" type="submit" value="Submit RSVP">
</form>

So there we are now! As always, let me know what you think over on Twitter. I’d love to know your thoughts.