How to adapt your Wix web forms using FormKeep
Wix is one of the most popular choices for website building and hosting for a reason. The platform supports a fine degree of control and offers hundreds of templates and applications that increase functionality. That variety of options doesn’t make Wix complicated to use, though. In fact, the drag-and-drop format of its user interface means building a website with Wix is intuitive.
The trade-off of that ease of use, of course, is that not every Wix feature allows full customization, including the default submission forms. Users who need to make lengthy forms or who don’t want to store form submissions with Wix will have to connect their Wix website with a third-party service. Luckily, custom-coded submission forms solve those problems, and FormKeep provides a secure option for data storage and management.
In this blog post, we’ll explain how to use Wix’s website builder to design a submission form, and then you’ll learn how to embed a custom form into a Wix website.
Building forms in Wix
Unlike other web design platforms, Wix offers Artificial Design Intelligence, or Wix ADI, to get new users started. This program asks a few questions about what a user is looking for, and it uses those answers to design a dynamic website that fulfills the user’s needs. From there, the user can make adjustments as needed using the Wix Website Editor.
If you’d rather start from scratch or use one of Wix’s default templates, though, the end result is still stylish and highly customizable. Wix provides easy tools to create contact forms, payment forms, and more. Form presets can be found under the Add menu on the left-hand side of the page.
Wix lets you place page elements anywhere on the page, allowing a finer degree of customization than most website builders. After placing your form, you can add fields as needed. Wix also lets you change what users see when they submit the form, and you can choose whether to save submitted contact information to your Wix contact list. One new Wix feature that isn’t universal to form builders is the ability to create conditional forms. This feature hides or shows fields based on user behavior.
To arrange the fields within your form, use the Layouts icon next to the Add New Fields button.
Wix collects form submissions in the Wix Dashboard, and users can set up email notifications to be alerted when there’s a new submission.
The Design menu lets you match your form to the rest of your website. By clicking the icon that looks like a pen, you can adjust the colors, borders, and opacity of each part of your form. Wix also offers a variety of animations you can choose to bring your website to life. If you want your form to fade in or bounce onto the page, those are found under the Animations menu, next to the Design menu.
To see and edit the mobile layout of your site, click the mobile viewer at the top of the Wix Website Editor.
Although Wix forms are highly customizable, Wix’s free, default plan only lets you add 10 fields to your forms, and all but one of Wix’s payment plans limit how many forms you can add to your website. If you need more from your website, you can code and embed your own forms.
Customizing Wix forms with HTML
If you want to embed your own form in a Wix website, you can do that by adding a custom Embedded Element from the Add menu. Choose the HTML iFrame, place it on the page, and paste your code inside. It should look something like this:
Here’s the code used to create a form that looks like that, including styling:
.myss-form-container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 50%;
}
.myss-title {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 2em;
font-weight: bold;
letter-spacing: .05em;
padding-bottom: 1em;
}
.myss-form-label {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.42857143;
color: #2c3e50;
box-sizing: border-box;
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
.myss-form-input {
box-sizing: border-box;
font: inherit;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 100%;
height: 45px;
padding: 10px 15px;
font-size: 15px;
color: #2c3e50;
background-color: #ffffff;
border: 1px solid #dce4ec;
border-radius: 4px;
border-width: 2px;
}
.myss-textarea {
font: inherit;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
box-sizing: border-box;
width: 100%;
padding: 10px 15px;
font-size: 15px;
color: #2c3e50;
background-color: #ffffff;
background-image: none;
border: 1px solid #dce4ec;
border-radius: 4px;
border-width: 2px;
height: auto;
}
.myss-form-button {
box-sizing: border-box;
margin: 0;
text-align: center;
border: 1px solid transparent;
white-space: nowrap;
padding: 10px 15px;
font-size: 15px;
border-radius: 4px;
color: #ffffff;
background-color: #2c3e50;
border-color: #2c3e50;
display: block;
border-width: 2px;
width: 100%;
margin-top: 1em;
}
<div class="myss-title">Register Now</div>
<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST" target="_blank">
<div class='myss-form-field'><label class='myss-form-label'>First Name</label>
<div class="myss-form-input-container">
<input class="myss-form-input" type="text" name="first_name" placeholder="John">
</div>
</div>
<div class='myss-form-field'><label class='myss-form-label'>Last Name</label>
<div class="myss-form-input-container">
<input class="myss-form-input" type="text" name="last_name" placeholder="Smith">
</div>
</div>
<div class='myss-form-field'><label class='myss-form-label'>Email</label>
<div class="myss-form-input-container">
<input class="myss-form-input" type="email" name="email" placeholder="john@example.com">
</div>
</div>
<div class='myss-form-field'><label class='myss-form-label'>Subject</label>
<div class="myss-form-input-container">
<textarea class="myss-textarea" name="subject" placeholder="Reason for contacting us" rows="5"></textarea>
</div>
</div>
<button class="myss-form-button" type="submit">REGISTER</button>
</form>
</div>
Wix can’t integrate custom forms with the Wix Dashboard, so submissions to custom forms have to be stored somewhere else. FormKeep offers a storage and management solution that includes:
- Submission notifications
- Spam protection
- Integration with Google Sheets, Slack, Salesforce, and more
FormKeep for custom form management
FormKeep makes it easy to link your account to forms built using HTML. Every FormKeep account comes with a unique token that can be plugged into this line of code from the above example:
<form action="https://formkeep.com/f/exampletoken"
accept-charset="UTF-8"
enctype="multipart/form-data"
method="POST">
You can find your own token under the FormKeep setup tab. Inserting the token in place of “exampletoken” will send submissions to your FormKeep account, where it will be stored in a secure cloud database.
Using FormKeep to store and manage your submissions comes with many benefits, including:
- Google reCAPTCHA and Field Validations for spam protection. As an administrator, you can assess submissions and reject fraudulent ones.
- Zapier integration. Zapier can connect your forms to thousands of applications.
- Secure data sharing. You choose which and how many email addresses to share submissions with. Those users can see the submitted data without needing to access your FormKeep or Wix accounts.
- Notification design: FormKeep lets you choose the format in which your data is presented to you, and you can decide whether or not to see every form field in your FormKeep notifications.
You can also use FormKeep’s Form Designer to build a form. To embed a FormKeep form in Wix, all you have to do is publish the form and copy the HTML from the Embed section of the Setup tab. Then you can paste it into an HTML iFrame on your Wix website like you would any other code.
Support your forms with FormKeep
FormKeep lets you integrate your forms with Google Sheets for information management and Slack for straightforward notifications of new submissions. You can also connect your forms to other applications using Zapier, opening up a range of e-commerce and project management options.
Wix is a great place to start for those new to website building, or for experienced web designers looking for a simple hosting experience. Wix’s optional applications can enhance and customize your website, and FormKeep offers the tools to improve the security and functionality of your embedded web forms.
You can find example forms and code samples here. Try FormKeep to fulfill your Wix website’s potential, and feel free to contact the developer team at support@formkeep.com anytime.