How You Can Do More With Weebly Forms

Introduction

Weebly is a wonderful website and ecommerce service that hosts millions of businesses online. Weebly tools make it easy to build a professional, mobile-optimized site and grow your business with integrated marketing and advanced analytics.

In this blog, we will cover some basics about how to add a basic form to a Weebly site and, also, how to expand Weebly’s native form capabilities with FormKeep.

Basic Forms In Weebly

Though most users build static web pages on Weebly; the service does offer a simple form way to add a form to a web page. To add a simple Newsletter Sign-Up Form or Contact Form all you have to do is drag the corresponding icon from Build menu (i.e., Build/Basic/Contact Form or Build/Basic/Newsletter Form) as shown below:

html form, weebly
Weebly Form Actions

In this example, we have added a simple Contact Form to one of Weebly’s standard templates (highlighted in red). This form includes name, email and contact fields.

html form, weebly form, contact form
Simple Weebly Contact Form

Once the form is in place, there are a number of configurable options. Click on the form element within the Weebly designer and then click “Form Options” to reveal the Form Options panel. Here you will have options for configuring the email that will receive data from the form, Google Captcha spam protection, opt-in and some other settings as you can see below:

html form, weebly form, contact form
Weebly Form Options

Once your form set up and you’ve pushed your website into production, your form can begin receiving data. When users submit information via the form you created you will receive an email that notifies you and contains the form data. You can also log into Weebly and access the data by clicking on the form element in the page designer and selecting “View Entries”. Here’s what the data looks like when you access it via the Weebly console.

html forms, weebly forms, form data, contact form
Weebly Form Data

Weebly’s built-in form builder is very powerful and simple to use. It makes form building easy for many users. However, some users are looking for opportunities to do even more with the Weebly forms. We will explore some of these opportunities in the next two sections.

Controlling The Look And Feel Of Your Forms In Weebly

As powerful as the Weebly form builder is for most users, some users want to exert fine grain control over the look and feel of their form. For example, the default form in the example above is a bit hard to see against the background used in the selected template. How can a designer make this form pop out against the background?

html form, weebly form, form design
Form Enhancement Opportunities

Weebly does not offer fine grain control of these elements in the standard form options area. However, Weebly does offer a relatively simple way for developers and web designers to control the look and feel of their form element. Rather than using the included form builder, designers who would like more control can use the Embed Code functionality within Weebly. Rather than dragging the Contact Form or Newsletter Form icons onto your web page, simply drag the Embed Code icon as shown.

html form, weebly form, custom form
Embed Code and Custom HTML Form


With this embedded control in place, the designer or developer can now custom-craft an HTML form to fit their needs and design preferences. In this example, we used the following HTML to design an enhanced form for this template:

See the Pen Weebly HTML Form Example by FormKeep (@formkeep-samples) on CodePen.

The result, when this code is placed in the Edit Custom HTML widget within Weebly is a form with different styling than the native form tool would normally allow. In this case, the form is formatted with a background that allows the form to become more visible against the template background. See the comparison below.

html form, weebly form, styled form, form comparison
Weebly Form Comparison

Obviously, when using the Custom HTML capability within Weebly, the design possibilities are bounded only by your imagination and design sense.

One thing to keep in mind if you use the Custom HTML capability is that you will have to designate a place for your form data to POST information for storage and processing. Weebly normally handles this for you. However, FormKeep makes this easy. You can learn more about how to do this at the bottom of this article. Read more below or click here to skip directly to the appropriate section.

Enhancing Form Data Management and Integration in Weebly

As we discussed earlier, Weebly handles your form data by default in two ways: 1) an email is sent to a designated email address each time a form is completed with the data from that form and 2) the data is accessible via Weebly’s interface when an administrator selects “View Entries” in the form widget.

For many applications, this is adequate. However, if any of the following apply to you then you may be looking for some more advanced data handling capabilities:

  • Lots of Data:
    If you are receiving a lot of data in each form or many form submissions, it may not be convenient and manageable to receive all of the information in an email.
  • Data Routing:
    If you want to route the data to more than one person, it may not be convenient or secure to share the log in credentials to Weebly or route the data through a single email address.
  • Integration with Other Applications:
    If you would like to pass your data on to another system you will need a point of integration that is not available in a standard Weebly form.
  • Excess Spam:
    Google Captcha will reduce but not eliminate spam. Or, you may decide not to use Google Captcha. If you don’t want to flood your email inbox with spam submissions, you may want a data management rather than email solution for handling forms.
  • Field Validation:
    If you would like to use custom field validation logic, you can do that with a custom HTML form.
  • Many Forms On Separate Pages:
    If you have a long form or multiple forms broken across several pages, you may wish to view all the data in one place.

In each of these cases (and many others) you may benefit from using a form backend like FormKeep alongside your Weebly site. With FormKeep, instead of routing your form data to Weebly or to email, your data will be stored, secured and accessible in the cloud. From there, you will have a variety of tools to help you manage your form data and route it in a variety of different ways.

One popular way that designers and developers use FormKeep is using WebHooks or integration via Zapier to feed data to other applications like Hubspot, Constant Contact, Google Gmail, Salesforce, Slack or Mail Chimp (and thousands of others). You can search for over a thousand different integration points between FormKeep and other applications on the Zapier web site (pictured below):

html forms, formkeep integrations, zapier, zapier integrations
FormKeep Integrations – Zapier

In order to take advantage of advanced data routing capabilities available in FormKeep you will have to place your own custom form into your Weebly page and then point that form to FormKeep.

You can read more about how to create a Custom HTML form within Weebly at the top of this page (Click Here)

Enhancing Weebly Forms with FormKeep

One thing to keep in mind if you use the Custom HTML capability within Weebly is that you will have to designate a place for your form data to POST information for storage and processing. Normally, Weebly handles this for you with their standard form tools. However, fear not! This is where FormKeep makes life easy.

Let’s review an excerpt from the form code from the CodePen example above. At the beginning of the form you will notice this syntax (Click Here to View Above):

<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST" target="_blank" id="weeblyform">

All you need to do is update the action attribute in your form. Your form tag should look like the example above paying careful attention to exampletoken to the token provided to you within FormKeep (Trial or Paid account). You can create one of these tokens for free by signing up for a free trial account at FormKeep Free Trial.

Once you’ve created your HTML form and configured the action attribute, the data will be posted directly to your FormKeep account. From there, you have the option to configure many settings such as spam suppression, thank you pages and re-directs as well as integrate your form with thousands of other applications via Zapier.

You can experiment with this in the FormKeep demo environment in CodePen by clicking here.

If you would like help getting FormKeep setup with Weebly, feel free to reach out to our friendly team at support@formkeep.com.

 

Build a Website and Add a Form

Are you looking to launch a new website?

Not sure where to start?

Or looking for some creative inspiration before you dig in?

Check out this article about 15 Addicting Web Design Guides To Get You Hooked.

Sooner or later, after you dig in, you’ll likely reach a point that you want to collect data on your static website. Maybe it’s a lead collection form or a registration form or even an order form. When you reach this point, you’ll learn that creating a form is relatively easy. You can learn most of what you need to know from w3schools.

However, things get a little more difficult when you start working on how to collect data from the form. Do you want the form submission to trigger an email, store data in the could or push data to another system? There are all kinds things you might want to do with a completed webform.

Luckily, FormKeep makes it easy to connect the webforms you create with a hosted database in the cloud to store your data (a form backend) and, even, connect that data to thousands of applications via Zapier.

All you need to do is update the action attribute. Your form tag should look like this:

<form accept-charset="UTF-8" action="https://formkeep.com/f/your-token-here" method="POST">

Dive right in on your projects and if you have any questions about how to store data from your webforms, contact us at https://www.formkeep.com

Your Form Design, Our Backend

One of the reasons that FormKeep is so popular with web developers and designers is that it’s easy to style your form exactly the way you want. Unlike alternatives that require you to use their form templates and layouts, FormKeep makes it easy to layout and style your form exactly the way you want without worrying about building a backend to receive your form data.

Material Design Screenshot
Learn About Clean Form Layout

Modern web design and form layout principles are always changing and, of course, design preferences vary depending on the developer, designer or target user. Material Design’s website https://material.io offers a great overview of how to style an impactful HTML form. Check out their HTML design overview by clicking here.

To learn more about how to capture your form data on the backend in a database or connect it with another application or receive your form data in email, check out formkeep.com. Once you set up a FormKeep free trial account, it’s easy to connect your form with FormKeep.

All you need to do is update the action attribute. Your form tag should look like this:

<form accept-charset="UTF-8" action="https://formkeep.com/f/your-token-here" method="POST">

Announcing Shubox.io and File Upload Support

 

We’re excited to share our new partnership with Shubox.io!

Many of our customers ask us how to upload images or pdfs from their html forms. They’re looking to capture resumes or pictures of problems with their products. Uploading samples of their portfolio or even small videos for contests.

Managing file uploads across different browsers and user bandwidths limits while adhering to your site’s brand and styling is a challenging task and sometimes causes these projects to be put off until there’s more ‘free time’ from the developer team.

Fortunately there’s a great solution out there that you can have up and running in fifteen minutes!

We’ve looked closely at the many options available and we’ve partnered with Shubox.io. They’ve got a great experience right out of the box, but allows for full control over the behavior if you need it. They upload the files directly to your own Amazon S3 storage so you have direct control over the files.

Shubox.io does a lot more than just provide an amazing user experience for your customers to upload files, it also allows you to transform the images. Resizing, rotating and cleaning up the meta-data are all possible through the service. Great stuff if you need extra processing or need to connect these files to additional workflows in your business.

Check out this recent blog post with all the setup and information about how to get things setup and working with FormKeep.

If you sign up through FormKeep you’ll get a special deal as well, so make sure you sign up through the Shubox.io page under Data Integrations inside FormKeep.

Keep on uploading!

ps – Image and PDF files will now also display directly in the submission pages of FormKeep, in addition to showing a link to the original file.

How to Sell Your Client On a Better Converting Type of Form

You’ve heard the old adage: The client is always right.

But every so often there comes a time when you – the designer or developer – know that there’s a better way. After all, you work with websites on a daily basis, and you see how well things convert or don’t convert. You have years of experience under your belt to know that sometimes certain methods work better than others.

So when a client says, “We want it this way,” there may come a time when you have to respond, “Well actually, here’s another suggestion…”

When it comes to creating forms in particular, some form types just work better than others for certain audiences. And if your gut is telling you that a full-page form would work better, then that’s what you should go with.

But how do you tell that to your client?

Here’s how to sell them on a better way, even if they’re picky.

clients

Certain Forms Work Better Than Others

According to the B2B Technology Marketing Community, “61 percent of B2B marketers struggle to generate high quality leads.” Forms play a big role in that struggle, and in some ways, designers and developers have an inside scoop on which forms work better than others.

Generally that’s because you’re the one stuck doing a redesign when conversions are low. And it’s true that some forms convert better than others.

For instance, forms shown above the fold can improve conversion rates, but sometimes only for audiences that are already familiar with the client’s brand.

According to Groove Digital Marketing, short forms or progressive forms work much better for mobile users, while Convert With Content suggests using multi-step forms instead of long forms because they work better for those needing more information without sacrificing conversions.

multistepform

While you may not have it all memorized off the top of your head, chances are that you know from experience which forms will work in context and which ones don’t. (It’s okay to trust your gut, too).

Of course, once you realize that the form types your client wants may not be the best solution for their audience (or even for their site’s design), it comes time to suggest something different. So how do you do that, exactly?

How to Convince Them You’re Right

Your primary job is really to keep the client happy, but as much as possible you should try to make sure that your client’s endeavors are successful.

While that can be hard to do with a client that is picky or demanding (they simply must have their way), it is possible to suggest an idea that (you feel) will help them achieve their results faster. But you don’t want to come across as a know-it-all, or you’ll risk bruising their ego.

Here are a few ways to try to get your point across without sounding like a demanding diva.

Speak from Experience

While your client has expertise in their respective field, and they probably know their audience better than you, that doesn’t mean you don’t know what you’re talking about. After all, you work with forms and websites, and you’ve had clients come back and say “Hey, this isn’t working, can we change this?”

You’re an expert, and you need to own it. More importantly, you need to show that your opinions have merits. If you want to suggest a new idea, you’ll have to show them that you have their best interests at heart. Which leads to…

Show, Don’t Tell

If you can show how a different form type improved another client’s conversions – whether from your own experience or from an article or post you read about – and you know that your current client has a similar audience, it’s a good idea to grab that data and have it handy.

It can also be helpful for a client to see exactly what you’re suggesting to avoid any confusion. Create a mockup of how the new form would work, and show them step-by-step why it will work better for their audience so they have actual social proof to consider while making decisions.

social-proof

Keep It Consistent

If you’re suggesting something that may be totally out of left field, you still want to reassure them that you understand their audience and brand. Again, this is where a mockup can help, showing the form in action while using their images and site design as a backdrop.

But even if your form idea is way out there, do as much as you can to stick to their audience. If they use business-formal language, don’t start their forms with “Howdy, y’all!” If their colors are blue and gold, don’t design a form that’s purple and grey. It should be a no brainer, but as much consistency as you can keep, the better your “crazy” idea will go over, especially with picky clients.

Offer It Like an “Upgrade”

Sociologist Alvin Gouldner says that no society on earth can escape from reciprocity, or the idea that if someone’s giving you something of value, you should return the favor. Consider suggesting the changes as if you’re providing an exclusive service above and beyond the norm, and they may feel obligated to say yes just because you’re offering.

“We’ve offered this to a few of our other clients and they’ve seen much higher conversions than the standard form. We notice you have a similar audience, would you like to try this new form type? We can create a mockup if you’d like to see it.” More often than not, your client will at least consider your idea rather than rejecting it outright.

Don’t Be Rude

Finally, presentation is everything. This should go without saying, but if you’re rude to the client, they will be primed to reject anything you say on the sheer principle of you being unlikable. While business professionalism can go a long way, it’s about balancing the authoritative tone of an expert with the courtesy of a customer service representative.

According to Call Proof, it’s about listening, empathizing, and under-selling. You have to see your client as more than just a dollar sign, and treat them as you would your family or friends.

Final Thoughts

Sometimes you have a feeling that a different type of form will work better than others with the client’s design or will generate more leads. Since you have some experience to back up your ideas, you want to suggest those changes to your client.

If you’re looking to convince a client that your idea has merit, be sure to present yourself like an expert. Use data and as much information as you can, and create a mockup so they can see exactly what you’re talking about.

Make sure it stays consistent with their branding and actually helps them. You can do this by offering it up as something that will genuinely add value to their business.

And, above all, communicate like a customer service rep – listen, engage, and don’t forget to play nice. Soon your clients will be falling over themselves to implement your awesome new ideas.

How to Handle Design Feedback Like a Pro

Possibly the scariest part of any designer or developer’s job is turning in your design to a client.

The trouble is that you never really know if your client is going to love it or hate it. Depending on the client, submitting a preview can mean plenty of additional hours spent reworking things to get them to up to expectations—and that’s never fun.

No one likes being told that their design choices are wrong. It can be difficult not to react in frustration to negative feedback, but how you handle yourself can mean the difference between successfully completing a project or losing a client for good.

So, how exactly do you handle feedback well?

You want to ask good questions, use every resource available, and try to turn a potentially negative experience into a positive. Here’s how.

Asking Questions That Clarify

shutterstock-190923107-web

The reality is that no designer really loves feedback. Ideally you want your clients to love your project and understand your genius from the moment they lay eyes on it.

Unfortunately, feedback is an integral part of being a designer, but that doesn’t mean it’s necessarily a bad thing. Not only does it help the client clarify and refine their desired outcomes, it also helps you become a better designer by letting you stretch your genius outside of your normal limits.

But, the ultimate goal is to get feedback that’s helpful towards both those ends, and one of the best ways to do that is to take charge of the feedback before it even comes your way. You can do this by providing a series of questions that your clients can respond to.

Some example questions could include:

  • Does this reach your target market in the way you imagined?
  • Does this feel “on brand” or “on message” for you?
  • Were you able to find all the information you were looking for?
  • Do you find the information or design valuable for your users?
  • How does this compare to your expectations?
  • What are some noticeable weaknesses? Strengths?
  • When you see this for the first time, what thoughts come to mind?
  • Would you recommend this [design/site/etc.] to others?

Not only do these questions help clients provide feedback that you can actually implement, but they also minimize comments and dialogue that aren’t helpful or that you can do nothing about.

Instead of simply asking for general or vague feedback or saying, “Let me know what you think”, try starting a conversation that will be productive for both parties involved, while giving you a little more control.

Using Preview/Prototype Tools

Since feedback can often take up a lot of time depending on the complexity of the design (or client) involved, using resources and tools to help minimize that effort will go a long way.

Using preview or prototype tools will help you move the conversation along, make the changes you need in real time, and also make you look extremely professional and put together.

You can either use these tools before a project begins knowing that you’ll have to share them with clients or team members, or you can use these tools to help you after you’ve already built the project and need a way to share and collaborate with minimal effort.

Here are a couple of the top preview tools to consider:

Red Pen – This app allows you to upload your current project, add notes, and share your preview URL via email to clients. There’s no need to log in, as it remembers your link so you can retain all ownership of your uploads.

http-_2F_2Fmashable.com_2Fwp-content_2Fuploads_2F2013_2F08_2FRedPen

Bounce – Bounce lets you collaborate between project members using screenshots or by uploading images. You can also make notes, add names to specific elements, and share your feedback through a URL or social media link.

If you need to build or share a website that will have interactive elements, you might want to consider:

Avocode – Avocode makes it easy for frontend developers to code websites or apps by syncing with your PSD files. You can leave notes for other team members, export, upload and share sites, and give specific feedback while visually comparing design versions.

og-hp

Flinto for Mac – This app lets you create prototypes for mobile as well as web and desktop apps, so if your client really wants to see what a mobile app would look like, you can build an example fairly quickly.

Adobe Experience Design CC – Adobe UX Design also lets you create prototypes for websites and mobile apps, with a preview feature that allows for live changes, as well as a sharing feature for quick feedback.

Turning Negative Into Positive

aotfm79t2d3x917fmmbw

Let’s say that you’ve done everything on your end to help create a positive experience—you’ve asked the right questions, you’ve provided the right sharing platform—but at the end of the day the client still isn’t happy. Does that mean doom for your project?

Negative feedback doesn’t have to be a bad thing if you say and do a couple important things:

Don’t take it personally. Remember that you did your best with the knowledge that you had, and now that you have more, you can make changes that are more in line with the client’s wishes.

Restate intentions. Sometimes things get lost in translation, so rephrase or restate what you think you’re hearing the client say so that everyone is on the same page. It can also be helpful to ask more questions or for suggestions they might have that can be easily applied to the project.

Do your research. If the client is asking for something that can’t be done, know about it before hand so you don’t say yes and then have to backtrack later. If you’re not sure about something, let them know you’ll discuss it with your team or look into it and get back to them as soon as possible.

Make a list of actionable items. Sometimes what a client wants just isn’t going to be a reality—you know that, but they might not. Give them a list of things you can change and explain to them as thoroughly as possible why some solutions just won’t work.

Provide alternatives. For those things that really can’t (or shouldn’t) be changed based on the feedback provided, offer one or two alternatives. Don’t simply ask the client for things they’d like to see instead, but present them with options so that they don’t ask for something else you can’t follow through on.

Respond promptly. There’s nothing that screams “unprofessional” like taking too long to reply to an email or missing a scheduled phone call or meeting. Do your best to provide responses quickly and assure them that they’re your priority.

Final Thoughts

While receiving feedback isn’t always the best part of the job, it can be a helpful experience for both you and your client if you’re able to handle it professionally.

One of the best things you can do is ask questions and constantly clarify things throughout the project so that your client can rest easy that you know what you’re doing.

Being sure to use any tools or resources that helps clients be a part of the decision-making process can also help foster a sense of loyalty as well as move the project along faster.

And should negative feedback still come your way, don’t panic. Keep asking questions, keep clarifying, and keep responding and your clients will thank you.