Make a One-Page Event Website HTML File

Sooner or later someone asks "where is the link with all the details?" An email thread is not an answer, and a full website is overkill for a one-day event. Event Landing Page Generator makes the middle option: one HTML file with the title, date, venue, programme, an RSVP button and an add-to-calendar button, which you can put on any web host or attach to an email.

The short version: fill in the form, check the preview, download index.html, upload it, then test the buttons on a phone.

What you get, and what you do not

The download is a single file called index.html. It is plain HTML and CSS: no scripts, no tracking, no fonts or images fetched from anywhere else, and nothing that depends on a service of ours. Because it carries no script, it opens in any browser, works when forwarded as an attachment, and cannot break when a library changes. For the sample offsite described below, the whole page is about 5 kB.

What it does not do is just as important. It does not host itself, so you need somewhere to upload it. It does not collect RSVPs, because the button only opens whatever link or email address you give it. And it does not know about changes: if the date moves, you edit the form and upload a new file.

The fields

The form has the following fields, and each one maps to something on the page:

• Event title appears as the page heading and the browser tab title. If your project has a name, it is filled in for you.
• Tagline appears under the heading and is used as the page description for search and link previews. If you leave it empty, the first 160 characters of the About text are used instead.
• When (shown as typed) is a line of text, not a date picker. If your project has a schedule, it is pre-filled with the range of days in your project's language, and you can overwrite it with something friendlier such as "Friday 13 and Saturday 14 November".
• Venue, Address and Map link. The address keeps its line breaks, and the map link becomes an "Open map" link.
• About the event. Blank lines separate paragraphs.
• RSVP link or email and Button text. The default button text is "RSVP".
• Organised by appears in the footer.
• Colour and Dark page.
• Programme from my project and Add-to-calendar link, which are available once your project has a schedule.

Safe links only

The two link fields are checked. The RSVP field accepts an address starting with https:// or http://, or an email address, which becomes a mail link. The map link must be an https:// address. Anything else, such as a script link, is dropped and you see a message telling you what to use, and you cannot download or copy the page until it is fixed. That protects people who open the page from a link that does something other than it says.

Contrast is chosen for you

The page header is filled with your accent colour, and the tool picks black or white text, whichever reads better on that colour. A yellow header gets black text, while a medium blue or dark navy gets white. You still have to look at the preview, but you are not likely to end up with white text on a pale colour. The preview is shown in a sandboxed frame, so you see exactly what the downloaded file will show.

A worked example: the sample offsite

Open the Try a sample option in the project bar, then the generator. The project is a two-day offsite with six sessions. Suppose you set the title to Sample offsite, a tagline "Two days to plan next year", the venue Harbour Hotel, a map link, an RSVP email address with the button text "Reply to the host", and organiser "People Team".

The generated page has:

• A header with the title, tagline, the date line, the venue, the RSVP button and an Add to calendar button.
• An About section with two paragraphs.
• A Programme section with two day headings, Friday, November 13 and Saturday, November 14, and six entries with times such as 09:00 to 09:30, each with the session title and a line giving presenter and room.
• A Where section with the venue, the address on two lines and the map link.
• A footer: Organised by People Team.

The Add to calendar button is a link that holds the calendar file inside the page, with one event per session, built with the same logic as Calendar Invite Maker. Times are stored in the project's time zone, America/New_York, so a visitor in Berlin sees them in Berlin time. Because the calendar data lives in the page, you do not need to upload a separate file. Test the button on a phone before you publish.

Putting it online

Upload index.html to any static web host, or to the folder of a site you already have, and the address of that folder is the address of the page. If you already own a site, a sub-folder with a clear name keeps it tidy. Then check, in this order: the page opens on your phone; the RSVP button opens a mail message or form; the map link opens; the Add to calendar button offers to add the events; the times match the card or email you already sent.

If you want guests to scan to the page, make a QR code from the finished address with Bulk QR. The whole process is also one of the steps of Invitation Automator, which puts the card, calendar file, page and QR codes in one workspace.

Privacy and wording

Anything you put in the form is public once the file is on a public server. The programme includes presenter names and room names, so decide whether you are comfortable with that. Use a venue address, never a private home address you would not give to a stranger. Because the page tracks nothing, you will not see who visited, so ask guests to reply through the RSVP link.

Steps

1. Open your project, or the tool on its own, and enter the title, when text, venue, address and map link.
2. Write a short tagline and a plain About text.
3. Paste your RSVP link or email address and set the button text.
4. Choose the colour, and tick the programme and calendar options if you have a schedule.
5. Read the preview, fix any message about a link, and download index.html.
6. Upload it, open it on a phone, and test every button.
7. Save the project file if you want to edit the page later, because the form is cleared when the tab closes.

Event Landing Page Generator is a Professional Tool with 10 trial uses a day. The download counts as a usage; Copy HTML is not metered.

Common mistakes

Typing the date in the When line and then changing the programme without updating it. Pasting a link without https:// and wondering why the button message appears. Leaving the sample organiser name in the footer. Forgetting that the page does nothing with replies. Uploading the file under a different name from index.html, so the folder address shows a directory list instead of the page.

Summary

A one-page event site is an afternoon job done in ten minutes: fill in the form, preview, download one file and upload it. Open Event Landing Page Generator with your details, or try the sample project first. More planning tools are in the event tools category.

Open Event Landing Page Generator→

What would you add to the page next: a map, a speaker list or a second language? Tell us on the contact page.