Creating and displaying a form in your website with Connectif

 

Questo articolo è attualmente disponibile in inglese e spagnolo. Puoi fare riferimento a questa documentazione mentre arriva nella tua lingua.

In this article, you will learn how to add a sign-up or registration form to your web content to display it in your eCommerce via a workflow.

 

Implementation time: 20 min.
Difficulty: Low.
When to use it?: When you need to capture contacts on your website.

STEP 1: Creating the content and the form

(This section explains how to create the Web Content, in this case, a popup, that will contain the registration form).

1. Log in to your Connectif account.

2. Go to "Content > Web content" and click on  Create new content.

3. Select the type of content in which you will insert the form that best suits your strategy.

  

You can insert a form in any of the Connectif Web Contents available.

Insert a sign-up form on your website - 1-min.png

  

In our example, we have chosen a popup web content, but this process would be suitable for any other type of content.

4. Within the Content Editor, click on the Components tab and go to the Forms and Surveys section. Add the form elements you want and edit them to give them the text and design you want; you can also add variables. In this example, the following elements have been added:

  • An email field to collect the contact's email address.
  • A text field to collect the contact's name. 
  • A "submit" button to send the form.

Insert a sign-up form on your website - 2-min.png

5. Click on the Form tab and, in the Form Type section, choose "Event" or "Subscription" from the dropdown, as appropriate.

 

In Connectif, it is important to differentiate between sign-up forms and registration forms, as they serve different functions:

- Sign-up form: Used to subscribe new contacts to a specific list, such as a newsletter. It does not require the contact to have a previous account on your site.
- Registration form: Used to create a user account on your site. Generally includes more information fields and may require email validation.

Insert a sign-up form on your website - 3-min.png

6. In the Email Identifierdropdown, choose the "Email" field that you have added to your form.

7. (Optional). Check the box Subscribe the contact to the newsletter when submitting the form to add the contacts who complete it to your newsletter lists, if applicable.

Insert a sign-up form on your website - 4-min.png

8. Once your content is configured, click on Save to save it.

 

STEP 2: Configuring the workflow to display the content

(This section explains how to create the workflow that will display the web content containing the form on your site).

9. From the left sidebar, go to the Workflows section, click on  Create new workflow and select  Create blank workflow.

10. Click on  (Edit node settings) for the “Start” node.

11. In Select a restriction, check "All my list" and, in the dropdown, choose "Contacts without email".

12. In Select the data source, check "All existing and new".

13. Click on  Apply.

Insert a sign-up form on your website - 5-min.png

14. Add an action node of type "On page visit" to react when a contact without an email visits a page on the website. 

Insert a sign-up form on your website - 6-min.png

15. Go to the settings of the "On page visit" node and choose which pages you want the popup with the registration form to appear on. 

 

If you want to place the form only on a specific URL, you should check the option Any of the following pages exactly and indicate the URL of the landing page where the form should be displayed, as shown in the example.

Insert a sign-up form on your website - 7-min.png

16. In the Limitations tab of the "On page visit" node, click on the "Disable after firing" checkbox to uncheck it. Click Apply to save the configuration changes.

Insert a sign-up form on your website - 8-min.png

17. Add an action node of type "Send web content", which will be responsible for displaying the form you just created in Step 1.

Insert a sign-up form on your website - 9-min.png

18. Go to the settings of the "Send web content" node and choose the content you just created. 

Insert a sign-up form on your website - 10-min.png

19. Click on Next to configure how the content will be displayed.

 

If you need more information on how to insert web content on your page, take a look at this article.

If you need more information on how to insert an inline on your page, take a look at this article

20. (Optional). If the content includes variables, a next step will appear to associate them, as shown in the image.

Insert a sign-up form on your website - 11-min.png

 

In this example, the form does not contain variables.

21. Click Apply to save the node configuration.

22. In the Workflow Editor, activate your flow so that the form is available on your website.

 

 

 Success!
Your sign-up form is integrated into your website.


Keep learning!

To take full advantage of your Connectif account, we recommend continuing with the following articles:

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 0 su 0