Integration with WordPress – Contact Form 7 plugin

Websites built with the CMS WordPress platform and using the Contact Form 7 plugin can be easily integrated with SALESmanago. After the integration, all contacts that fill in the form are automatically added as monitored contacts to the specified account in SALESmanago, together with tags and other data.

1.The installation of the CF7 plugin

The first step is to get the CF7 plugin. After logging into the WordPress admin dashboard, go to Plugins → Add new, find Contact Form 7, then choose Install now.

2_add_new

1_contact_form_shop

After a successful installation, the plugin must be turned on.
You should be automatically redirected to Plugins → Installed Plugins.

2. The installation of the CF7-SM integration plugin

The next step is to install the SALESmanago integration plugin in WordPress. Start by going to the main dashboard of WordPress, then go to Plugins → Choose new and choose the option Send a plugin to a server.

2_upload_plugin

3_select_zip_file2

Then select the file path where the CF7 integration plugin files are located.

You can download the plugin here >> http://support.salesmanago.pl/api-developers/

After a file path is selected, choose Install now.

4_installing

4_installing2

If the process was successful, the plugin can be turned on by clicking Activate plugin.

After the installation, the plugin can be found in WordPress Settings, near the bottom of the left menu sidebar, its name is CF7-SM Integration. If the plugin is not shown there, check on the list of installed plugins (Plugins → Installed Plugins) if CF7 integration is active. If not, activate it.

4_location

Next, we will move on to plugin configuration and options of how various information can be sent by contact forms.

3. CF7-SM plugin settings

Settings for this plugin can be found in Settings → CF7-SM Integration. First, provide the required information in the fields as seen below.

The ClientID, APISecret, and Endpoint fields can be found in SALESmanago in Settings → Integration.

APIKey is an automatically generated string of 10 random characters. You do not have to edit this.

5_plugin_settings

If there is no sm-optin checkbox in the contact form, you can select the checkbox here to automatically assign an opt-in status to every contact added through this contact form. In the other field, you can define what detail name will information from the sm-radio element be given when it is loaded into the system.

7_sm_dank_memes

To create a contact form that can send data to SALESmanago you must first provide the following information: Name, Owner, Tags and Tags to be removed and confirm by clicking ADD, then save all settings by clicking Save Changes.

Name → the name of the contact form being created. Make sure the name you put in the integration plugin matches the name of your form in Contact Form 7.

Owner → the email address connected to the SALESmanago account that is to be the owner of contacts (an existing account must be selected)

Tags → put tags that you want to be sent along with the contact to SALESmanago

Tags to be removed → put tags that you want to be deleted along with the contact to SALESmanago

TIP: You can include more than one tag, to do this add them one by one, divided only with commas (without spaces).

4. Adding sm-properties to fields in contact forms 

Integrating contact forms is a process of changing identification fields into ones recognisable to the integration plugin. Detail names for sm-properties fields are used to define what names will be given to details saved from completed contact forms. In other words, details in these fields correspond to details on contact cards in SALESmanago.

For example, ID your-name can be changed to sm-name: [text* sm-name] – this way, the plugin will recognise the field as contact name and send input data to SALESmanago. Repeat this process with the rest of the fields you want to use, then save the modified form.

7_sm_properties

Contact name sm-name

Email address sm-email

Company sm-company

Telephone number sm-phone

Street addresssm-address

Postal code sm-postcode

City sm-city

Country sm-country

FAX number sm-fax

Other than the fields already mentioned in the example earlier, the plugin features five additional sm-properties detail fields, which can be customised to send any type of variable and save them as contact details under a name provided by the user (in the example: sm1, sm2 etc.)

Contact’s details sm-properties1, sm-properties2 sm-properties3, sm-properties4, sm-properties5

Opt-in Checkbox sm-optin | use it as → [ checkbox sm-optin ”Opt-in” ]

Radio button → sm-radio

Examples of special fields being used in practice

Textarea creates a field where contacts can freely type, answer questions and so on, e.g [textarea sm-properties2]

textarea
Select creates a drop-down list that has options to choose from, e.g. [select sm-properties1 ”Cracow” ”Gdansk” ”Wroclaw” ”Warsaw” ]

selectsm

Radio button creates a radio button field that allows the user to choose one of a predefined set of options, e.g. [radio sm-radio ”Yes, count me in” and ”No, thanks” ]

6pl_zajecia_grupowe

5. Creating and configuring a contact form

To create a contact form go to Forms → Add new
Choose a name for the contact form (it should be the same as the name chosen during the integration of CF7 and SALESmanago). Then create the form.

11_edit_contact_form

If you already have a form prepared, go to Forms and select it. An options window will open.

sc22

Save the form. After saving you will receive a shortcode, that should be added to a website or post of your choice in order for the contact form to become active.

ccccc

TIP: Contact form shortcodes can always be found in the Forms tab.

The created contact form code should look similar to this:

10_plugin_code

In the next example contact form (below), the most basic features are in use: text fields, a checkbox, radio buttons and selectors. For the remaining fields, such as [text sm-properties placeholder “First Detail”], ‘text’ is a field identifier, that can put the assigned value e.g. in a return email message. The other words – ‘placeholder’ and ‘first detail’ correspond to the text displayed inside the field.

<label> Your Name (required) [text* sm-name] </label>

<label> Your Email (required)
 [email* sm-email] </label>

<label> Subject
 [text sm-properties1] </label>

<label> Your Message
 [textarea sm-properties2] </label>

<label> Opt-in
[checkbox sm-optin "opt-in"]</label>

[radio sm-radio default:1 "Radio Option 1" "Radio Option 2" "Radio Option 3"]

[select sm-properties3 "Option 1" "Option 2" "Option 3"]

[select sm-country "Poland" "USA" "China"]

[text sm-properties4 placeholder "Fourth Detail"]
[text sm-properties5 placeholder "Fifth Detail"]

[submit "Send"]

A contact form with this code should appear like this:

donut

The final step is to configure the email tab.

13_more_settings

Here you can specify what and to whom a message will be sent when the contact form is filled in.

In the Recipient field, you can type [sm-email] if you want to automatically send an email to contacts who filled in the contact form. You can also put a specific email address there and an email will be sent to that address (this is useful mostly for testing).

In message content, fields from the created contact form can be used. In the example below, the value of sm-properties will appear in the title field (which in this case corresponds to the contact’s city resulting in a title „CF7 message Warsaw” and so on).

TIP: Adding a*sign (asterisk) next to a field causes it to be a required field – a contact will have to fill in all required fields before that contact form can be sent. Adding placeholder will put a default value into the field.

A finished contact form will look like this:

12_contact_form_example

After it is filled in and sent, a notification will appear in SALESmanago:

13pl_example_form_zrobione

to subscribe
our newsletter

Follow us