Streaming live at 10am (PST)

Salesforce-Webflow Integration

#1

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!

#2

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.

1 Like
#3

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

#4

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.

#5

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!!

#6

@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.

#7

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
#8

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!

#9

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.