Salesforce Forms on Wix
- idelle
- Jan 4, 2019
- 3 min read
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"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Arial, "Arial", Arial, serif;
background: rgba(255,255,255,.1);
border: none;
border-radius: 4px;
font-size: 15px;
margin: 0;
outline: 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #d1ecf0;
color:#000000;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 15px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
background: #e5f3f5;
}
.form-style-5 select{
-webkit-appearance: menulist-button;
height:35px;
}
.form-style-5 .number {
background: #00A9BA;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 15px 15px 15px 0px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
position: relative;
display: block;
padding: 19px 39px 18px 39px;
color: #FFF;
margin: 0 auto;
background: #00A9BA;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
margin-bottom: 10px;
}
p.label_field_pair {
clear: both;
float: none;
}
p.label_field_pair label {
clear: left;
display: block;
float: left;
text-align: right;
width: 20px;
}
p.label_field_pair input {
clear: right;
float: left;
margin-left: 10px;
width: 22px;
}
</style>
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: the rest of this code below is what Salesforces' Web-to-Lead generator supplies, I did add the <div class="form-style-5"> to apply the styles above to this form below, as well as added the target=“_top” so it would reload the mother browser window instead of just in the iframe. -->
<!-- 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">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <FORM> element to your page. -->
<!-- ---------------------------------------------------------------------- -->
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" target=“_top” method="POST">
<div class="form-style-5">
<input type=hidden name="oid" value="THIS IS GENERATED BY SALESFORCE">
<input type=hidden name="retURL" value="URL OF YOUR CHOICE" target>
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="kimber@impactpointmarketing.com"> -->
<!-- ---------------------------------------------------------------------- -->
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>
<label for="phone">Phone</label><input id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
<input type="submit" name="submit">
</form>
Comments