CTA Bar-Contextual

Overview

Inspire users to take a specific action

You can use the CTA Bar-Contextual to place text alongside the call-to-action button. Use it as an extra opportunity to make your case, helping to boost conversions.

Other call to action components available are:

• Call to Action Bar
• Sticky CTA

In our CMS, two elements make up the call to action button: the form and the content block.

How to use it

Step 1: Make your form

Put in a form request to the Collaboration & Client Solutions team – they’ll help you to build a bespoke form.

When you make a form request, you’ll need to specify:

• Which format you want (e.g. text boxes or dropdowns)
• Required text fields (decided by the data you wish to collect)
• The email address submissions should go to

Follow these links to put in a form request:

• The website form (Drupal)
• Hubspot (build the form element in HubSpot first before completing the request)
• Salesforce

Step 2: Add a new content block

When you select the call to action component, you’ll see two content block options:

• Add new content block
• Add existing content block

Choose ‘add new content block’.

Name your content block in the ‘block description’ text field. Content blocks are reusable, so give yours a unique name that captures the context of the page. For example:

• Get in touch Architects Professional Indemnity Howden UK

Step 3: Connect your form

Under ‘link type’, select how you wish to connect your form. There are two options:

• Webform – select your form from the ‘webform’ dropdown menu
• Link – paste your form URL in the ‘link URL’ text box

If your form is hosted on the same domain as your webpage, use a webform. This is because it keeps users on the same page, making it simpler to complete the form.

If your form is hosted on an external website, such as Hubspot or Salesforce, you can only connect it using the link option.

Step 4: Add your button copy

How you add button copy depends on whether your form is a webform or a link:

• Webform – use the ‘heading’ text field (below the ‘block description’ text field)
• Link – add your button copy to the ‘link text’ box

Your button copy must follow UX best practices. Effective button copy is clear and actionable. Good examples include:

• Get in touch
• Register now
• Get a quote
• Start assessment

Step 5: Save your content block

Press the ‘create content block’ button. This saves your content block to the CMS. Finally, save your page and check the button appears the way you expect.

Step 6: Complete the text fields

Heading

The heading should set up the action you want users to take. You have up to 12 words to work with, giving you the space to write a page-specific setup. For example:

• Start your no-obligation consultation

Make sure your heading doesn’t run onto a third line. Use a maximum of 12 words. 

Subtext

Use the subtext to elaborate on your heading. You have up to 52 words to make your case. Don’t run onto a fifth line.