In This Article

How to Embed a Form onto Your Wix Website (Corvid Developer Mode)

PSAI quote forms can be embedded into your Wix website in multiple ways. For non-technical users, the easiest method of embedding a form is through the Wix admin dashboard. However, if you have access to a web developer, then you can also use Wix's Corvid developer mode to embed a form as a Custom Element.

Using Corvid will give you finer control over the placement of your form, but it is not at all necessary to make your form work. For the vast majority of users, we recommend the simpler method of embedding a form through the Wix admin dashboard. (Learn how to embed a form through the Wix admin dashboard here.)

If you do want to use Wix Corvid developer mode to embed a form as Custom Element, then follow the step-by-step instructions below or provide them directly to your web developer.

Step-by-Step Guide for Embedding a Form with Wix Corvid

Only Wix users on a premium plan (which includes your own domain and removal of Wix ads) will have access to the Custom Element feature, which is required to follow these instructions.

1. Create a New .js File in Code Files

Open the Wix Editor and click the brackets {} on the right to access Code Files. Next to the "custom-elements" folder, click the ellipsis and choose "New .js file." Name your new file "spectrumform.js."

Copy and paste the following code into "spectrumform.js."

class SpectrumForm extends HTMLElement {
connectedCallback() {
let range = document.createRange();
range.setStart(this, 0);
this.appendChild(range.createContextualFragment("#enter your script code from PSAI here#"));
}
}
customElements.define('spectrum-form', SpectrumForm);

In the code block above, you must add your form's unique script code where it says "#enter your script code from PSAI here#". Copy your code snippet from your PSAI Marketing Sources panel and paste it into this spot. Be sure to remove the hashtags from each side.

2. Add a Custom Element Through the Wix Editor

Once your code has been entered as a new .js file, go back to the normal Wix Editor. From the left-hand toolbar, click the plus sign (+) and then "Embed." Then choose "Custom Element."

Wix_Embed_-_New_Custom_Element.png

3. Set the Custom Element Settings

On the Custom Element you've just added, click "Choose Source." From this panel, select the settings described in the list (and shown in the screenshot) below:

  • Select "Corvid file" from the radio group.
  • Choose "spectrumform.js" as the file. (If you've created Corvid files, then you'll have to select the correct one from the drop-down menu.)
  • Make sure the "Tag Name" is "spectrum-form."

Correct_settings_for_custom_element_Wix_Corvid.png

4. Save and Publish Your Site

To make sure your form shows up on your live site, you'll need to republish your Wix website. To do so, click "Save" and then "Publish" in the upper righthand corner of the Wix Editor screen.

Save_and_Publish_Wix_Site.png

You will not be able to see the form from within the Wix Editor. It will only be visible on your live site. Once you've saved your site changes, you should navigate to the page where the form is displayed to make sure it's working.

Troubleshooting 

If you've followed the instructions above and cannot get your form to work, please submit a ticket for Support or use the Help widget in the bottom right-hand corner of the screen. We will be happy to assist you.

If you're in a hurry to get your form added to your website, you can instead use our standard instructions for embedding a form through Wix Tracking Tools. Unlike the Corvid method described above, the Wix admin dashboard does not require input from a professional web developer.