Get a demoLog inAcademyDevelopers
More docs

Create a sign-up form

What you’ll need

  • At least one installed channel

  • Access to Studio to design your sign-up form

  • Access to Contacts to configure your subscription list

  • Access to Flows to configure your subscription process

  • Access to your website’s CMS.

Step one: Create a sign-up form project

Get started by heading over to Studio and creating a new Sign-up Form Project:

  1. Go to Sign-up forms.

  2. Click Create new sign-up form.

  3. In the ‘Project name’ field, enter a recognizable name for your sign-up form, such as ‘Homepage WhatsApp Sign-up Form’.

  4. Select the default language that you want to display your sign-up form in from the ‘Default locale’ drop-down.

  5. Click Create Sign-up Form. You’ll be taken to the project editor.

Step two: Design your sign-up form

In the project editor, you will see a placeholder version of your sign-up form.

  1. Click the Styles tab to edit the following elements:

    • Desktop display

    • Mobile display

Channels

Now that you’ve set up your basic content blocks, it’s time to add your channel buttons! These buttons allow your customers to choose which channel they want to use to sign up.

You can add as many channel buttons as you want. For example, you might want to add a WhatsApp button, a Facebook Messenger button, and an SMS button. This gives your customers the option to choose the channel that they use the most.

There are two sign-up methods: Form submission and QR codes. Form submission sign-up methods are only available for email and phone identifier-based channels (e.g. WhatsApp, SMS, Email). QR code sign-up methods are available for all channels.

Setting up channel buttons:

  1. Click + Add channel.

  2. Choose a channel from the drop-down.

  3. If you have multiple versions of a channel installed, choose the one that you want to use from the ‘Select a channel’ drop-down.

  4. Select the sign-up method: Form Submission or QR Code

  5. In the ‘Button label’ field, enter a CTA such as ‘Sign up with WhatsApp’.

During the button setup for Form Submission sign-up methods, you'll need to specify the contact "list" to which contacts will be added upon submission of the form. You will need to have already set up at least one list in Contacts before completing this step.

During the button setup for QR code sign-up methods, you’ll need to enter a prefilled message that your customers will send to opt-in. This message must include the word ‘SUBSCRIBE’, as this is what the subscription flow will check when it runs. Without this keyword, the flow will not mark customers as ‘subscribed’.

If you want to use a channel button, but you haven’t installed a channel yet, you’ll need to do so before you set the button up.

If you’ve added a channel button by mistake, you can remove it by clicking the channel button content block, and then clicking the ‘delete’ icon in the top right-hand corner.

Style tab

Now that your sign-up form content has been set up, you can customize the style of your sign-up form to match your branding, or to catch the eye of your customers.

  1. In the ‘Overview’ panel, click the Style tab.

  2. Choose background color.

  3. Choose title text color.

  4. Choose paragraph text color.

Position tab

Now that your sign-up form style has been set up, you can customize the position of your sign-up form, which sets where it will be displayed on your webpage upon launching.

  1. In the ‘Overview’ panel, click the Position tab.

  2. Choose desktop position: top left, top right, bottom left, bottom right, full page, or modal.

  3. Choose mobile position: full screen or hide.

Feedback tab

In the Feedback tab, you can view any issues with your sign-up form that need to be resolved before you can start to use it.

If there are issues that need to be fixed, a badge will be displayed next to the Feedback tab to tell you how many issues your sign-up form template has.

Settings

Settings is where you can choose how and when your sign-up form is displayed to your customers on your website, and the languages that it is displayed in.

Display tab

Under the Display tab in the Settings panel, you can define where you want the sign-up form to be displayed.

Allowed domains

In the ‘Allowed domains’ section, enter the URL of the domain that you want to display the sign-up form on. Format your domain like this:

https://messagebird.com

If you want to display this sign-up form on more than one domain, for example if you have a subdomain that you want to use, click + Add new domain and enter the additional domain in the new text fiel

Page URL

In the ‘Page URL’ section, you can use the drop down to choose where on the allowed domain you want the sign-up form to be displayed.

Select All to display the sign-up form on every page on the domain.

Select Specific pages to restrict the sign-up form to a specific page, or pages. In the open field that appears beneath, enter the subdirectory where you want the sign-up form to appear. For example:

/omnichannel

To display the sign-up form on more than one page, click + Add new URL and enter additional subdirectories.

Languages

You already set your default language during the initial setup process. If you want to change the default language, or translate your sign-up form into additional languages, click the Languages tab in the Settings panel.

Default language

The default language is the language that the sign-up form will be displayed in unless otherwise specified. If we can’t tell which language to use, the default-language version will be displayed.

If you want to change the default language, you can do so by clicking the ‘Default language’ drop-down and selecting a new language from the list.

Additional languages

To add additional language versions of your sign-up form, click Add new language, then select the language version you want to create from the dropdown.

Next, above the sign-up form preview, click the language drop-down and select your new language from the list.

Click to return to the Editor, then update the content blocks to reflect the new language that you’ve chosen.

Step three: Review and publish your sign-up form project

Now that you’ve built your sign-up form project, you can review how it looks and works by returning to the Editor.

You can switch between different language versions by using the language dropdown in the top right-hand corner of the editor.

See how your sign-up form looks on different devices by using the device picker in the top left-hand side of the editor.

Once you’re happy, click the Publish button in the top right-hand corner of your screen. In the prompt that appears, describe your template version, then click the Publish button.

You can make a note of the installation instructions now, or return to them during step five, once you’ve published your flow.

Step four: Use a flow to handle opt-ins

Using more than one channel with your sign-up form? You’ll need to duplicate the ‘Manage WhatsApp Subscription’ flow, and change the trigger for every channel that you want to use.

Now that you’ve built your sign-up form, you need to set up a flow to handle the opt-ins that the sign-up form collects.

The good news is that we’ve already designed a flow just for this purpose! All you have to do is copy the template flow from your library, customize it to capture opt-ins from your sign-up form, and publish it.

Once published, this flow will also handle unsubscribes. This means that any customer that sends you a message using the word ‘STOP’ will be automatically unsubscribed from receiving marketing messages from you.

  1. Go to Flows > Template flows.

  2. Search for and select the ‘Manage WhatsApp Subscription’ flow.

  3. Click the Save to my library button in the top right-hand corner of your screen.

  4. If you’re configuring it to capture leads from a channel other than WhatsApp, click the WhatsApp Cloud API trigger, then click Select a channel and choose a different channel from the options available.

  5. Make any edits that you want to to the ‘Send plain text message to conversation’ actions in both the ‘Subscribe’ and ‘Unsubscribe’ branches.

  6. Check the setup of your flow, then click Publish draft.

Step five: Add your sign-up form to your website

Now that you’ve created your sign-up form project and set up your subscription flow, you’re ready to add your sign-up form to your website and start collecting subscriptions!

  1. Go to Studio and select your published sign-up form project.

  2. Under the Overview tab, you'll be able to see the installation instructions.

  3. Copy the ‘Script tag’ and paste it into the header of your website.

  4. Copy the ‘HTML snippet’ and paste it into your HTML viewer. That’s it! Your sign-up form should now be visible on your website.

Last updated