{"id":7000,"date":"2022-05-26T07:56:56","date_gmt":"2022-05-26T07:56:56","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/?post_type=ht_kb&p=7000"},"modified":"2022-11-29T12:43:49","modified_gmt":"2022-11-29T12:43:49","slug":"survey-signup-form-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/survey\/creator\/signupform\/","title":{"rendered":"Survey Signup Form Widget"},"content":{"rendered":"
\n

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

<\/div>\n

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

Step 1 \u2013 Navigate to the Survey Creator<\/h3>\n

Open the Survey Creator to start creating your survey<\/a>.<\/p>\n

<\/div>\n

\"Survey<\/p>\n

Step 2 \u2013 Add a Signup widget to your survey<\/h3>\n

To add a signup form to your survey, drag and drop the Signup widget to the work area.<\/p>\n

<\/div>\n

\"Survey<\/p>\n

<\/div>\n

Step 3 \u2013 Define the customer signup rules<\/h3>\n

Once you drop the widget in the work area, you\u2019ll see the widget settings on the right side.<\/p>\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 sign up via this form to be added to the CRM.<\/p>\n

<\/div>\n

\"Survey<\/p>\n

<\/div>\n

Step 4 \u2013 Style the Signup widget<\/h3>\n

You can edit the appearance of your signup widget using the options available under the Style<\/strong> tab.<\/p>\n

<\/div>\n

\"Survey<\/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

\"Survey<\/p>\n

<\/div>\n
    \n
  • Button Background Color <\/strong>to change the color of the Submit<\/strong> button background<\/li>\n
  • Border Size and Color<\/strong> to change the size and color of the button border (use the sizing bar to adjust the thickness of the border)<\/li>\n
  • Border Style<\/strong> to change the type of button border \u2013 solid, dotted, etc.,<\/li>\n
  • Rounded Corners<\/strong> sizing bar to add rounded corners to the button.<\/li>\n<\/ul>\n
    <\/div>\n

    4.2 Label Text Style<\/h4>\n
    <\/div>\n

    \"Survey<\/p>\n

    <\/div>\n

    Use the options available under the Label Text Style<\/strong> section to edit the font style, color, font family, and font-weight of the field labels.<\/p>\n

    <\/div>\n

    4.3 Button Text Style<\/h4>\n
    <\/div>\n

    \"Survey<\/p>\n

    <\/div>\n

    Use the options available under the Label Text Style<\/strong> section to edit the font style, color, font family, and font-weight of the field labels.<\/p>\n

    <\/div>\n

    4.4 Form Setting<\/h4>\n
    <\/div>\n

    \"Survey<\/p>\n

    <\/div>\n
      \n
    • Button Width<\/strong> to adjust the width of the button<\/li>\n
    • Button Position<\/strong> to change the alignment of the button in the design<\/li>\n
    • Signup Form Width<\/strong> to adjust the width of the signup form<\/li>\n
    • Signup Form Position<\/strong> to change the alignment of the form in the design<\/li>\n
    • Padding<\/strong> to enter the desired padding measurements. Padding refers to the gap between the text entered in the button and the button boundary.<\/li>\n<\/ul>\n
      <\/div>\n

      Click Save <\/strong>and that\u2019s it!<\/p>\n<\/div>\n