How to create a pop-up form on your website for free

For many business owners, using pop-up forms to collect leads is a common strategy to grow their customer base. However, traditional pop-up forms often come with challenges:

• Missed opportunities: Leads fill out the form, but their submissions are buried in email inboxes or backend systems, resulting in delayed responses.

• Lack of engagement: After submitting the form, the interaction ends, leaving leads waiting for follow-ups and businesses struggling to maintain momentum.

• Manual workload: Exporting leads from pop-up forms and manually contacting them can be tedious and inefficient.

What if there were a way to instantly engage with leads the moment they submit the form, eliminating these pain points?

Here’s a free website form generator for businesses that prefer WhatsApp engagement

SleekFlow’s Free Website Form Generator offers a convenient solution: a pop-up form integrated directly with WhatsApp. Instead of sending form responses to a backend system, this tool brings leads directly to a WhatsApp chat interface.

When a lead clicks “Submit,” their responses are sent straight to your WhatsApp account, enabling you to:

• Engage instantly: Start conversations with leads in real time, building trust and improving response rates.

• Streamline processes: Eliminate the need for manual follow-ups—everything happens on WhatsApp, where you already communicate with customers.

• Guarantee contact info: Since WhatsApp requires a phone number, you’ll always have a reliable way to follow up.

Why Use SleekFlow free website form generator?

With a drag-and-drop builder, the Website Form Generator lets you create embeddable pop-up forms in minutes. Deploying the form is simple—copy and paste the generated snippet into your website without coding.

Whether you need an event registration form, newsletter sign-up form, or a simple contact form, this free tool simplifies the process. This guide will walk you through creating and embedding a free pop-up form on your website.

How to use SleekFlow's free website form generator?

1. Choose a template or start from scratch

The free tool provides a variety of pre-designed templates to help you get started quickly. These templates are tailored to everyday business needs, such as:

• Quotation form: Ideal for businesses offering services or products that require custom quotes.

• Contact form: A simple form to let website visitors get in touch with you.

• Reservation form: Perfect for restaurants, salons, or service-based businesses.

• WhatsApp newsletter sign-up form: Grow your audience by inviting visitors to subscribe to your newsletter.

• Event registration form: Ideal for capturing attendee details for webinars, conferences, or in-person events.

If none of these templates meet your needs, you can start from scratch and build a completely customized form. This flexibility allows you to create forms for any purpose, such as surveys, feedback collection, or even order requests.

2. Customize the form fields

Tailor the form to fit your needs by editing the headline, subtext, form fields, and button text. You can choose from 8 types of form fields to collect user input:

• Short Text

• Long Text

• Phone

• Number

• Email

• Multiple Choice

• Single Choice

• Date and Time Input

Click on a form element to edit the field names and the required attribute. Here are some creative ideas based on your business type:

• For Service Businesses: Use drop-down menus to let users select their preferred service or time slot.

• For E-Commerce: Add a "Product Inquiry" field so customers can ask about availability or customization options.

• For Event Organizers: Include fields for dietary preferences or special needs to personalize the attendee experience.

3. Adjust the look and feel and set up a trigger condition

SleekFlow makes it easy to align your form with your website’s branding. Customize the font styles and colors to create a cohesive user experience.

Next, decide when and how your form should appear to visitors. Bombarding users immediately after they land on your website can be off-putting, so SleekFlow offers three flexible trigger options:

a) Trigger pop-up form after clicking an element

Display the form only when a user clicks a specific button, link, or image. For example:

• A “Get a Quote” button on your homepage triggers the quotation form.

• A “Sign Up for Updates” link in your footer triggers the newsletter subscription form.

To implement this, embed the generated snippet in your website’s HTML template by assigning it to the onclick property of the element. Here’s an example of correct usage:

<button onclick="window.openSleekflowPopupForm()">Get a Quote</button>

b) Trigger after spending X seconds

This trigger ensures the pop-up form appears after visitors show interest by staying on your site for a specified time. For example:

• A newsletter sign-up form could pop up after 15 seconds to capture engaged visitors.

• A feedback form could appear after 30 seconds, prompting users to share their thoughts about their browsing experience.

c) Trigger after scrolling X%

This trigger displays the pop-up form once visitors scroll a specified percentage of your website content. For example:

• On an e-commerce site, a “Get 10% Off” form might appear after a visitor scrolls 50% of a product page.

• A blog could use this trigger to display a “Subscribe for Updates” form after readers scroll 75% of an article.

5. Add WhatsApp Business information for receiving form responses

Before generating your form, you need to configure where and how you want to receive form submissions. Follow these steps:

1. Fill in details such as your company name, website URL, and business email.

2. Provide your WhatsApp number to receive submissions directly in your WhatsApp inbox.

3. Define how submissions will appear in your WhatsApp messages. For example, you can include a pre-filled message like:

   “Hey, I just visited your website and am interested in signing up. Here’s my info:”

This setup ensures you can instantly distinguish new form submissions from other casual exchanges in your WhatsApp inbox, allowing you to follow up promptly. You can also preview exactly how the form submissions will appear on WhatsApp, so there are no surprises.

6. Embed the pop-up form into your website

To make the pop-up form live, copy the generated code snippet and paste it into your website’s HTML. Depending on whether you want the form to appear across your website or only on a specific page, follow these steps:

1. Open your website’s admin or content management system (CMS).

2. Navigate to the HTML or theme file where you want to add the embed code:

   • For site-wide display: Locate the global <body> tag (applied to all pages).

   • For a specific page: Locate the <body> tag for that particular page.

3. Paste the SleekFlow embed code snippet before the closing </body> tag.

4. Save the changes and refresh the website to confirm the form appears in the desired location.

Note: If you choose the view time or scroll depth trigger, the form appears only once every 24 hours on each device. It won’t show again if dismissed or submitted, ensuring a smooth customer experience. If you choose the click element trigger, the form will appear every time a user clicks the element.

Embedding the pop-up form across your Shopify website

1. In your Shopify admin panel, go to Online Store and click Themes.

2. Under your active theme, click Customize.

3. At the bottom-left corner, expand Theme actions and select Edit Code from the dropdown.

4. In the code editor, locate the Sections folder and open the footer.liquid file.

5. Paste the embed code snippet into the file.

6. Save your changes.

Embedding the pop-up form on a specific Shopify webpage

1. In your Shopify admin panel, go to Online Store and click Pages.

2. Select the page where you want to insert the pop-up form.

3. Click the far-right icon to Show HTML.

4. Paste the embed code snippet into the HTML editor.

5. Save your changes.

How to automatically sync WhatsApp leads to a CRM?

As you start collecting more WhatsApp leads from your website’s pop-up form, storing their information and managing their lifecycle in a CRM is essential. A common way to achieve this is to set up a webhook between the form and your CRM.

If you’re using SleekFlow (Premium plan or above), you can automatically create new contacts and save form responses as contact properties in the SleekFlow CRM. This allows you to build detailed lead profiles while receiving leads in your WhatsApp inbox. Below is an example of setting this up for a reservation form:

1. Go to the Flow Builder in your SleekFlow dashboard.

2. Start a new flow and select the Webhook Data Trigger template.

3. Click Copy as Single URL to copy the webhook URL, then paste it to the Form Generator “URL to notify” field.

4. Decide how the system should identify a contact (e.g., email or phone number).

   • Ensure your form includes the chosen identifier field.

   • For example, if you use a phone number, copy the relevant payload key from the Form Generator into the Flow Builder as the “contact payload key.”

5. Toggle on the New Customer Enrollment option.

6. Create variables for each form field you want to save in the Save Webhook Response section.

   • For example, to save a "Preferred Date" field:

     • Create a variable (e.g., {{preferred_date}}).

     • Copy the payload key (e.g., $.date1) from the Form Generator and paste it into the Flow Builder.

7. Add the action Create SleekFlow Contact and map the variables you created (e.g., {{preferred_date}}) as contact properties.