Create and embed a sign-up form

This article explains how to create and embed a sign-up form using the Engage widget.

What is the Engage widget?

The Engage widget is a powerful on-site tool that helps you grow your contact list by capturing subscribers directly from your website. It lets you create customizable sign-up forms, display them at just the right time, and automatically send new contacts to your lists - no code skills required. 

Sign-up forms

The Engage Widget makes it easy to turn your website traffic into loyal subscribers. Whether you're focused on lead generation or nurturing your community, a well-placed Sign-Up Form can make all the difference. Start with a template, customize it, and go live - all in just a few minutes.

Create a Sign-up form

In the main navigation menu go to Settings > Engage Widget.

Then go to the Sign-Up Forms tab and click Build my first form:

Template selection

Next you can select from a number of templates that we've grouped based on different use cases - Lead Generation, Sales and Conversion, or Engagement and Growth. Choose one that aligns with your needs, or you can choose to create your own form from scratch, by clicking the button in the top right corner.

Template customization

When you select a template you are first prompted to give your form a name and choose the contact list where new subscribers will be added. If you don't have any lists yet, you will be directed to the contact lists page where you can create one. This helps you keep your contacts organized right from the start.

Next you’ll be taken to the form builder, where you can customize the form. Forms are split into 3 individually customisable steps:

1. Attention grabber - this is the first element your recipients will see when they interact with the widget from your website.

2. Data collection - this is where recipients fill in a form to gather the data you are looking to collect. You can choose which information to collect (like name or email) by adding fields. 

3. Confirmation page - this is where you confirm that all required information has been collected and any subsequent actions take place (e.g. displaying a discount code or confirmation that a booking has been made). 

You can switch between these in the left hand menu. You can also customize the appearance to match your brand using the Design tools menu to the right of the page.

You can toggle between mobile and desktop previews by using the switch underneath the preview:

Click Save changes (if you aren't finished customizing the form) or Set active. The form will now appear in your Sign-Up Forms list as an active or draft item.

Configure and publish the sign-up template

When you click Set active, the Publish template dialog appears. This lets you configure an automated confirmation message that subscribers receive immediately after signing up via your widget.

Confirmation message

Choose whether to send an automated SMS to new subscribers:

• Send confirmation message upon sign up — An SMS is sent automatically as soon as someone submits the form. Use this to welcome new subscribers and confirm their opt-in.
• No confirmation message — Subscribers are added silently without receiving an SMS.

Message field

If you selected Send confirmation message upon sign up, you must enter a message - this field is required. Write the SMS that subscribers will receive immediately after signing up.

Placeholders let you personalize the message with data collected from the sign-up form. To insert a placeholder, type $input. followed by the field name. For example, $input.firstname inserts the subscriber's first name. Placeholders appear as inline tags in the editor and are replaced with actual subscriber data when an SMS is sent.

Example: Hey $input.firstname, thanks for signing up! We'll be in touch soon.

Sender ID

Select the phone number the confirmation SMS will be sent from. The dropdown lists all sender IDs available in your account.

Publish the template

Once you are happy with the configuration, click Set active to publish the template and make the widget live. Click Cancel to go back without publishing.

The form will appear in your Sign-Up Forms list as active. New subscribers will start receiving confirmation messages according to your settings.

Embed the Engage widget on your website

To activate the Engage widget, click on the Go Live button.

Once the widget has been published, you can edit it by clicking on the more options (⋮) icon:

Important: You cannot delete a sign-up form if it has been published and the widget status is showing as live. First you need to Click Unpublish. Then click the more options icon (⋮) and you will see a delete option:
 

Copy the Install code from the Install tab:

Then paste it into the HTML of your website before the closing </body> tag. 

Add the widget to your Shopify Store

1. After publishing the widget, copy the generated JavaScript installation code.

2. In your Shopify Admin, go to Online Store > Themes.

3. Click Customize, then open the three-dot menu in the top left and choose Edit Code.

4. Under the Layout section, select theme.liquid.

5. Paste the widget code right before the closing </body> tag.

6. Save your changes. Once saved, the Engage Widget will appear on your Shopify storefront.
    

Add the widget code via Google Tag Manager

Add the widget to your BigCommerce store

Option A: Using Script Manager (recommended)

1. After publishing the widget, copy the generated JavaScript installation code.
2. In your BigCommerce Admin, go to Storefront > Script Manager.
3. Click Create a Script and fill in the details: set Location on page to Footer, Select pages to All Pages, and Script type to Script.
4. Paste your Engage Widget installation code into the Script contents field.
5. Save your changes. Your Engage widget is now live on your BigCommerce storefront.

1. In your BigCommerce Admin, go to Storefront > My Themes.
2. Click Customize on your active theme to open Page Builder.
3. In the left panel, drag an HTML widget from the Basic section onto the page.
4. Paste your Engage Widget installation code into the HTML widget.
5. Save and publish your changes. Your Engage widget is now live on the selected page.

View New Submissions

New subscribers will appear in the selected contact list automatically once a form is submitted.