Integrating Salesforce web-to-lead HTML integration with Wix? [closed]

Question

Remarkably in the year of our lord 2022 this seems to still largely be an open question on the internet and if anything, a great commentary on not using Wix if you're a remotely 'serious' business.

However, I am in the unfortunate position of attempting to connect Salesforce and my Wix forms using the tried and true web to lead HTML approach and I would like to do so without any third party integrations (dont want to pay zapier premium for salesforce integration) and minimal coding

Answer 1

Answering my own question because of how incredibly backwards and unhelpful Wix is about what should be a pretty self-evident use-case.

In my original requirements, I wanted to avoid using third party integrators like Zapier, and it doesn't seem like that's possible.

Instead, I'm solving this problem by jerry rigging a (free) Zapier connection between Wix and Google Sheets, and then using the classic google script approach detailed here that POSTs the google sheet row as a Salesforce Lead record, with the row creation configured as the trigger event for the script.

Note: I did look at wix's own approach to "apps" but this is still invite only and scanning the documentation looked like way more trouble than it was worth.

Mid term is getting off this amateur hour as quickly as possible.

Answer 2

I'm breaking out another answer because as it turns out, there is another approach, that does involve code.

However, I have constructed it such that you should be able to copy and use this code as long as you have an introductory understanding of HTML

1. First, we're going to want to go to Wix's browser based code editor
2. Simply go into edit mode as your normally would
3. then click the "edit as developer" (wording may be different) button on the upper left side of the editor menu - this changes the sidebar and shows the pages as distinct HTML files

Click on the page (or form lightbox element if you have one broken out) and you will see a code editor at the bottom of the page

Your Wix editor screen should look something like this: https://onextrapixel.com/wp-content/uploads/2018/01/wix-code-editor.jpg

Note: this editor and related features may be branded as 'Velo' - as far as I can make out, this is a company/product Wix acquired and now serves as its custom coding layer. It's all part of Wix!

Once you are on the page that contains the form that you wish to setup your "web to lead" process for, scroll down to the code editor, delete any placeholder code

Safety Disclaimer: make sure there is no existing code somebody else on your team may have written - always always always double check with any other potential team members before doing this esp if you are less/non-technical- if youre doing this solo then it's probably fine

Another Note: I tried to flag anything within this code that should be changed to your Salesforce specific configuration with a CAPITALIZED_AND_UNDERSCORED_SYNTAX_LIKE_THIS

// this imports a wix specific module to successfully make the fetch request
import {fetch} from 'wix-fetch';

// this helps prevent premature executions of the code before the page is fully loaded
// I recommend sticking all your own code in this code block
$w.onReady(function () {

    // Write your Javascript code here using the Velo framework API

    // Click "Run", or Preview your site, to execute your code

    // Outcome: on "your-form" submission, a Lead is created in salesforce
    
    // NOTE: we are assuming your form's "id" value is 'form1'
    // change this value if your form id is something else
    $w("#form1").onWixFormSubmit((event) => {

        let fullName = event.fields[0].fieldValue;
        let fullNameArray = fullName.split(" ");
        // create some custom logic here for handling multi-names
        // in this approach, we just assume anything after the first name is some kind of last name
        let lastName = fullNameArray.length == 2 ? fullNameArray[1] : fullNameArray.slice(1, (fullNameArray.length)).join(" ") ;

        let email = event.fields[1].fieldValue;
        let company = event.fields[2].fieldValue;
        let message = event.fields[3].fieldValue;
        // return event.fields;
        console.log({"fullName":fullName,"email":email});

        fetch("https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
          {
            "method": 'post',
            "headers": {"Content-Type": "application/x-www-form-urlencoded"},
            "mode":"no-cors",
            "body": `oid=PASTE_YOUR_SALESFORCE_ORG_ID_HERE&first_name=${fullNameArray[0]}&last_name=${lastName}&email=${email}&company=${company}&description=Use-case: ${message}&rating=Warm&lead_source=WHATEVER_LEAD_SOURCE_VALUE_YOU_WANT_HERE`
          })
          .then( (httpResponse) => {
            if (httpResponse.ok) {
                return httpResponse.json();
            } else {
                // console.log(httpResponse);
                // return Promise.reject("Fetch did not succeed");          
                return Promise.reject(httpResponse);
            }
            } )
            .then( (json) => console.log(json) )
            .catch(err => console.log(err));
    });
});

Easy, right? Save your changes and start testing form submissions in preview mode!

I should be active on this thread, so feel free to reply if you get stuck!