Call to Action Bar

Overview

Encourage users to take an action

Most web content needs a clear call to action – a specific instruction you want users to follow, like buying your product or getting in touch.

A call-to-action bar is a clickable on-page element that encourages users to carry out your desired action.

In our CMS, there are two elements required to make the call-to-action button: a form and a content block. 

How to use it

Step 1: Make your form

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

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

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

Forms are connected to an email inbox. This lets you track and respond to submissions.

Follow these links to put in a form request, depending on what you need:

• Drupal (website form)
• HubSpot (please build the form element in HubSpot before completing the request)
• Salesforce

Step 2: Add a new content block

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

• Add new content block
• Add existing content block

Select ‘add new content block’.

Name your content block by completing the ‘block description’ text field. Content blocks are reusable, so give yours a logical and searchable name that includes the context.  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

A webform is recommended when your form is hosted on the same domain as your webpage. 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’ll need to connect it using the link option.

Step 4: Add your button copy

You use content blocks to make your call-to-action button – the link that directs users to your form.

Once you’ve made your content block, it can be used wherever the Call to Action Bar appears.

Adding button copy is different depending 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 your call to action appears the way you expect.

Next, complete the text fields

Heading

The heading for your Call to Action Bar should set up the action you want users to take. For example, if you want users to contact you, you might say:

• Got a question?
• We’re here to help
• Ready when you are

Make your heading short and punchy, and no more than seven words.

Subheading

The subheading is an optional line of text which sits below the heading. It’s there if your heading requires some additional context. 

Keep your subheading short – 15 words is your maximum.

Recommended image specifications

This image specification only applies to the Double Call to Action Bar. 

For more information on how to use images in the CMS go to the Image Basics page.