Client Resource Center

In brief, as of April 2024, it's not currently feasible to set up an auto-reply directly to form submitters within Webflow. Webflow isn't designed to function as an email agent; simplicity is prioritized in its functionality. What Webflow does offer is the ability to configure single or multiple email addresses to receive notifications about form submissions. This feature essentially allows website owners to receive alerts when a form is submitted. Unfortunately, even this basic functionality has its limitations—you can't specify which email address should receive notifications for specific form submissions; it's all managed collectively. This can be highly inconvenient for websites with multiple forms, each managed by different individuals or departments.

There was optimism that the introduction of logic might improve this situation. However, the only enhancement thus far is the ability to send notifications about form submissions to individuals with access to the website (such as admins or collaborators). While this is a step forward, it still falls short of the comprehensive functionality needed to effectively manage forms.

Available two methods

Currently, there are two methods to enhance this process, both requiring the use of third-party tools.

The first method involves setting up a webhook using platforms like Zapier or Integromat. Essentially, when a Webflow form is submitted, a zap is triggered to send the information to an email service (such as Mailchimp or Gmail), where the auto-response can be configured. This setup can be complex and may incur additional expenses for the connector app and email service.

The other approach is to circumvent the use of native Webflow forms, despite their appeal, and instead embed forms directly from an email agent or CRM. With this setup, the receiving tool processes the information upon form submission and triggers the desired response. However, styling embedded forms can be challenging, although with custom CSS, most obstacles can be overcome.

In summary, while implementing auto-responses can greatly enhance user experience, achieving this functionality will likely require the utilization of third-party tools.

I understand there seems to be some confusion regarding hosting, site plans and workspaces, which can indeed be a bit complex. Let me simplify it for you:

Firstly, it's essential to know that you do not need to purchase hosting from a third-party provider. Webflow offers hosting services, which they term as a "Website Plan." This name choice reflects that their offering includes much more than traditional hosting—it encompasses features like CMS, form submissions, site search, etc. As you opt for higher-priced plans, you gain access to an increasing number of features.

Regarding the possibility of using a free site plan, it's feasible only in specific, limited scenarios. The free plan does not support connecting a custom domain and restricts you to 2 pages and 50 CMS items (which are essentially template pages for recurring content such as blogs and case studies). It also limits you to 50 form submissions over the entire lifetime of the website, among other restrictions. This plan is suitable for very basic websites without any need for additional functionalities.

A good example of how we at Rapid Fire Web Studio leverage the free website plan is through a case study in which we demonstrate the structuring of an ideal landing page. We opted not to link directly to any of our clients' actual landing pages. Instead, we combined our expertise to create a comprehensive landing page that showcases our skills. Our goal was for it to be accessible online, allowing people to browse it in real time. Naturally, we wanted to avoid the costs associated with acquiring a custom domain and a paid website plan. Thanks to Webflow's free plan, we were able to have the page up and running, effectively serving its intended purpose.

In most cases, we recommend opting for the CMS site plan, which is $23/month when billed annually (as of February 2024). This plan usually covers all requirements. The purchase can be delayed until closer to the launch date or when one of limitations is hit.

Webflow also offers workspace plans, which generally don't concern most website owners. Advanced workspace plans are tailored for those managing multiple websites and large teams. One point of confusion is that a paid workspace plan can override some restrictions of free site plans. For instance, if you have a website that exceeds the two-page limit but don't wish to purchase a site plan for it, this limitation can be bypassed with a paid workspace.

To summarize, if you own one or just a few websites published on custom domains, your primary concern should be the website plans, with each site requiring its own plan. However, if you manage several websites in development (a common scenario for agencies or businesses with multiple products) and have a team involved in development and content editing, you might need to consider upgrading your workspace.

Remember, Webflow does not provide custom domains, although domains ending in .webflow.io are provided for free.

I hope this clarifies things for you. Please don't hesitate to reach out if you have any further questions.

If a background video is not playing on only one of your devices, it's possible that the issue lies in the settings of that device's browser. A common fix involves checking the reduced motion settings, as background videos may not play if these are enabled.

Here’s how to check and disable this setting:

On Windows:

1. Go to 'Settings'.
2. Navigate to 'Ease of Access'.
3. Select 'Display'.
4. Ensure that 'Show animations in Windows' is turned on.

On a Mac:

1. Click the Apple menu at the top left corner.
2. Select 'System Preferences'.
3. Click 'Accessibility'.
4. Choose 'Display' from the options on the left.
5. Make sure that the option for reducing motion is not selected.

Another reasons for background video not to play include: 

• Ad Blockers or Browser Extensions: Some ad blockers or browser extensions can block videos from playing, mistaking them for advertisements.
• Auto-Play Restrictions: Modern browsers often have restrictions on auto-playing videos, especially if they have sound. These restrictions can prevent background videos from playing automatically. Webflow's background video element does not have a sound option, so this is almost never a problem.
• When iOS devices have low power mode enabled background videos are disabled. This is an iOS feature to preserve battery life.

What is Reduced Motion Mode and How It Helps to Enhance Accessibility

Reduced motion mode is a feature available in many operating systems and applications designed to limit the amount and intensity of motion and animation in the user interface. This mode primarily serves two purposes:

1. Accessibility for Users with Motion Sensitivity: Some individuals experience discomfort or physical symptoms like dizziness, nausea, or headaches due to motion and animation effects on screens. This condition is known as vestibular disorder. Reduced motion settings help mitigate these effects by minimizing or eliminating animations and certain types of motion in the user interface, making the digital experience more comfortable for these users.
2. Reduced Distractions and Cognitive Load: Animations and motion effects can be distracting for some users, particularly those with attention-related disorders such as ADHD. By reducing these effects, the user interface becomes less distracting and easier to navigate, helping users focus better on the task at hand.

Reduced motion mode often modifies or removes:

• Parallax scrolling effects
• Zooming, fading, or sliding transitions
• Animated loading indicators
• Full-screen animations and video backgrounds
• Other motion-based interface elements

Enabling reduced motion mode varies depending on the operating system or application. In general, it can be found in the accessibility settings of the device or software. This mode illustrates the importance of designing digital products with accessibility in mind, ensuring that they can be comfortably used by people with a wide range of needs and preferences.

To activate a live Google Map on your website, you will need to provide a Google Maps API key. Here’s how you can get one:

1. Visit the Google Maps Platform and click "Get Started."
2. Follow the on-screen instructions to generate your API key. This process will require you to set up a billing account with the Google Cloud Platform, which I cannot do for you as it involves personal account information.

Once the API key is generated, please send it to me. I will integrate it into your Webflow project. After that, return to the Google Cloud Platform where you obtained your API key and restrict its usage. Restricting means specifying which websites (domains) the map can appear on. Additionally, ensure that the API you want to use is enabled in the property settings.

With the API key integrated and restrictions set, the map should be operational on your website.

In Webflow, I can set an address and adjust several settings, such as the map's title, tooltip, zoom level, and map type. I can also enable scrollwheel zoom and touch dragging for a more interactive experience.

For more detailed instructions please visit Webflow University.

As of January 2024, Webflow doesn't offer a native feature to directly add tables to CMS items. However, it's still possible by inserting HTML code for a table into the rich text body of your blog post. The code might look something like this:

Don't worry if you're not comfortable writing HTML code. There are several methods to easily create and insert tables:

Online Table Generators: Use websites designed to generate table HTML code. You simply input your data and preferences, and the site generates the code for you. A good example is DivTable.com.

‍Finsweet Table App: This app lets you visually create and style a table on a static Webflow page. Once you’re happy with it, publish the page, extract the HTML code using the Inspector mode, and paste it into the rich text field of your CMS item.

ChatGPT Assistance: Provide ChatGPT with your data from Excel or a spreadsheet, and ask it to convert this into an HTML table. ChatGPT can also help with customizations, especially if you're specific about what you need.

These are three methods I commonly use and recommend. When a client needs a table, I either offer to hand off the data to me for integration directly into their blog post or conduct a brief tutorial session. In this session, I explain the above methods and assist in choosing the best approach for their needs.

A Note on Mobile Responsiveness: Tables can be tricky on mobile devices. They may not fit the screen properly, become too small, or cause horizontal scrolling. To avoid such issues, always check how your table looks and behaves on mobile devices before finalizing it.

1. 301, 302, and other server side redirects do not cause a loss in PageRank.
2. Avoid chaining redirects. While Googlebot can follow up to 10 hops in a "chain" of multiple redirects (for example, Page 1 > Page 2 > Page 3), Google advises redirecting to the final destination directly. If this is not possible, keep the number of redirects in the chain low, ideally no more than 3 and fewer than 5.
3. Avoid irrelevant redirects. Don't redirect many old URLs to one irrelevant destination, such as the home page of the new site. This can confuse users and might be treated as a soft 404 error. However, if you have consolidated content previously hosted on multiple pages to a new single page, it is acceptable to redirect the older URLs to that new, consolidated page.
4. Keep the redirects for as long as possible, generally at least 1 year. This timeframe allows Google to transfer all signals to the new URLs, including recrawling and reassigning links on other sites that point to your old URLs.
5. Webflow currently doesn't have a hard limit in place for total redirects, but it recommends 1,000 maximum as best practice.

Sources: Google Search Central, Webflow University

Changing the color of logos can be a delicate matter. While I'm not a legal expert and cannot provide legal advice, my understanding is that if the modifications we make to the logos deviate from the official brand guidelines, it could potentially lead to issues. Major companies typically provide alternative versions of their logos with fewer or secondary colors, or even a negative version (light for use on a dark background). Adhering to these guidelines helps ensure compliance.

An acceptable compromise could be making the logos entirely white or black, although it's somewhat less than ideal. However, I would recommend against changing logo colors to match your brand color. Before we consider any color modifications, let's try to use them in their original colors. Here's an example of how a grid of colorful logos can look clean and visually appealing.

Certainly! I can integrate any third-party solutions you prefer, or I can add an incredibly powerful cookie consent plugin specifically designed for Webflow from Finsweet.

The advantage of the latter option is that it's free, doesn't require any monthly or yearly payments, and is GDPR compliant.

The banner users see is fully customizable, allowing us to keep it simple or have some fun with it.

Options

There are a couple of options to choose from. The first one is an informational cookie message (not GDPR compliant) or what's called 'implied disclosure.' This type of cookie compliance informs users that cookies will be used on the site.

Another option is 'Opt-out of cookies,' a type of cookie compliance that loads cookies by default on the user's first visit to the site. The user then has the option to either continue browsing the site with cookies or deny them. If the user chooses to continue browsing with cookies, nothing happens, and they can proceed to use the site as usual. If the user opts to deny cookies, we remove the cookies from their browser, allowing them to continue browsing the site while disabling all scripts that issue non-essential cookies.

The third option is 'Opt-in to cookies,' which is a higher level of cookie compliance. It requires the user to specifically accept the use of cookies on the site before any cookies are issued. No cookies are given until the user clicks "Accept" or a similar confirmation button. If the user accepts cookies, we activate all scripts that use cookies, and they can continue using the site with cookies. It's important to note that scripts using cookies are not loaded on the page until the user explicitly accepts the cookie message. If the user chooses to "Deny" cookies, we allow them to continue browsing the site while disabling all scripts that issue non-essential cookies. They won't receive any cookies and will maintain this status throughout their time on your website.

With options 2 and 3, there's the possibility to add a Preference Manager—a button that enables users to open the Preferences component and change their cookie consent preferences.

Here's a concise guide on creating SEO-optimized titles and meta descriptions for web pages:

Titles:

1. Keyword Placement: Include your primary keyword near the beginning of the title to signal relevance to search engines.
2. Length: Keep titles between 50-60 characters to ensure they display well in search results.
3. Clarity: Craft titles that clearly convey the page's content, ensuring it matches user intent.
4. Uniqueness: Avoid duplicate titles across your site; each page should have a distinct and relevant title.
5. Brand Consistency: If applicable, include your brand name consistently in titles for brand recognition.

Meta Descriptions:

1. Relevance: Summarize the page content concisely and ensure the meta description aligns with the user's search intent.
2. Length: Aim for 150-160 characters to provide enough information without being truncated in search results, but realistically try to stay within the limit of 300 characters.
3. Call to Action (CTA): Encourage clicks with a compelling CTA, prompting users to take action.
4. Keyword Inclusion: Incorporate relevant keywords naturally, but avoid keyword stuffing.
5. Snippet Appeal: Craft meta descriptions that entice users to click by highlighting unique selling points or key information.

Here's an example for a fictional webpage about "Healthy Smoothie Recipes":

Title:" Healthy Smoothie Recipes for a Refreshing Boost | SmoothieLand INC."

Meta Description: "Discover a world of flavor and wellness with our curated collection of healthy smoothie recipes. From antioxidant-rich blends to energy-boosting concoctions, find the perfect sip to kickstart your day. Dive into our easy-to-follow recipes and elevate your nutrition journey today."

When it comes to adding a blog to your website, you've got two options: the "kinda-sorta method" or the comprehensive approach. If your aim is to get people subscribing to your blog updates, sharing your posts in the media, and actively clicking on the links you incorporate, then the comprehensive path is the way forward. Here are the key steps to follow.

• Keyword Research: Conduct thorough keyword research to identify relevant topics and phrases that your target audience is actively searching for. Find keywords with high search volume and low competition, and strategically incorporate them into your articles.
• Content Creation: Craft high-quality, informative, and engaging content that directly addresses the needs of your audience. While AI-generated content can be utilized, it's essential to ensure that it maintains a human touch, preferably curated by experts.
• On-Page SEO Optimization: Implement on-page SEO strategies to enhance the visibility of your blog posts in search engine results.
• Internal and External Linking: Include internal links to other pertinent blog posts on your site. Integrate external links to reputable sources to bolster the credibility of your content. While internal linking may seem straightforward, it can be challenging without maintaining a detailed blog post tree to identify suitable interconnections.
• Visual Assets Creation and Optimization: A compelling blog should always incorporate visuals. Aim for a variety beyond stock photos or AI-generated illustrations, including infographics, charts, graphs, and maps. Optimization should encompass image compression and the addition of descriptive alt texts.
• Social Sharing: Implement share buttons to facilitate the easy sharing of your blog posts by readers.
• Social Media Integration: If your company has a social media presence, it's highly beneficial to share your blog posts on those platforms. If not, it is advisable to create accounts and commit to regular sharing to enhance visibility.
• Schema Markup Incorporation: Integrate schema markup to provide search engines with additional context and improve the presentation of your content in search results.

If you're looking for a hassle-free solution, I can assist you every step of the way, providing a turn-key service to establish a robust and engaging blog for your business. Alternatively, if you already have a blog and are seeking improvements, I can help implement changes to ensure its vitality and continued success. Feel free to reach out for a quote.

Absolutely! Webflow makes it easy to showcase items randomly. When you add a collection (database) to a page, you'll find "random order" as one of the sorting options.

Keep in mind that different types of content may warrant different sorting methods. For example, news articles might be sorted by date, products by popularity or relevance, and team members by seniority or department.

Here are some situations where random sorting can be beneficial:

1. Voting or Contests: In scenarios where users are voting on options, displaying entries in a random order helps prevent bias towards items listed at the top or bottom. It ensures a fair chance for all entries to be considered.‍
2. Showcasing Diversity: If you want to showcase a diverse range of content on each visit, random sorting can be effective. This is common in features like "Recommended for You" sections where the goal is to expose users to a variety of options.
3. Featured or Spotlighted Content: When highlighting featured or spotlighted content, using random sorting can give each item an equal opportunity to be prominently displayed. This is particularly useful for promotions, special offers, or showcasing a variety of products.
4. User Engagement and Discovery: Random sorting can enhance user engagement and encourage exploration. Users may find it more enjoyable to encounter different content each time they visit, creating a sense of novelty.
5. User-Generated Content: Platforms that rely on user-generated content, such as forums or community-driven websites, can benefit from random sorting to provide equal visibility to different contributions.

It's important to note that Webflow caches your site pages on a Content Delivery Network (CDN) for faster loading times. Because of that the random sort on published sites will refresh approximately every 12 hours. On the positive side, this ensures consistency, as everyone viewing the site during that time frame will see the same random order.

Absolutely. While Webflow doesn't provide native support for this feature, it can be set up. Once configured, you'll have complete control over which pages are discoverable by Google and which ones are not.

Website owners and marketing teams often choose to hide certain pages from Google for SEO purposes. This strategic decision allows them to prioritize which pages search engines crawl and index. By excluding non-essential pages, the focus can be on optimizing key pages for better search engine visibility.

Although there isn't a dedicated button for this option, the setup process is relatively straightforward. Once configured, the maintenance is manageable, providing a means to ensure that only the most relevant pages are exposed to search engines.

Pagination is a widely used method for dividing lengthy blog pages into smaller, more manageable sections. It's also a default feature provided by Webflow, making it quick and easy to implement and style. However, when exploring custom code options, you'll find more modern alternatives that can offer an improved user experience.

One such option is the "Load More" button. With this approach, content is loaded when the user clicks a button located just below the visible content, all without changing the URL.

Another alternative is the "infinite scroll." In this setup, new items are loaded onto the page automatically as the user reaches the bottom. Infinite scroll seamlessly provides more content as the user scrolls down, eliminating the need to click through separate pages. This not only keeps users engaged but also encourages them to explore more content.

There is some confusion regarding Webflow's automatically tracked Created, Modified, and Published dates. Following common logic, some of my clients assume that sorting items in the blog feed, for example, using the automatically created Published date is a good idea, but very soon they discover that it's not. Essentially, Webflow's internal published date does not reflect the date an item was first published; it reflects the most recent date it was published. In this case, let's say you updated your article (it can be a significant update or just spotted and removed a typo) once the article is pushed live; its published date is also updated. If the blog sorting relied on that date, the old article will be moved to the top.

Take a look at this screenshot to gain a better understanding.

I created this article on September 29th, then I published it on October 10th. Later, on November 2nd, I noticed a typo and fixed it. However, I haven't published the article yet, so the status is "Staged Changes." Once I push it live, the publish date changes to the date when the article goes live.

It's not an oversight or a bug on Webflow's part. There is a reason for tracking changes like this. Perhaps the user interface could be improved to reduce confusion, but it is what it is. If my client wants to have full control over item sorting based on the date, I usually implement a custom date field for the collection and set up sorting based on it. This way, my client has automatically tracked data for internal tracking and a fully modifiable date field for sorting and display.

Webflow's built-in Video element is compatible with a variety of sources, including:

• DailyMotion
• Kickstarter
• TED
• Wistia
• Ustream
• Livestream
• Twitch
• Tudou
• Hulu
• SproutVideo

Alternatively, you can store your videos on cloud storage and file-sharing services such as Dropbox and Google Drive, or virtually any online file storage that allows you to generate a public link to the file. In such cases, you won't be utilizing Webflow's native Video element; instead, you'll incorporate a video player using HTML code.

Webflow provides a couple of native options worth implementing.

Before choosing the layout for video testimonials it's important to decide whether you want it to be a lightbox or an on-page video.

In the case of a lightbox, when a user clicks on a thumbnail image, a lightbox overlay will appear on the screen, dimming the background content and highlighting the selected image or content. This allows users to view the content in a larger size without leaving the current page. Additionally, we can link all video testimonials so that users can seamlessly navigate within the lightbox view.

On the other hand, with an on-page video, the video starts to play whenever the user clicks on the play button in the video player. You can store video on YouTube or Vimeo.

This is a good example of minimalistic lightbox solution:

And this is a good example of minimalistic on-page player implementation:

If I'm not aiming for a minimalistic approach, I prefer videos that incorporate quotes, similar to the one below (lightbox). Well-crafted text context can pique users' interest and encourage them to watch the video. It serves as a teaser or introduction, drawing users into the content. Users often make decisions based on text information. When they read a brief description or testimonial content alongside the video, they can quickly decide if the content aligns with their interests or needs, improving their decision-making process. This option is also good for the Homepage or About Us page.

And here's example with on-page player:

When deciding whether to go with a lightbox or a player, remember that you'll need to create a thumbnail image for the lightbox that matches your page or brand's vibe. This means investing a bit more time and effort. Your thumbnail can be a simple screenshot from the video or something cool you design yourself. Check out this example with clean headshots in a matching style:

Great idea! A background video can immediately capture visitors' attention and create a visually engaging experience. It adds dynamism and vibrancy to the page, making it more attractive and memorable.

1. The video must be smaller than 30 MB in one of the following formats: webm, mp4, mov, or ogg.
2. The background video can't have sound; it's essentially a moving picture. If you want something with the ability to turn the sound on, I can do it, but it will be an entirely different thing.
3. Considerations for colors and content: There will be text overlaying it, and the text should remain readable. I can apply a color overlay over the video. It's important to strike a balance between text readability and video visibility.
4. In most cases, it will not scale nicely on mobile. Usually, a separate video for mobile is created.
5. The video in the header will slightly slow down the initial page load and the first page print, although not tremendously. But it will still have an impact.

We totally can implement a customized sorting order for your needs. It needs to be done in Designer.
Typically, I'd suggest adding a number field to the FAQ collection and labeling it as "Custom Sort Order". Once you've assigned numbers to each item, you're free to decide whether you want the lowest numbers to show up first or the highest – totally your call. To keep things versatile and adaptable, I usually kick off the numbering with 0.
Check a screenshot. The "Test" item will slip in between items numbered 50 and 60.

You could also go with whatever system that works best for you. Maybe you want to go with numbers from 1 to 9, and you can use the same number for multiple items. If you do that, the items that share the same number will show up in the order you added them. I had a client who wanted dates assigned to each item. We sorted stuff based on those dates. They found it way easier to manage. And hey, you can also sort by switch fields. Like, create a field called "Most Important" and when that switch is on, the items with it on will pop up first, in the order you added them.

Webflow removes the EXIF data that determines image orientation while generating responsive images. It happens especially with pro-quality shots.

For a deep dive into the technicalities of this issue, check out this article.

Fixing it is actually pretty simple: just open up the image with image editing software and save it again. I usually do this with Photoshop.