Knowledge Base > Pages and forms > Create signup forms (Embedded in a website)

in Pages and forms Tags: dynamic pagespagesSignup form

Signup forms are very valuable in order to attract new subscribers and grow contacts list.
They can be used for generating leads, collecting emails for a newsletter, register for an event or webinar and more.

With inwise you can create and edit signup forms and embed them on your site easily and quickly.

Steps for creation & analysis a sign up form :

  1. Design a signup form
  2. Design a thank you page
  3. Settings & Publication
  4. Analytics

1. Design a signup form

On the main login screen, click on the “Pages and forms” tab in the main menu bar on the left (1).
On the “Common Actions” pane, click on the ”Create Signup Form” button (2).
You can also select “Create Signup Form” directly from the main menu bar.

Create Signup form

Choose your preferred template for your signup form.
There are a variety of templates, you can choose a basic template and design it yourself, or select a designed template and customize it to your brand.

templates Signup form

The signup form editor will open. You can edit the content, embed images and design the signup form.

  1. Clicking on the plus icon – will open the menu “adding elements”. You can add elements by drag&drop to the template.
  2. Clicking on the pencil icon – will open the menu “edit page”. You can change the design for the entire signup form or just for a specific area, by changing the external or internal background color, setting a background image and formatting the frame.

The basis of the signup form is the information fields. These are the details that you want to know about your site visitors and ask them to fill in the form(first name, phone, email and more). How to edit and update the form? You can find in our guide creating and editing a form

Edit Signup form

Add elements :

  1. Text element – you can add, edit and design the text. Clicking on the text will open the formatting menu through which you can select the font, size, color, and so on.
    * Use simple & understandable content.
  2. Image element – you can upload pictures from your device or add it from the media area in your account.
  3. Break line element – to create visual separation.
  4. Article element – you can add a short article with a button link and a picture.
    A modular element that allows you to add a summary for an article with a link button to continue reading and combining an image.
    To switch sides between the text and image, click on “Block Design” (1), select “Change side” (2).
    You can also define the proportion of text size to image (3).Article element
  5. Links menu – you can add links menu to products, services, etc. Edit the addresses by copy-past the URL address.
  6. Button element – you can add a button with a link to Website, purchasing or registration.
    To edit the button, click on it, in the pane that opens you can change the text (2), font and size. Update the link address to which the button leads (3). Select whether it will lead to URL or to another landing page on inwise (4). You can also select the background color of the button, its radius (5) and its align(6).
    * The button should be noticeable with the appropriate color. Make sure it will look different from the rest of the content (for example, you can design it like a pushbutton).
    buttons element
  7. Follow us element – You can add links to your business page or profile on different social networks.
    To edit the icons, click on the pencil icon “Edit elements” (1), select the designs for the icon buttons by clicking on the “Icon Theme” (2).
    To change the links of the icons, click “Edit Icons” (3). Clicking on each of the social networks icon and darkness its – will remove it. Clicking on each icon and turn it on – will activate it.
    Entered by copy-paste the address of each icon in its field.
    Follow us element
  8. Share – This option allows your contacts to share on their social networks.
  9. Gallery element – Combine 2 pictures one next to the other.
  10. HTML code element – Add HTML code to your signup form.
  11. PayPal element – if you have a PayPal account, you can add a link for the item you want to sell.
  12. Video – you can add a YouTube or Vimeo video by Copy-Paste its link.
    You can replace the displayed image and update the alternate text.
    * Notice –  there isn’t arrow on the video image, so there is no sign of a click to play. It is recommended to update the sentence title to encourage clicking on the image to watch the video.
  13. Timer – You can add a live reverse counter element. To edit the timer, click on it, in the pane that opens you can update the target date (1) and target time (2). You can remove the day count and display only a stopwatch by checking the “Remove days” box (3). You can also edit the background color, font, clock configuration style: square, round (4) and set the clock width (5).
    Timer editor
  14. Form – this is an important element. The visitor leaves his details in the form, according to the information fields you choose (name, email, phone number, etc). This information will allow you to continue communicating directly and personally with your contacts.
  15. Saved elements – You can save elements you have designed and use them on your next signup form. Click on the element that you want to save, in the menu that opens, click on the “Add to saved elements” icon icon-saved-elements.  Enter the element name and save.
    To add a saved element, drag it from the “Add element” menu to the relevant position in the template.
  16. Add area – you can change the template structure and adapt it to your design by dragging an appropriate area. at any stage of editing the signup form you can divide the template into single, two or three columns.

Click “Next” and forward it to Thank You page.

Registreation form editor

Edit signup form menu:

Clicking on the pencil icon (2) will open the design menu, though you can influence the design of the entire form:

  1. Change outer background color, set the color and the opacity, select a background image from the media area.
  2. Change inner background color, set color and opacity, select background image from the media area.
  3. Document Width – Set the signup form display width on the desktop, up to 800 pixels.
  4. Border – Defines the color, thickness and style.
    Pencil icon - edit design

At the top of the editor screen, there are 3 buttons:

Save – Clicking on this button will save the signup form changes.
Clicking the small arrow next to this button will allow you to restore recent saved versions or save the formatting as a template in your account for future use.
Preview – signup form preview on mobile and desktop.

Signup form buttons

 2. Design thank you page

After filling out the signup form, the contact is directed to the thank you page.
By clicking on the text, the design pane will open, through it, you can edit the text.
Finally, click on  “Save” or “Continue” button

Registreation form thank you page

      

     3. Settings & Publication 

Signup form name (1)- type the name of the signup form. It’s only for internal use.
You can change the width and height of the form, in order to adjust it to your site (2).

Settings and publish signup form

More setting:

Registered number limitation (4)- The system allows you to limit the number of contacts registered in the form (for conference/event), after reaching the limit you set, the contacts will be notified with a relevant update/notice.
Sync to contact (5) – you can automatically expand the distribution list and increase the number of leads by automatically importing all the contacts who filled out the details in the form, directly to your contact list in the inwise system, or to a new group.
Checking the option “Update existing contacts” (slows down the import process) will update the data for contacts that have already in the account.
Signup form - more settinFirst step – Mapping fields (6) – Make sure that the information field in the system is the same as the information field in the form, in order to allow the system to automatically link the information entered by the visitor in the form to the correct field in the system. So that the visitor’s first name will be updated in the first name field in the system and not in the email field. If the system does not detect the fields automatically, you can manually set the field name to which the column is mapped in the system.
The second step – Choose groups (7) – choose a group from your list of groups, or create a new one.

Mapping fieldsAfter finishing, click “Publish”.Signup form-was-successfully-created

The signup form is now appearing in the”Pages and Forms” list.
An active signup form is a form that you can publish on your website (1).
Duplicate (2) – Allows you to duplicate the signup form you have already designed so that you can use its design or content again without re-creating.
Pause (3) – While the form is paused, its publication will be stopped and you can edit it.
Statistics (4) – View statistics (subscriber details). More details in the next step.

Pages and forms

  4. Statistics

In the graph at the top of the screen, you can see the amount of the form exposure (the green line), and the number of the time it’s filled out (the gray line) per month.

Statistics signup form

In the middle of the screen, you can see the page statistics:

  • The signup name and number.
  • Views – total views on the form. If a contact viewed the form 3 times, he will count as 3 views.
  • Unique views – each contact is counted once, even if he viewed the form multiple times.
  • Survey filled -total contacts who actually filled out the form. If the same contact filled out the form 3 times, he will count as 3 times.
  • Survey filled unique – each contact is counted once, even if he filled out the form several times

While clicking the rows, you can see the contact’s details.

What can be done now?

You published the signup form on your website, contacts viewed it and some even filled it out, what can be done now?
Start creating communication and a personal relationship with your new contacts, for example, send them a “welcome” email.
How do you do that? A guide to creating and designing an email campaign.