Create your own Alexa skill with WordPress and Formidable Forms
Tags: wordpress, alexa, nocode, voicefirst
Published: 2022-07-15 09:22:36

Form builders are among the most popular WordPress plugins. There are dozens of them and with few having millions of active installations. Some of them are simple while others are powerful no-code tools allowing you to build amazing functionalities through them. In this article we will demonstrate how your users can access your forms through Amazon Alexa. For this example we are using a form built with <a href="https://wordpress.org/plugins/formidable/">Formidable Forms</a> plugin (free version).

This article is followed with the attached Convoworks service and Formidable Form definitions which you can import into your system. In the article itself, we will just cover how to enable the skill and point out a few important parts in it.

<h3>Use case - Exercise Log</h3>

Let's say that you have a fitness website where your users can record their own activity and track progress. Now, instead of opening a web browser, your users will be able to save exercise results through Amazon Alexa skill - using voice only.

Besides adding a new log entry, the skill can give you information about the last exercise, it tracks your maximum distance and you are able to delete the last entry. That way we covered most of the form operations you need and it should be rather easy to reuse examples in your own project.

The example form we used for our skill is quite similar to the <a href="https://formidableforms.com/form-templates/exercise-log-form/">Exercise Log Form Template</a> available in the plugin premium version. In our example we skipped date/time and the comment fields. We also changed field keys to be readable (instead of having hash as a key) and we used just plain textual fields.




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4dpkrmo23w6p65dj82p.png)



<h3>Prerequisites</h3>
There are several things to check and set up before you continue. 

<h4>1. Publicly accessible WordPress installation</h4> 
Your server has to be able to accept request from Amazon. If you do not have server on your own, you can use online WordPress testing tools like <a href="https://convoworks.com/create-your-first-amazon-alexa-skill-using-convoworks-wordpress-plugin-and-instawp-no-server-no-registration-required/">InstaWP</a>. The second option is to install a <a href="https://convoworks.com/developing-alexa-skills-locally-through-wordpress-with-ngrok/">tunnel</a> and use your local installation.

<h4>2. Installed Formidable Forms plugin</h4>
Just go to your plugin installer and add Formidable Form Builder plugin.

<h4>3. Convoworks WP - Installed and connected to Alexa</h4>
Please make sure that your Convoworks plugin is linked and that you are able to create Alexa skills. You can find more on that in <a href="https://convoworks.com/docs/publishers/platforms-configuration/amazon-alexa/">Amazon Alexa platform configuration</a> or you can watch our <a href="https://youtu.be/7lx5_ZqazvA">Connect to Amazon and create your first Alexa skill</a> video tutorial. 


<h3>Import and configure Exercise log Alexa skill</h3>

Few steps to import all definitions, eventual configuration and make the skill work.

<h4>1. Import exercise log form into the Formidable Forms</h4>

You can import the attached xml form definition (below). To build this form we used regular text editors for all fields except the <b>Activity</b>, which is a radio selector. When communicating with form builders, we prefer keys over ids. Keys are persistent, while ids will vary from installation to installation. Here are the form and field keys we used in our example. Form is <code>exerciselog</code>, while fields are <code>el_activity</code>, <code>el_calories</code>, <code>el_distance</code>, <code>el_max_pulse</code>, and <code>el_rest_pulse</code>.

<a href="https://convoworks.com/wp-content/uploads/2022/07/exercise-log-form.xml" class="download-now wp-package" style="width:300px;text-align:center; display:inline;" rel="nofollow" download>Formidable Forms  definition (XML)</a>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcsfkm97h66477s71oyu.png)

<h4>2. Create Exercise Log Convoworks service</h4>

Start a new service in Convoworks, and select <strong>Import from file</strong> option. Use the service definition you can download below. If your form uses different keys for form and fields, navigate to the <strong>Variables</strong> view and adjust values. You might also consider adjusting values for the app name (if you changed it) and the test user. We'll cover more on test user usage in <strong>Resolving the current user</strong> section below.

<a href="https://convoworks.com/wp-content/uploads/2022/07/exercise-log.json" class="download-now wp-package" style="width:300px;text-align:center; display:inline;" rel="nofollow" download>Convoworks service definition (JSON)</a>

<h4>3. Connect it to Alexa and enable account linking</h4>

Now go to <strong>Configuration / Amazon Alexa</strong> in Convoworks. Check the <strong>Enable Account Linking for Alexa Skill</strong> option and disable the <strong>Allow users to enable skill without account linking</strong>. Save and wait for a minute until the service is fully built on Amazon. 

<h4>4. Link account in your Alexa app</h4>

Open your <a href="https://alexa.amazon.com">Alexa app</a>, navigate to <strong>Your skills / Dev skills</strong>. Press on the Settings button and link account. By doing it, each request that comes through Alexa to our skill will have an OAuth token, which will enable us to authenticate the current user.

You can find more on it in our <a href="https://convoworks.com/docs/publishers/platforms-configuration/amazon-alexa-account-linking/">Amazon Alexa account linking</a> article.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gq38jiz8uqwb8evgctsj.png)

<h3>Test your new Alexa skill</h3>

If you have an Echo device, invoke the skill and try to use it. You can also try to test it through the <a href="https://developer.amazon.com/alexa/console/ask">ASK console</a>. This way you can "chat" with your skill using their Test view.

You can also use Convoworks Test view which is a handful tool because it allows you to peek into all variables existing during the current request execution.

Few words about skill functionality.

<ul>
	<li>Skill distinguishes between first time and returning users, so some responses are slightly different. To try again first time use, disable and enable skill again.</li>
	<li>You can just open the skill, <em>Alexa, open exercise log</em> and follow the workflow step by step.</li>
	<li>You can add additional command while invoking the skill: <em>Alexa, ask exercise log to record my running exercise</em>. In this case you will automatically be in the new entry workflow.</li>
	<li>Once you have entries, you can get more info on last entry and ability to delete it.</li>
	<li>You can ask for help.</li>
</ul>




<h3>Few significant parts to check</h3>

There are several parts in our service that you should check and get to know how to use. Some parts are related to the form data while others are related to the general features you can use in Convoworks.


<h4>Initializing data</h4>

When the skill starts, we want to do some checks and preload some data that will be required in our workflow. 

Navigate to the <strong>Session start</strong> step in Convoworks editor and check the <strong>Pre-dispatch Flow</strong> section. This flow is executed when skill is started (new session starts). It will be executed no matter if the skill is opened regularly (just invocation name) or with additional command. As you can see we are using it to check the current user, load last entry data and to initiate a new entry. 
Hint: You can click on a fragment name to navigate to its definition.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h6darvk0zc95m5s2niu.png)

<h4>Resolving the current user</h4>

Our service works only for known users, so in the <strong>Resolve user</strong> fragment we are trying to load user data and if it fails, we are ending a session.
<strong>Init current auth user</strong> element will load user data if the account is properly linked. Click on the element and check its help (on right side) for more details.

The if element at the beginning serves to enable ability to test skill even in Convoworks test view, which does not support account linking. We are checking against a predefined device id that comes with the request (<code>admin-chat</code>). If we detect that it is a test view call, we are using the <code>TEST_USER_ID</code> which can be adjusted in the variables view.

Please note that the <code>user_id</code> is stored in the session scope, meaning that it will be available through all subsequent calls.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tqn6n83iu4vgpgxs90l.png)

<h4>Formidable Forms context</h4>

This is the actual adapter that enables us to use the Formidable Forms plugin. By entering and accessing data through a plugin infrastructure (instead of just performing SQL queries), we are ensuring that all plugin actions and filters will be applied. That way if you hook up some additional actions to your Formidable form, they will be triggered through Alexa skill, just as it would through the default web interface.

Here we are setting the id for the context (so that other form elements are able to reference it), with which form we are working and the user id which will be used when creating entries.

Check the component’s help to learn about some Formidable Forms specifics.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbrupdsdbbrdaze67789.png)

<h4>Loading the last entry</h4>

For loading previous entries we are using <strong>Search Form Entries</strong> element. Here we are filtering form entries created by the logged user and making sure that we load just a single, the last one.

In case when there were existing entries, we are performing an additional query to get the maximum distance made in previous exercises. For that we are using <strong>WP DB Element</strong>, a generic component for accessing any WordPress database table. Please note how we can reference the context and call methods on it - in this case to get numeric ids from a given field and form keys.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c102vwvu535zg26lmo73.png)

<h4>Saving the form entry</h4>

Through the conversation workflow we are navigating through several steps and collecting data. Once the user confirms it, we can try to save it. We are doing that on the <strong>Entry - Confirm</strong> step using the <strong>Create Form Entry</strong> element. 

When you are gathering user data through the skill, you have to take care that the data is valid. If it is not it might happen that the entry creation fails due the validation errors. In such a case, <strong>Validation error</strong> flow will be executed.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3qgb05r7xc351hb1ux4.png)


<h4>Deleting the form entry</h4>

Our <strong>Last exercise info</strong> step informs the user that it can delete the last entry. For that we are using the <strong>Delete Form Entry</strong> element, which besides context id of the form plugin implementation, requires the id of the entry which will be deleted.

After the entry is deleted, we will reload the last entry info and read that info back.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6k9h10q8yf5hhyaadn64.png)


<h4>Global and local help</h4>

We have one global, default help which informs the user with basic instruction on how to use skill. This definition can be found in <strong>Service processors</strong> step, which contains processors which should be always considered for the execution.

However, you can find processors which are catching <strong>HelpIntent</strong> on the <strong>Entry . Activity</strong> and <strong>Entry . Pulse</strong> steps. That means that if the user is on one of those two steps, it will trigger this local processor and not the one in service processors.



<hr/>

If you are using WordPress form builders, think of the use case which might be convenient to be used with voice. The one which you or your users would like to access often. The frequent use is ideal for voice. 

This example requires account linking, but you can create a skill which allows public access (e.g. school league results) or you can even ask users to access their Amazon profile data (name, email) and add to the mailing list. Of course, with their permission to do that.

To find more about Convoworks forms package and philosophy behind, at our <a href="https://github.com/zef-dev/convoworks-pckg-forms">Forms package for Convoworks</a> at GitHub.

If you have any problems or questions, drop a comment below or contact us through the contact form.