Embedded forms can be added almost anywhere to your WordPress site. If you have access to a web developer, they can assist you with placing the form based on your website's specific set-up and design. If you do not have a technical staff member, then the easiest way to embed a form on your WordPress site is by downloading the Code Embed plugin.
Please follow the instructions below.
Do you use the Divi page builder plugin for WordPress? Then see our instructions for embedding a form with Divi.
1. Copy Your Form Code from PSAI
Navigate to your PSAI admin and copy the code for the form that you want to embed. You can do this by clicking on "Manage" in the left-hand toolbar, finding the form, and clicking "Copy."
Alternatively, you can also click into the form, go the "Connection" tab, and click "Copy" from there.
2. Go to WordPress and Download the Code Embed Plugin
Log into your WordPress site, click Plugins from the left-hand toolbar, and then click Add New. Use the search bar to find the plugin called "Code Embed."
Click the button for Install Now, and then click Activate when the download is complete.
3. Turn on Custom Fields for the Page
Go to the page on which you'd like your form to be embedded. You can find the page by clicking Pages in the left-hand toolbar.
From that page's settings panel, you'll need to click the checkbox to turn on Custom Fields. The checkbox will be located in a different place based on whether you use the classic version of WordPress or the newer Gutenberg version of WordPress:
Classic WordPress
For classic WordPress, click the tab for Screen Options and check the box for Custom Fields.
Newer/Gutenberg WordPress
In the newer version of WordPress, you'll need to click into the page menu by clicking the three dots in the top right-hand corner of your screen. Then click "Options" in the panel below.
When the Options panel pops up, click the checkbox for "Custom Fields" at the bottom. Then click the button for Enable & Reload to activate the change.
If you have new Wordpress and are unable to navigate to your Options menu as shown above, then you may need to navigate back to your Plugins page and temporarily deactivate your theme builder plugin.
See the screenshot below. Click Deactivate, follow the instructions above, and then come back and reactivate the plugin.
4. Add a Custom Field to the Page
Now that you've turned on custom fields, you'll need to actually add the custom field to the page.
This includes a field for Name (which will be the unique "shortcode" used to identify this form) and a field for Value (which will be the code snippet you've copied from PSAI).
When naming your shortcode, you must begin with the word CODE. The rest of the name should be unique to this form, and there should be no spaces. For example, the following names are valid: CODEpsaiForm or CODEweatherReportForm
5. Insert Your Shortcode Anywhere on the Page
Add the shortcode anywhere on the page where you want the form to display. Be sure to write the shortcode name exactly as you wrote it in the "Name" field, and then surround the name with two sets of brackets on each side: {{}}.
As shown below, your code should read like this on the page:
{{CODEshortcodeNameGoesHere}}
6. Check That the Form Works
To make sure the form appears as expected, navigate to the live version of the page. (From the back-end editor, you will only be able to see the shortcode, not the actual form itself. This is normal.)
If it's working correctly, the form should look something like this.
Troubleshooting an Embedded Form on WordPress
If you're having trouble embedding a form on your WordPress site, you may have a plugin interfering with the process described above. Advanced Custom Fields (ACF) is the most commonly used plugin that is known to cause issues; find instructions on checking for ACF and solving the issue of a missing "Custom Fields" checkbox here.
If you've followed the instructions above and still cannot embed your PSAI form on WordPress, please contact us so that we can assist you. Use this link to submit a Support ticket, or simply open the Help widget in the bottom right-hand corner of your screen.