Salesforce-Webflow Integration

Hello. I need to integrate Webflow and Salesforce.

Hopefully, this thread can become a full solution for anyone seeking to do the same.

I’ve found a few threads addressing this from different angles, however, I am not sure that they fully explain or resolve how to do this:

The goal is to have a form that connects to Salesforce and Ideally has the same overall functionality of a standard Webflow form (Styling, Success message, etc).

The form I’ll be replacing or modifying is the contact form on my webflow site cocinasocultas.com. Ideally, I’d keep the styling I have or re-apply it.

@vincent , in a couple of posts, you mention figuring some of this out and you describe how to embed a form via the HTML widget. How would this work with styling, Success message, and would there be any other limitations or adjustments to keep in mind? Any tips on the best way to proceed?

@brryant you described how to add hidden form fields and @bartekkustra mentioned there might be issues. Do either of you have any tips on what might work well with Salesforce in this case?

Thanks a bunch to any and all that can chip in and help point us in the right direction!

Depends if you add HTML code to the widget or if you embed a form with an iframe code from the 3rd party site. The former can be styled inside of Webflow (add classes to Webflow elements and style, then replicate the classes in the custom code), the latter requires styling on the 3rd party side.

4 years ago I had to bring Salesforce and Marketo forms to Webflow sites. This was difficult, and I could count on absolutely no efficient help from either Salesforce support or Marketo’s. their absence of dedication was staggering. As a consequence, the results weren’t optimum, and I’m now very careful not to underquote 3rd party forms styling.

2 Likes

Take a look at the webflow to salesforce integrations. You could use a native form designed in webflow.

Thank you, Vincent. Embedding doesn’t sound optimal, and I’d rather avoid anything on the Salesforce side, as I am thoroughly unfamiliar with it. The client owns the account and supplied the code.

Your first option sounds good. To repeat what you said in my own words:
I can take their form code, throw it into an HTML widget, and add the CSS classes into it. I can use the same classes in my current WF form that the Salesforce one will replace.

Would anything else be required to get it to both work and look good (i.e. custom code in the header, or any other action)?

When you did that 4 years ago, which of the 2 approaches did you try? Any preference? The HTML method sounds like you can get the form to work fairly quickly, same for styling once the classes have been styled. Is that right, or am I missing something here?

Vincent thank you so much, for your quick and clear reply! I was out of the office over the weekend and just now read it, very much appreciated.

Thank you webdev. Zapier is definitely something that sounds appealing. I wonder if there are any disadvantages to using it. My client was unfamiliar with it but mentioned they were inclined to use a direct embed.

Is there anything that would work differently if done via Zapier?

Thanks again!!

@Yaco - I work from functional requirements. I don’t have yours and quite honestly producing a functional spec would be consulting work for me. Zapier’s integration with Salesforce is a robust solution. Form is filled → contents stored in webflow - > notification sent → Zapier integration creates new CRM lead in SF. You don’t need to maintain the code with Zapier. They do. Downside? Costs a few bucks monthly. Do I use it? Nope, because I have about many many servers under my control and can do it without them. I will say that Zaps are a-lot cheaper to use than to build.

2 Likes

Thanks for the reply! Alright, I’m brand new to both salesforce and Zapier, but I see what you mean about how it’ll depend on specific requirements, not 1-size-fits-all solution.

Thanks again all, very much appreciated.

Cheers!

1 Like

I did things via the html block, and it seems like everything’s working well, at least visually.
I played around with old and new css classes and was able to replicate my form just fine as well, per @vincent 's suggestion.

My client hasn’t confirmed if the form’s going through though.

Thought I’d ask if you guys know if this bit of code goes on the custom code, header section, which is what the instructions suggests, or if it goes on the html block, along with everything else.

<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: Please add the following <META> element to your page <HEAD>.      -->
<!--  If necessary, please modify the charset parameter to specify the        -->
<!--  character set of your HTML page.                                        -->
<!--  ----------------------------------------------------------------------  -->

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">

Thanks!

META tags are placed within in the HTML HEAD.

Here is a helpful document about custom code in the Webflow University you can use as a reference.

Thank you @webdev , much appreciated. Sorry I had missed your reply.

I see, then it is indeed supposed to be there. It wasn’t affecting functionality so I had dismissed it at first.

Can you please add here an example of the embed HTML code you used from a Salesforce form

@Yaco hello! Did you figure out the styling and integration? I now have to integrate a salesforce page to webflow as well.

Here’s how to generate code that can be used in Webflow to capture leads in Salesforce. With this approach, you can automatically record leads in Salesforce when someone submits a form on your Webflow site.

The ultimate guide for Salesforce form - Free & no code methods in 2022 - Arrify

Hey @YACO (or anyone) - we’re going through the same process atm and are having issues with the success message.

Question: did you use webflow native forms, or did you embed a modified version of the salesforce code and update the style classes?

We can’t get the native form to work, so we’re doing the latter but we can’t display a success message, instead it’s taking the user to a salesforce test url.

Thanks!

If you send forms to Xano and then use Handled Forms to Salesforce you can use Webflow Forms.

Salesforce Handled Forms. See response for Salesforce API endpoint forms.

Form handlers in Salesforce are an alternative to Account Engagement forms. They allow users to integrate custom or third-party forms with Account Engagement to track submission data.

Form handlers allow users to continue using forms they’ve already built. Pardot will then extract the prospect’s information.

To create a form handler, users can:

  1. Click the New Form Handler button in the upper right from the forms list view
  2. Select a success page from the drop-down menu
  3. Enter a URL if Specific URL is chosen

To forward data from a Pardot form handler, users can:

  1. Complete basic information, such as folder, campaign, and name
  2. Click Enable data forwarding to success location
  3. Select Specific URL or Referring URL from the Success Location drop-down

Salesforce also has a web-to-case feature that allows users to create basic customer support forms. Users can:

  1. Enable and set up the web-to-case feature
  2. Generate the web form as HTML code that can be embedded in their website