Intermediate · 25 min · 450 points

Pages & Email Code Workshop

Build a small branded page, use safe email HTML and connect customer actions.

Open interactive lesson and quiz

What you will learn

  • Write and preview a responsive page
  • Map a form to an object
  • Test a personalized HTML email and chat link

A marketing team needs a landing page with a form, a working section link and a tested email that points customers to the right destination.

Lesson 1

Use HTML and CSS on a published page

The Pages editor accepts a complete HTML document or separate HTML, CSS and JavaScript panels. Use an id such as services on a section and href="#services" on the navigation link. Test the published URL as well as editor preview. Keep navigation labels meaningful, add alt text to images and use responsive CSS such as a narrow-screen media query. Avoid putting private keys or personal data in page JavaScript: published source is visible to visitors.

Lesson 2

Connect a form to BU records

Choose a standard or custom object available in the BU and map each form input to a permitted target field before publishing. Required fields and field types are validated by the backend when a visitor submits. Use a test submission with non-sensitive data, inspect the resulting record and repair mapping errors in the page editor. A public form cannot skip object validation or write into another BU.

Lesson 3

Write HTML that works in email clients

Use the Email Builder’s HTML block for focused components and inspect View HTML or generated source after saving. Email clients often ignore scripts and advanced CSS, so use an ordinary HTTPS link for a CTA, include a readable fallback for personalization, set image alt text and test on mobile. For chat, link to the BU chat page: recipients open it in a browser. Keep an unsubscribe link and the selected subscription category, then use the validation and test-send controls before a production flow.

Practice · Build and test a small campaign

  1. Create a Landing Page with a semantic section id and an anchor link to that id. Preview desktop and mobile, publish, then open the published URL and test the actual link.
  2. Create a Form page, choose the BU object and map the form fields to editable fields. Submit your own sample and check the stored record.
  3. Add a short HTML block to an Email with an image alt attribute and a button linked to your page or live chat. Preview with a sample Contact, validate and test send to an address you control.
Take the quiz and earn Content Builder