Integrating Wix with Salesforce Marketing Cloud

By Naveen Murugan,

Recently, Wix garnered lot of attention on the web development platform for non-coders like me, with its easy, drag and drop tools! But, I also wondered how the users of the cloud-based web development platform manage to keep the subscribers engaged?

In this blog, I will show how we can effectively utilize the Salesforce Marketing Cloud page by integrating it with Wix.

Wix may have it’s own email marketing and automation features that are applicable to some extent. But, Salesforce Marketing Cloud certainly has much more potential when it comes to engaging with the subscribers, maintaining records and automation.

Let’s get started with integration process on Marketing Cloud with below steps:

1, Create a data extension in the SFMC to store the values of subscribers.

3, Add fields like Email Address, Data of Subscriber joined and any other field which is necessary.

3, Go to SFMC > Cloud Page > Create a Cloud Page.

4, Paste the below sample HTML code with AMPscript in your cloud page. Feel free to modify as per your requirement.

5, Click Save and Publish the cloud page and copy the URL of cloud page.

%%[ var @contactform,@Email, @formEmpty 
set @contactform = "false" 
set @formEmpty = "false" 
if RequestParameter("submitted") == "submitted" 
then 
set @contactform = "True" 
Set @Email = RequestParameter("emailaddress") 
IF NOT EMPTY(RequestParameter("emailaddress")) 
THEN Set @UpsertData = UpsertDE('Contact_form','1','emailaddress',@Email,'submitteddate',NOW()) Else Set @formEmpty = "True" ENDIF 
ENDIF]%%
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
   body {font-family: Arial, Helvetica, sans-serif;}
   * {box-sizing: border-box;}
   input[type=text], select, textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
   margin-top: 6px;
   margin-bottom: 16px;
   resize: vertical;
   }
   input[type=submit] {
   background-color: #4CAF50;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   }
   input[type=submit]:hover {
   background-color: #45a049;
   }
   .container {
   border-radius: 5px;
   background-color: #ffffff;
   padding: 20px;
   height: auto !important;
   }
</style>
<div class="container">
   <form action="%%=RequestParameter('PAGEURL')=%%" method="POST">
      <label for="fname">Email Address</label> <input id="fname" name="emailaddress" placeholder="Your email address.." type="text"> <input type="submit" value="Submit">&nbsp; <input id="submitted" name="submitted" type="hidden" value="submitted">%%[ IF @contactform == "true" and @formEmpty == "false" then ]%%<br>
      <br>
      Thanks for Subscribing %%[ ENDIF ]%% %%[ IF @contactform == "true" and @formEmpty == "true" then ]%%<br>
      <br>
      Your Email Address is Empty %%[ ENDIF ]%%
   </form>
</div>

6, Make sure the name field in the HTML matches what is in the field in data extension. You can add as many input fields as required.

Quick Insights on AMPscript Functions:

· UpsertDE function is used to upsert a value (which will be entering in the form) into the data extension.

· RequestParamter is used to capture the HTML values post the submission.

· We are set up the variables with True or False to hide and show up the values.

Set up In Wix:

· Now go to your Wix editor, click on the + icon > More > Embeds > HTML Iframe.

· Then click and paste the cloud page URL.

Demo:

1, You can start with entering your email address in the below form. The results automatically get captured in the Salesforce Marketing Cloud Data extension.

2, If you enter a blank value and hit submit, then AMPscript will identify that the value is empty and notify that the email is empty.

3, All these get internally executed without refreshing the whole page because it is an i-frame.

If you want to receive an email immediately post the submission of form, you can choose the Triggered emails in the same cloud page. If you have more question on this, you can surely read up my next blog on how you send Triggered emails via AMPscript.

By following this method, you can add Salesforce marketing cloud forms (cloud page) into any 3rd party websites.

Hope you found the blog useful and do share your thoughts in the comment section below. Happy Learning!