Website kits
Creative agency project brief page
Project brief page with a form for project type, budget range, launch timing and links, a what-happens-next list, the studio address and a six-question FAQ.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page every Start a project button points to, written so that a good lead can brief you in five minutes and a poor fit can tell early that you are not the right studio. The form asks for what you need before agreeing to a call: name, email, company, links to the current site, the type of work, a budget range, an ideal launch window and what the project should change for the business. Budget and timing are dropdowns rather than free text, because people pick a range more readily than they type a number. Beside the form, four steps explain what happens after the brief arrives, so nobody wonders whether it vanished, with the studio address below them. The FAQ covers minimum project size, remote clients, payments, ownership and lead times. Edit the budget bands so the lowest one starts at your real minimum; an option below what you accept only invites briefs you will turn down.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 9
- Container (grid) × 2
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 7
- Heading × 4
- Form × 1
- Icon List × 1
- Accordion × 1
Things worth knowing
- The brief form converts to an Elementor Pro Form with eight fields (two text, email, url, three selects with their options and a textarea) and keeps the labels and required flags. It needs Elementor Pro, and the original action is removed, so set Actions After Submit, such as Email, after import.
- Name, email, company, links, budget and launch are set to 50% width with no separate mobile width. Set each to 100% for mobile in the field settings so they do not sit side by side on phones.
- The four next steps become one Icon List with arrow icons, and the six questions are details/summary pairs that convert to one Accordion widget.
- The form card and the steps column stack below 780px with the form first, and the FAQ intro moves above the questions.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Start a project — Lowtide Studio</title>
<style>
body{margin:0;font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;color:#f2efe9;background:#0e0e10}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:88px 0;background:#0e0e10}
h1,h2,h3{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;color:#f2efe9;font-weight:700}
h1{font-size:84px;line-height:1;letter-spacing:-.045em;margin:0 0 28px;max-width:900px}
h2{font-size:44px;line-height:1.06;letter-spacing:-.035em;margin:0 0 16px}
h3{font-size:20px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#a3a1a8;margin:0 0 18px}
.eyebrow{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ff4d8d;margin:0 0 20px}
.intro{padding:104px 0 48px}
.intro .lead{max-width:660px;font-size:20px;line-height:1.6;color:#f2efe9;margin:0}
.brief-sec{padding-top:24px}
.brief{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start}
.form-card{background:#18181c;border:1px solid #2a2a31;border-radius:4px;padding:40px}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
.field{display:flex;flex-direction:column;gap:8px}
.full{grid-column:1 / -1}
label{font-size:14px;font-weight:600;letter-spacing:.02em;color:#f2efe9}
input,select,textarea{font:inherit;font-size:16px;padding:13px 14px;border:1px solid #a3a1a8;border-radius:4px;background:#0e0e10;color:#f2efe9}
textarea{min-height:140px;resize:vertical}
.submit{grid-column:1 / -1;justify-self:start;padding:16px 30px;border:0;border-radius:999px;background:#ff4d8d;color:#0e0e10;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:16px;font-weight:700;cursor:pointer}
.side h2{font-size:30px;margin:0 0 22px}
.next{display:flex;flex-direction:column;gap:18px;margin:0 0 40px}
.next > div{display:flex;align-items:flex-start;gap:14px;font-size:16px;line-height:1.55;color:#f2efe9}
.arrow{color:#ff4d8d;font-size:16px;line-height:1.55}
.visit{padding:28px;border:1px solid #2a2a31;border-radius:4px}
.visit h3{margin:0 0 10px}
.visit p{font-size:16px;margin:0 0 12px}
.visit .last{margin:0}
.graphite{background:#18181c}
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start}
.faq{display:flex;flex-direction:column;gap:0;border-top:1px solid #2a2a31}
details{border-bottom:1px solid #2a2a31;padding:22px 0}
summary{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:20px;font-weight:700;color:#f2efe9;cursor:pointer}
details p{margin:12px 0 0;font-size:16px}
@media(max-width:780px){
section{padding:60px 0}
.wrap{padding:0 16px}
.intro{padding:64px 0 28px}
.brief-sec{padding-top:12px}
h1{font-size:48px;line-height:1.02}
h2{font-size:32px}
.intro .lead{font-size:18px}
.brief,.faq-wrap{grid-template-columns:minmax(0,1fr);gap:40px}
form{grid-template-columns:minmax(0,1fr)}
.form-card{padding:26px 18px}
.side h2{font-size:26px}
.visit{padding:22px 18px}
summary{font-size:18px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Start a project</p>
<h1>Tell us what you are working on.</h1>
<p class="lead">A few lines are enough to start. The budget and timeline help us suggest the right scope, and they stay between you and the two partners who read every brief.</p>
</div>
</section>
<section class="brief-sec" id="brief">
<div class="wrap brief">
<div class="form-card">
<form action="#" method="post">
<div class="field"><label for="b-name">Your name</label><input id="b-name" name="name" type="text" autocomplete="name" required></div>
<div class="field"><label for="b-email">Work email</label><input id="b-email" name="email" type="email" autocomplete="email" required></div>
<div class="field"><label for="b-company">Company or organization</label><input id="b-company" name="company" type="text" autocomplete="organization"></div>
<div class="field"><label for="b-site">Current website or relevant links</label><input id="b-site" name="links" type="url" placeholder="https://"></div>
<div class="field full"><label for="b-type">What do you need?</label><select id="b-type" name="project_type"><option>Brand identity</option><option>Website</option><option>Brand identity and website</option><option>Product or app design</option><option>Content and copywriting</option><option>Not sure yet</option></select></div>
<div class="field"><label for="b-budget">Budget range</label><select id="b-budget" name="budget"><option>Under $10,000</option><option>$10,000–$25,000</option><option>$25,000–$50,000</option><option>$50,000–$100,000</option><option>Over $100,000</option><option>Not decided yet</option></select></div>
<div class="field"><label for="b-timeline">Ideal launch</label><select id="b-timeline" name="timeline"><option>Within 2 months</option><option>In 3–4 months</option><option>In 5–6 months</option><option>Later this year</option><option>No fixed date</option></select></div>
<div class="field full"><label for="b-message">What should the project change for your business?</label><textarea id="b-message" name="message" required></textarea></div>
<button class="submit" type="submit">Send the brief</button>
</form>
</div>
<aside class="side">
<h2>What happens next</h2>
<div class="next">
<div><span class="arrow">→</span><span>We read every brief and reply within two working days, with questions or a time for a call.</span></div>
<div><span class="arrow">→</span><span>A 45-minute video call with a partner and the designer who would lead your project.</span></div>
<div><span class="arrow">→</span><span>Within a week of the call, a written proposal with scope, schedule and a fixed price.</span></div>
<div><span class="arrow">→</span><span>If it is not a fit, we say so and suggest another studio or freelancer where we can.</span></div>
</div>
<div class="visit">
<h3>The studio</h3>
<p>41 Foundry Lane, Unit 3<br>Easthaven</p>
<p>Visits by appointment, Monday to Thursday, 10 am to 5 pm.</p>
<p class="last">[email protected] · (555) 018-4420</p>
</div>
</aside>
</div>
</section>
<section class="graphite">
<div class="wrap faq-wrap">
<div>
<p class="eyebrow">Before you write</p>
<h2>Questions clients ask us first</h2>
<p>Anything else, ask in the brief. There are no wrong questions at this stage.</p>
</div>
<div class="faq">
<details><summary>What is the smallest project you take on?</summary><p>Most of our projects start at around $10,000. Below that, a two-week design sprint at $7,500 is usually the best use of the budget, or we can recommend freelancers we trust.</p></details>
<details><summary>Do you work with clients outside Easthaven?</summary><p>Yes. About two thirds of our clients are in other cities or time zones. Workshops run over video, and we travel for a kickoff day when the project is large enough to justify it.</p></details>
<details><summary>How do payments work?</summary><p>Fixed-scope projects are paid in three parts: 40% to book the start date, 30% at design sign-off and 30% at launch. Retainers are invoiced at the start of each month.</p></details>
<details><summary>Who owns the work when the project ends?</summary><p>You do. Once the final invoice is paid, the designs, source files and code are yours, including the website logins. We keep the right to show the project in our portfolio unless you ask us not to.</p></details>
<details><summary>Can you work with our in-house developers?</summary><p>Often we prefer it. We hand over designs in your team’s tools and join your stand-ups during the build so questions get answered the same day.</p></details>
<details><summary>How far ahead do you book?</summary><p>Usually six to ten weeks. If you have a fixed launch date, mention it in the brief and we will tell you straight away whether we can make it.</p></details>
</div>
</div>
</section>
</body>
</html>
