Northwind, a free landing page template from 7uptheme.com


FULL DOCUMENTATION

  Open docs/documentation.html in any browser. It covers every section,
  every setting, the brief form, the tabs, images, colours and
  troubleshooting.

  This file is the short version.


QUICK START

  1. Open fillup.php in a plain text editor. Notepad is fine, Word is not.
  2. Find $TO at the top and put your own email address there.
  3. Upload the whole folder to your web host, keeping the structure.

  That is it. The brief form now works.

  Then send yourself one test brief and check three things:

    1. the email arrives, and is not in your spam folder
    2. storage/briefs-2026-01.csv appeared and has your test in it
    3. typing that CSV address into a browser gives 403 or 404,
       never a download

  Item 3 matters. That folder holds your clients' names, event dates and
  budgets. Check it before you take real enquiries. Section 8 of the
  documentation explains what to do if the file downloads.


WHAT YOU NEED

  A host that runs PHP 7.4 or newer, which is nearly all of them. Nothing
  to install, no Composer, no libraries, no account anywhere. The page
  itself is plain HTML and CSS and works anywhere; only the form needs PHP.


WHAT IS IN THE FOLDER

  index.html        the page itself
  fillup.php        your settings and wording. The file to edit.
  send.php          receives the brief, checks it, saves it, emails it
  css/style.css     all styling, with every colour set at the top
  js/main.js        one file, no libraries
  images/           every picture on the page
  storage/          where briefs are saved. Read the note inside.
  docs/             the full documentation
  README.txt        this file


THE PAGE, IN ORDER

   1. Header, transparent over the hero, solid once you scroll
   2. Hero, two overlapping photographs
   3. The moving ribbon of event types
   4. What we run, five tabs
   5. What we handle, a checklist beside a photograph
   6. Parallax band
   7. How we work, five stages down a centre line
   8. Recent work, six photographs with a popup
   9. The brief form, on a dark band
  10. Questions, two columns
  11. Closing call to action
  12. Footer

  Each one is marked in index.html with a comment like
  <!-- ===== 4. What we run ===== --> so you can find it.


THE TABS USE NO JAVASCRIPT

  They are radio buttons and CSS. That means they work with scripting off,
  and the arrow keys move between them, because that is what a group of
  radio buttons does by itself.

  To add a sixth tab you need three things: another <input> with id tab6,
  another <label for="tab6">, another <article class="tab-panel">, and one
  more line added to each of the two rules in the stylesheet that list the
  tab numbers. Section 5 of the documentation shows exactly where.


THE THREE THINGS PEOPLE GET WRONG

  1. Adding a tab and forgetting the stylesheet.
     A sixth tab that nothing in the CSS mentions simply never appears.
     There are two rules to extend, both marked with a comment.

  2. Deleting the hidden fields in the form.
     The field named "website" is a spam honeypot and the "ts" field is a
     timing check. Nobody ever sees them. Remove them and your spam rises
     sharply.

  3. Swapping an image without updating its size.
     Keep the width and height attributes on the <img> tag matching the
     real file, or the page jumps about while it loads.


IF THE EMAIL DOES NOT ARRIVE

  The brief is already saved in storage/, so nothing is lost.

  PHP's mail function is unreliable on some hosts. Fill in the $SMTP block
  at the bottom of fillup.php and change 'enabled' to true. There is a long
  note above that block explaining every line. The two people get wrong:

    'user' is your FULL email address, including the @ part.
    'pass' is that mailbox's password. Gmail, Outlook and Yahoo need an
    "app password" made in your account security settings, not your
    normal one.

  Set $FROM to the same address as 'user', or your provider may refuse
  to send.


NO PHP ON YOUR HOST?

  Delete send.php, fillup.php and storage/, then point the form's action
  at a hosted form service instead. The rest of the page keeps working.


IMAGES

  The photographs supplied with this template are placeholders and are NOT
  covered by the licence. Replace them with your own before you publish.


LICENCE

  Use it for personal, commercial or client work, on as many sites as you
  like. Do not resell or redistribute the template files themselves.

  Full terms: https://www.7uptheme.com/license/


SUPPORT

  docs/documentation.html is the manual. The how-to-use page and the FAQ
  on the site cover the rest. If you would rather we set it up for you,
  tell us what you need: https://www.7uptheme.com/contact/
