Building a Goldcast registration page

Contents

What is the Page Builder? Previewing your page Page styles Adding a new block Editing a block

Saving your page Registration Forms Page URL How to Embed a Marketo form How to Embed a HubSpot form Image Specs

Custom brand, design and launch your event registration pages easily using Goldcast's Page Builder. The default registration page will already have added sections - you can select theme, fonts and upload a hero image, save changes and the page will be ready to launch.

To get started: 

1. Log in to Goldcast Studio with your credentials
2. Click the hamburger icon on the top left, and select the Events tab
3. From the Events list, click the event you want to edit
4. Click Registration --> Page & Form in the menu on the left of the screen
5. Click Edit in the Registration Page section to open the Page Builder

What is the Page Builder?

Once you are on the builder page, on the left side of the page, you will see the Editor. Here you can see the blocks of your page - add new blocks, edit, hide and remove blocks, and change the global page settings.

You can:

1. Reorder the blocks on your page by dragging and dropping each block in the left side menu. 
2. Delete a block by clicking the arrow next to the block name, then scrolling down and clicking the red "Delete Block" button. 
3. Hide/Unhide a block by clicking the arrow next to the block name, then scrolling down and clicking the eye icon. 

On the right side of the page, you will see a preview of your page as you make the above edits.

The right side of the page is not editable. To change anything on this page, you must use the left side menu. 

Previewing your page

To preview the page, click the Preview icon at the top of the screen. This will show you what the registration page will look like for your visitors. 

Alternatively, you can also click the Registration Page tab on the left of the screen to get a preview of your registration page. 

To see what this page will look like on a mobile device, you may open it on your phone, or you can collapse your browser window down to its smallest size. 

To exit the preview, click the X at the top of the screen.

 

Settings from the Look & Feel section of your event will not apply to a custom Registration page.

Page styles

The first time you enter the registration page builder, the default Page Styles will be applied to your registration page - white background and black text color.

You can use the Page styles section to change the font, background color, and font color of the entire registration page at once. (You may also choose to change the style of each block on the page individually.)

Adding a new block

To add a new block to your page, click the "New Block" button at the top right of the menu. Then, select a block to add. Your page will automatically scroll to your new block at the very bottom of the page. To reorder your blocks, drag and drop the new block in the left menu. 

Once you add any new block, block is automatically added to Navigation block lists but is hidden by default and it will not appear on the Navigation section of your page. For the block header to be visible, click on the eye icon and you can edit the block name if you want to customize the menu name for this block.

Once done editing, the Navigation bar will reflect the edited name.

Editing a block

To edit a block, scroll to the name of that block in the left side menu and click the arrow to the left of the block name. This will open the section. You can change elements of the block from this list, including the headline, text, images, background color, text color, and more. 

For each block, you can customise the font styling for your Headline, text; to view the styling options click on the swatch icon on the tab.All of these new controls automagically adapt to all device sizes, so it remains fast and easy to build a page that looks great on every device.

Here is a brief description on how each of these styling settings work:

Color: This controls the color for your text. By default this would be blank and will inherit the block text color. If the block text color is blank , then it will inherit the page text color.

To change the color you can enter the hex code or click on the color preview to open the color palette.

Font Size: This controls the size of your text.We have defaults applied to each text sections in the block and this option allows you to change the text size.

Font Weight: This setting controls how thick or thin the characters of the text should be.

Leading: This setting controls how the text is spaced vertically in lines or the spacing between adjacent lines of text.

Max Width: This controls the maximum width that applies to your text. For instance, if there is a lengthy event title and you prefer the title length to be contained instead of running the full length you can use this option.

Tracking: This controls the spacing in between the characters of your text.

Space Top: This controls the spacing or padding above your text.

Space Bottom: This controls the spacing or padding below your text.

Additionally, we also have block, button and card level styling: to view these click on the block /card/button tabs.

Saving your page

To save changes to your page, click the "Save" button at the bottom of the menu. This will save changes and publish your page.

You will see a prompt to save changes if you have unsaved changes on page and click on Close button. Clicking on Ok will redirect you to the admin app without saving changes and clicking on Cancel will close the modal and you will remain on the builder page, allowing you to save the changes.

Registration Forms

Every Custom Registration page will have exactly one Registration block in it. This block can't be deleted, but it can be hidden. 

You can set your registration form to be in either Embed Mode or Popup Mode.

In Popup Mode, your registration form will popup over the registration page when one of the register CTAs on the page is clicked like so:

In Embed Mode, the registration form is embedded directly into the page, at the same level as all the other elements on your page. The registration form will be in a block that is split between a text area and the form. The register CTAs on your page will auto-scroll the user to the registration form embedded in your page. 

In Embed Mode you'll be able to add a headline that appears above your registration form. Additionally, you can make users navigating to your registration page automatically land on the form block when the page loads by adding ?scroll-to-form=true to the end of your Registration 

Page URL

Here is an example registration page URL that auto-scrolls to the form: https://goldcasttest.registration.goldcast.io/events/dccdd791-ee4e-4342-afd0-6c756ad78f0c?scroll-to-form=true

Goldcast's Custom Registration Page provides options to embed external forms built on Marketo and HubSpot on the page. You will view these options in your Register block in the form style folder along with the option to use Goldcast forms.

By default your Goldcast form is selected and the registration form from your Goldcast Library is used. For more information on how to create and assign forms, refer here.

How to Embed a Marketo form

To Embed a Marketo form, first you will need to copy the embed code of the form from your Marketo account.

Copying Embed code:

Login to Marketo account and navigate to Design Studio. Find and select the form which you want to embed on the page.

Once you have created and approved the form, you will see the Embed Code option on the right. Click on that and then copy the code and keep it handy.

After you have copied the code, navigate to the Goldcast Registration Page builder and follow the below steps:

1. In your Registration block under Form Styles, select the Marketo option.
2. In the Marketo Snippet field, enter the embed code copied above and hit Apply.
3. In the editor or in preview mode, click the Register CTA in the Hero block or Navigation bar, and verify that the Marketo form opens up.

You can edit the embed code at any time, by clicking on Edit and then again click on Apply to save any changes to Marketo Snippet.  Any updates made in the embedded Marketo form will reflect on your page without any further changes.

Next, make sure that webhook is configured for Goldcast events in Marketo. Refer here to follow the steps to set up the webhook. 

Once done, test that registrations from the form are reflecting in the Goldcast event in the Registrants tab. Now you can save changes to your  page and you will be able to collect registration from the embedded Marketo form on the live page.

After applying your embed snippet, you still need to click the save button in the builders's footer to deploy your new Marketo form to your live registration page.

How to Embed a HubSpot form

To Embed a Hubspot form, first you will need to copy the embed code of the form from your Hubspot account.

Copying Embed code:

Login to your Hubspot account and navigate to the Forms section. Select the form you want to embed on the page.

Once you have created and approved the form, you'll need to copy the form's embed script. You can do this by clicking Actions on the form you want, clicking share, then navigating the the Embed Code tab and clicking copy.

You can also copy the embed snippet while editing your form by clicking the Embed button in the upper right of the screen, or simply by publishing your form, which will automatically open the Embed your form popup.

After you have copied the code, navigate to the Goldcast Registration Page builder and follow the below steps:

1. In your Registration block under Form Styles, select the Hubspot option.
2. In the Hubspot Snippet field, enter the embed code copied above and hit Apply.
3. In the editor or in preview mode click the Register CTA in the Hero block or Navigation bar, and verify that the Hubspot form opens up.

You can edit the embed code at any time by clicking on Edit, making your changes, then clicking Apply again. Any updates you make to your Hubspot form through the Hubspot form editor will reflect automatically after saving your changes in Hubspot.

Next, make sure that your workflow is set up correctly for Goldcast events in Hubspot. Refer here to follow the steps to setup the workflow. 

Once done, save your changes by clicking the Save button in the footer. Test that registrations from the form are reflecting in the Goldcast event in the Registrants tab. 

After applying your embed snippet, you still need to click the save button in the builders's footer to deploy your new Hubspot form to your live registration page.

Image Specs

How should I create my hero image to ensure it looks great at any browser size?

To compensate for the challenge of infinite screen sizes, Goldcast uses a “background cover” strategy for hero images. The image will crop on the left and right if the browser is tall and skinny. If the browser is wide and short, it will crop the image on the top and bottom.

The content inside the target purple circle of this sample image will be visible at all browser sizes. The top, bottom, left, and right of the image may be cropped depending on screen size. 

Avoid noisy background images or including text in your image that conflict with your event name, description, and date. It’s best practice to preview your website at different screen sizes with our preview feature, by resizing your browser to confirm the page looks how you want it to before you publish.

Fullscreen 13” laptop:

iPad:

Mobile:

The hero block also has a variable height - it expands to fit the amount of content displayed. For example, if a logo and a long description are added, the hero image will be taller to cover the background of the content.

Here are some suggested specs for images you can use in other registration page blocks. Keep in mind, as the content on your page, layout of each block, and size of your browser changes, these images will shift to compensate.

All block background images: 4x3 aspect ratio, between 1600px - 2400px wide

Navigation bar

Logo: svg file approx. 32px tall, width not greater than 150px

Background image: approx. 66px tall

Hero

Logo: svg file approx. 80px tall, any aspect ratio

Background: see above

Full width image

4x3 aspect ratio, between 1600px - 2400px wide

Text grid

Image: 4x3 aspect ratio, suggested minimum width of approx. 250px Depending on how many columns in your grid, and the size of your browser window, the image size and crop will adjust.

Image/text split

Image: 1x1 or 3x4 aspect ratio. This image will stretch taller to match the height of the text in the block.