Overview
Want to embed your newsletter sign up form on a website page? Follow our guide below for this two-step process:
- First, go into Emma and copy the embed code for your sign up form.
- Next, add the Emma component to the desired WordPress Page, and paste the embed code.
Finding the embed code for an Emma sign up form
Quick guide
- Go to https://home.e2ma.net.
- If prompted, log in with the following credentials:
- Username: Your @usc.edu email address
- Password: The password you created during setup, which may not be the same as your USC NetID passphrase
- Click the Audience tab.
- Click Forms in the left menu.
- Next to the form name, click the Expand
icon. Select Add to your site from the dropdown.
- Click the Iframe tab.
- Select and copy the text (aka the embed code) in the field. This is what you will paste into WordPress.
Detailed guide (with screenshots)
- Go to https://home.e2ma.net.
- If prompted, log in with the following credentials:
- Username: Your @usc.edu email address
- Password: The password you created during setup, which may not be the same as your USC NetID passphrase
- Click the Audience tab.
- Click Forms in the left menu.
- Next to the form name, click the Expand icon. Select Add to your site from the dropdown.
- Click the Iframe tab.
- Select and copy the text (aka the embed code) in the field. This is what you will paste into WordPress.
Adding an Emma sign up form to a Dornsife WordPress Page
Use the My Emma Form Embed component
Quick guide
- Log into Dornsife WordPress.
- Click Pages in the left menu. Open the Page you want to add the sign up form to.
- Note that the Emma sign up form can only be added to Pages that use the Default template or the Content Detail template.
- Select the location for the sign up form:
- To add it to the bottom of the Page, scroll to the bottom and click the + button.
- To add it between two existing components, hover your mouse between the two components until the + icon appears. Click the + icon.
- Type Emma in the search bar, and select the My Emma Form Embed component to add it to the Page.
- You can optionally fill out the Title and Description fields. In the Form Embed field, paste the text (embed code) that you copied earlier from Emma.
- To ensure that this form is accessible to visitors with screen readers, you will need to add a descriptive title to the embed code. Within the <iframe> tag, add the title in the following format:
- <iframe src="formURL" title=""></iframe>
- For example:
<iframe src="https://app.e2ma.net/app2/audience/signup/uniqueformlink/" width="510" height="500" frameborder="0" title="Sign up for the DTS newsletter"></iframe>
- To see how the form appears, click the Desktop Preview
icon and select Preview in new tab from the dropdown.
Detailed guide (with screenshots)
- Log into Dornsife WordPress.
- Click Pages in the left menu. Open the Page you want to add the sign up form to.
- Note that the Emma sign up form can only be added to Pages that use the Default template or the Content Detail template.
- Select the location for the sign up form:
- To add it to the bottom of the Page, scroll to the bottom and click the + button.
- To add it between two existing components, hover your mouse between the two components until the + icon appears. Click the + icon.
- Type Emma in the search bar, and select the My Emma Form Embed component to add it to the Page.
- You can optionally fill out the Title and Description fields. In the Form Embed field, paste the text (embed code) that you copied earlier from Emma.
- To ensure that this form is accessible to visitors with screen readers, you will need to add a descriptive title to the embed code. Within the <iframe> tag, add the title in the following format:
- <iframe src="formURL" title=""></iframe>
- For example:
<iframe src="https://app.e2ma.net/app2/audience/signup/uniqueformlink/" width="510" height="500" frameborder="0" title="Sign up for the DTS newsletter"></iframe>
- To see how the form appears, click the Desktop Preview icon and select Preview in new tab from the dropdown.
Use another component
If you are comfortable with HTML, you can add the Emma sign up form in an HTML editing-enabled component, not just in the My Emma Form Embed component. This can be an option if you want less whitespace than the My Emma Form Embed component or want to add the sign up form in an existing layout such as the Signup Form component.
A component has HTML editing enabled if it contains a field with the Visual and Text tabs. To add the sign up form to this type of component:
Quick guide
- Click the Text tab.
- Place your cursor where you want to place the sign up form. Paste the text that you copied earlier from Emma.
- To ensure that this form is accessible to visitors with screen readers, you will need to add a descriptive title to the embed code. Within the <iframe> tag, add the title in the following format:
- <iframe src="formURL" title=""></iframe>
- For example:
<iframe src="https://app.e2ma.net/app2/audience/signup/uniqueformlink/" width="510" height="500" frameborder="0" title="Sign up for the DTS newsletter"></iframe>
Detailed guide (with screenshots)
- Click the Text tab.
- Place your cursor where you want to place the sign up form. Paste the text that you copied earlier from Emma.
- To ensure that this form is accessible to visitors with screen readers, you will need to add a descriptive title to the embed code. Within the <iframe> tag, add the title in the following format:
- <iframe src="formURL" title=""></iframe>
- For example:
<iframe src="https://app.e2ma.net/app2/audience/signup/uniqueformlink/" width="510" height="500" frameborder="0" title="Sign up for the DTS newsletter"></iframe>
