Comment on page
Sign-up forms
Sign-up forms are a valuable tool when it comes to growing your subscriber list. When installed on a website, they provide an easy entry point for customers to quickly sign up to receive marketing information from your business.
You can design sign-up forms in Studio and deploy them on your website or a set of specific web pages in just a few minutes.
Our sign-up forms are designed to make it easy for your customers to opt in on the channel that they want to use.
During the setup process, you can define which installed channels you want to display on the sign-up form, and whether the customer needs to submit a form with their phone number or email (only supported for phone or email identifier-based channels), or scan a QR code and send a message to sign up. When the sign-up form is published, your customers can choose which channel they want to use to sign up.
If the form submission sign-up method has been chosen, customers will always see the form input on either the sign-up form home screen or the channel-specific screen.
Once the customer has submitted the form, they will be added to a List, which has been configured during the setup process.
If the QR code sign-up method has been chosen, customers viewing your sign-up form on a desktop computer or laptop will see both a link and a QR code, which they can scan to open the channel app on their phone. Customers viewing your sign-up form on their mobile will see a link to open their channel of choice on their phone.
Once the customer has scanned the QR code or opened the app, they’ll send a pre-defined message containing explicit content to your business.
Behind the scenes, a flow will run. Their consent will be processed, and the customer’s contact profile will be updated to reflect that they have subscribed to receive marketing messages on that channel.
The flow will then send a confirmation message to your customer, informing them that they have successfully opted in!
Once you’ve collected some sign-ups through your sign-up form, you can start to send them marketing messages by creating message templates in Studio and sending them via Campaigns.
- 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.
Get started by heading over to Studio and creating a new Sign-up Form Project:
- 1.Go to Studio > Create new project.
- 2.Click 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.
In the project editor, you will see a placeholder version of your sign-up form.
In the ‘Overview’ panel on the right-hand side, under the ‘Content’ tab, you will see several compulsory content blocks that you must use when you set up your sign-up form.
The header text is the sign-up form's main message. This is where you can display your main value proposition, such as ‘Sign up and get 10% off’, or ‘Sign up to our newsletter for early access’.
Body
The body text sits below the header text. Use this block to provide additional information about what your customers are signing up for, such as ‘Get 10% off by signing up to our newsletter’.
Use the disclosure block to display compliance information that explains what your customers are signing up for. By displaying this information, you ensure that customers who continue to sign up have given their consent to be contacted. It’s also best practice to use the disclosure block to tell your customers how they can withdraw their consent at any time.
The footer block displays the ‘Powered by MessageBird’ text that is displayed at the bottom of the sign-up form. You can turn this text on or off by clicking the ‘MessageBird footer’ toggle.
Use the launcher block to change the CTA of the button that customers can click to open the sign-up form manually. Choose something short and clear, such as ‘Sign up’, or ‘Get 10% off’.
You can also set the launcher position on the webpage. The options are top left, top right, bottom left, bottom right.
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.
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.
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.
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 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.
Under the Display tab in the Settings panel, you can define where you want the sign-up form to be displayed.
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
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.
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.
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.
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.
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.
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.
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 modified 2mo ago