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.
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?
@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.
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.
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">
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.
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.
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:
Click the New Form Handler button in the upper right from the forms list view
Select a success page from the drop-down menu
Enter a URL if Specific URL is chosen
To forward data from a Pardot form handler, users can:
Complete basic information, such as folder, campaign, and name
Click Enable data forwarding to success location
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:
Enable and set up the web-to-case feature
Generate the web form as HTML code that can be embedded in their website