Integrating Flashy with CF7 Forms / Elementor

When it comes to collecting end user information on your website, forms are your best friend. But did you know you can connect those forms with the Flashy platform and get even more powerful benefits from the user information you’re collecting? 

In this article, we’ll explain how to integrate Flashy with two WordPress plug-ins: CF7 Forms and Elementor. Once you’ve performed these integrations, a contact profile will automatically be created in Flashy for every end user who fills out a form on your site. 

But it gets even better. These integrations enable Flashy to automatically “paint” the user who fills out your form. This means that their activity on your website is tracked and saved on their Flashy profile from the very beginning. You can then use this information to include them in targeted segmentation and automations. Any time the user visits your site, we will be able to identify them immediately and send them tailor-made messaging that moves them toward the sale.

CF7 Forms

CF7 Forms is a plug-in that enables you to create forms and place them anywhere you like on your site. 

Follow these steps to integrate CF7 Forms with Flashy:

  • In WordPress, go into your Flashy plug-in.
  • Scroll down to the Contact Forms section, where there is an option to “create contact profile on CF7 Forms.”
  • You’ll see your previously created forms listed there. Select the one you want to connect with Flashy.
  • In the “Active” dropdown, indicate whether the form you’re linking to is active or not.
  • In the “Flashy” dropdown, select the Flashy list you want to add the contacts to when they fill out the form.
  • The “Map Fields” section is where you will match up CF7 fields with corresponding Flashy contact profile fields. When an end user fills out your CF7 form, the information  will show up in Flashy just as you’ve mapped it.
  • When finished, click the blue “Save contact forms” button.

Elementor

Elementor is a website builder plug-in that gives WordPress users drag-and-drop editing capabilities.

To integrate Elementor with Flashy, follow these steps:

  • Go to Pages in the WordPress left side menu, and select the page that contains the form you want to connect with Flashy.
  • Click on the blue “Edit with Elementor” button.
  • In the drag-and-drop editor on the left hand side, search for “forms.” To use an existing form, simply click on it to edit. To create a new form, drag and drop the form to the desired location on the page. 
  • Choose “Actions After Submit” in the menu. Click on “Add Action” and select Flashy from the dropdown menu (if Flashy is not on the list, it means the Flashy plug-in is not installed in WordPress.
  • Click on “Flashy” and select the Flashy list you want to add the contact to when they fill out the form.
  • To connect Elementor fields with Flashy fields, click on “Form Fields” in the menu. You will see fields such as “Name” and “Email” and you can add additional fields if desired. 
  • Click on a field name, and then click “Advanced.” This is where the Elementor field IDs are located (every field has one). The Elementor IDs need to be matched with Flashy’s contact property keys.
  • Go to your Flashy account, into the Contacts section. 
  • Click on the Settings gear icon in the top right corner to go to Contact Properties. Here you will see a list of all the contact properties and their keys. 
  • Copy and paste each Flashy key you want to match into the corresponding I.D. field in Elementor.
  • When finished, click “Publish.”

Congratulations! Your integrations are complete. Flashy will now automatically collect every piece of information on your users so you can create a long-lasting, profitable relationship with them.