{"id":5761,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-signup-form-widget\/"},"modified":"2022-06-10T05:16:53","modified_gmt":"2022-06-10T05:16:53","slug":"landing-page-signup-form-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/landing-pages\/builder\/signupform\/","title":{"rendered":"Landing Page Signup Form Widget"},"content":{"rendered":"
\n

The signup form widget <\/strong>helps you add a signup form to the landing page. The data captured via this signup form is auto-updated in the CRM in accordance with MainBrainer’s data import rules.<\/p>\n

<\/div>\n

How to Use a Signup Form Widget in a Landing Page?<\/h2>\n
<\/div>\n

Step 1 – Navigate to the Landing Page Builder<\/h3>\n

Use the Main Menu<\/strong> on the left to create a landing page<\/strong> and subsequently navigate to the Landing Page Builder<\/a>.<\/p>\n

<\/div>\n

Step 2 – Add a Signup widget to your landing page<\/h3>\n

The blank area on the left is the work area<\/strong> where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as Widgets<\/a>.<\/p>\n

In order to add a signup form to your landing page, drag and drop the Signup<\/strong> widget to the work area <\/em><\/strong>(As highlighted in the screenshot below).<\/em><\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Step 3<\/h2>\n

Define the customer signup rules<\/h2>\n

As you drop the Signup form<\/strong> widget into the work area, the widget settings are displayed on the right (as highlighted in the screenshot below).<\/em><\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Use the various options available under the Settings <\/strong>tab to define the customer signup rules<\/a>. That is; the rules based on which you would like the customers who signup via this form to be added to the CRM.<\/p>\n

<\/div>\n

Step 4<\/h2>\n

Style the Signup widget<\/h2>\n

You can edit the appearance of your signup widget by using the options available under the Style <\/strong>tab (as highlighted in the screenshot below).<\/em><\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Herein, the different design options available are:<\/strong><\/p>\n

4.1 Signup Form Font settings and Background color<\/h4>\n
<\/div>\n

\"Landing<\/p>\n

<\/div>\n