Please ensure Javascript is enabled for purposes of website accessibility
 

Salesforce Forms on Wix


Salesforce forms in Wix - Styling

As a Wix Designer, I find that many of my clients have form needs to tie into their existing systems, such as Salesforce. But, if you want to put a Salesforce Form on Wix, you may have noticed that they look ugly if used right out of the box. To enhance their look, use CSS styles to beautify the fields and colors.

Plus, as you have to link to a Thank you page upon form submission, I find that this is a frequent problem with third-party embedded forms on Wix websites—the form will reload the thank you page into the Wix HTML iframe instead of the mother page. This is ugly as it loads the entire webpage into the iframe so it will show the menu/header/etc duplicatd. Not ideal.

Did you know there is an easy way to have a Wix HTML iframe form, upon submission, to refresh the whole page with the thank you URL the form sends users to?

You simply need to add a TARGET to the form action code. Below is a snippet of the revised code, in which I simply added: target=“_top” <form action="https://webto.salesforce.com/servlet/servlet.WebToLead..." target=“_top” method="POST">

With this target=“_top” code shown, the form refreshes the whole page when submitted rather in just the iframe.

CSS STYLE EXAMPLE FOR SALESFORCE FORM:

Also, if you're interested, you can use some of the CSS Styling below and customize to make your Salesforce form a lot prettier:

<style type="text/css">

.form-style-5{

max-width: 460px;

padding: 5px 10px;

background: #FFFFFF;

margin: 5px auto;

padding: 5px;

background: #FFFFFF;

border-radius: 8px;

font-family: Arial, "Arial", Arial, serif;

}

.form-style-5 fieldset{

border: none;

}

.form-style-5 legend {

font-size: 1.4em;

margin-bottom: 5px;

}

.form-style-5 label {

display: block;

margin-bottom: 5px;

}

.form-style-5 input[type="text"],

.form-style-5 input[type="date"],

.form-style-5 input[type="datetime"],

.form-style-5 input[type="email"],

.form-style-5 input[type="number"],

.form-style-5 input[type="search"],