# Embedding Forms: Afform as reusable building-block In the [quick-start example](quickstart.md), we registered a new route (`"server_route": "civicrm/hello-world"`) -- this created a simple, standalone page with the sole purpose of displaying the `helloWorld` form. What if we want to embed the form somewhere else -- e.g. as a dialog inside an event-listing or membership directory? Afforms are actually *re-usable sub-forms*. How does this work? Every `afform` is an *AngularJS directive*. For example, `hello-world` can be embedded with: ```html
``` Moreover, you can pass options to `helloWorld`: ```html ``` Now, in `ang/helloWorld.aff.html`, you can use `options.phaseOfMoon`: ```html Hello, {{routeParams.name}}. The moon is currently {{options.phaseOfMoon}}. ``` ## Example: Contact record Is this useful? Let's suppose you're building a contact record page. First, we should make a few building-blocks: 1. `ang/myContactName.aff.html` displays a sub-form for editing first name, lastname, prefix, suffix, etc. 2. `ang/myContactAddresses.aff.html` displays a sub-form for editing street addresses. 3. `ang/myContactEmails.aff.html` displays a sub-form for editing email addresses. Next, we should create an overall `ang/myContact.aff.html` which uses these building-blocks: ```html