This is how we built an MVP in 6 hours: A lead-generation site with no code

Introduction
This is how we built an MVP in 6 hours: A lead-generation site with no code

Building a website can seem overwhelming, especially if your coding skills are limited. There are many different elements to be considered: forms, pages, design, UX, CRO practices... But the great news is that there are tons of different tools you can use to build a prototype or a functioning website without writing a single line of code.

Today, we explain how we built an entire website with no-code tools with limited resources. This project was executed during a low-code hackathon — a challenge with limited time, no-code tools and a handful of useful learnings.

The challenge: Building an MVP without coding in 6 hours

The different teams were asked to build a lead acquisition site for a marketing agency site, specialized in pharmacy. The website should be as efficient and creative as possible, while keeping in mind its objectives and without using code.

These were some of the requirements:

  • Build a lead generation site with a contact form (with name, family name, email, closest office, and company revenue)
  • Use no-code tools
  • Be as creative as possible
  • Optimize on-page SEO aspects

In 6 hours, we came with the idea of a website with a highly smart form as a base for the lead-acquisition system. Simply by building an efficient form, we could trigger different actions that sophisticated the lead funnel. And that required no coding skills!

1. Building a website without coding with Squarespace

The very first step of this project was, of course, to build the website. We chose to create a website with Squarespace, a no-code tool that allowed us to create a webpage with different subpages.

By choosing a template, we built a branded webpage with several subpages centered in different aspects: about us, the product, methodology, contact, etc.

Squarespace allows editing a website from a predefined template. Source: Squarespace

About Squarespace

Squarespace is a no-code tool that helps you build beautiful and efficient websites. Thanks to its drag-and-drop functioning and its templates, you can build a good website in minutes.

Squarespace allows limited personalization — while you can customize colors, banners, pages and so on, you can't just drag-and-drop elements wherever you want. On the other hand, this decision is based on good UX practices, so your users won't find any element in counter-intuitive places.

  • Drag-and-drop editor. Even though some technical knowledge can help you, you need no coding skills to start building your page.
  • Well-designed templates. Even if you're not so good at brand design or UI, you will find well-structured and attractive templates that will get you covered.
  • SEO on-page. Squarespace includes some modules for SEO purposes, such as the slugs, meta titles, meta descriptions and so on and so forth.
  • Page speed. While the page speed was efficient in its desktop version, the mobile version is slowed down due to Squarespace's own files. Optimizing every element and avoiding custom code helps improving the page speed.

2. Creating a smart form with Arengu

Being a lead-acquisition site, we needed to add a contact form. With Arengu, we built a form in seconds, simply by choosing a template and modifying it to add personal details.

In this case, we chose to divide the form into two different steps. Since we need a lot of information, we structured the form into two parts. Submission was executed after completing the first step, but users were prompted to fill in the second step in order to address them in a more personalized way.

No code tools to build a website
With Arengu, you can build a form and add server-side logic to it without coding. Source: Arengu

After submitting the form, a confirmation email was sent to the lead, thanks to an integration with SendGrid.

The form had several fields with key information, such as the contact details, but also the closest office and the company revenue. We took this data to organize the leads and send them to the proper sales agent. By adding an integration with Pipedrive, we could automate notifications to each sales agent and automatically update the leads database.

About Arengu

  • Drag-and-drop editor. Arengu allows building an efficient form simply by dragging and dropping all the elements you need.
  • Well-designed templates. By using a use case template, you can build a smart form in minutes. In this case, we used the lead-acquisition template, and added our own personal touches.
  • Smart forms with no code. Arengu was the only tool that allowed us building a smart form with no code. We built server-side logic that dramatically improved the efficiency of the lead-acquisition system.
  • Integrations. On top of building server-side logic without coding, we could easily integrate the form with other no-code tools, such as SendGrid or Pipedrive.

3. Designing a branded email with BeePro and sending it with SendGrid

Arengu allows sending a customized confirmation email by adding HTML or a ready-made template. Since we couldn't use any code to create it, we chose to use BeePro — a tool to create email templates that allows exportation in HTML.

In barely half an hour, we had a branded email that matched our webpage, handed the user the most relevant links in our website, and displayed the option to set a meeting with the sales team via Calendly.

About BeePro

  • Drag-and-drop editor. BeePro enables a fast process with 0 code thanks to an intuitive drag-and-drop editor.
  • Exportation in HTML. Even though there are many tools to create beautiful emails, not all of them allow exportation in HTML.
  • Well-designed templates. BeePro offers use case templates so you can build an email in no time. You just have to choose a template that goes well with your purpose, and then change colors, icons, or add links.
Build emails with no code and export in HTML
Beefree and Beepro offer email templates you can work from and different types of exportation. Source: Beefree.io

About SendGrid

  • Easy and fast signup. Registering in SendGrid is a fast process, where you only need to signup with your email and password. Right after, you can already access your API keys.
  • API-based integrations. All you need to start sending emails with SendGrid is its API key. In this case, we only needed to copy paste it in our Arengu form in order to send a confirmation email.
SendGrid API keys - No code tools to build a web
Simply by configuring SendGrid's API keys, you can start sending emails to yours users. Source: SendGrid

4. Making appointments with Calendly

Thanks to the confirmation email sent with BeePro and SendGrid, leads could easily schedule an appointment with our sales agent with Calendly. All they need to do is click on the preferred date and time and the appointment will me automatically made and added to the participants' calendar.

No code tools to build a website
Calendly allows scheduling appointments and integrating them in the participants' calendars. Source: Calendly.com

About Calendly

  • API connection. To start using Calendly, you just need to integrate it in the tools you normally use by pasting the secret key.
  • Integration with every online calendar. All your Calendly appointments will be integrated in your online calendars: Google Calendar, iCloud, Outlook, etc.
  • Time saver. After configuration, all you have to do is hand it to your users and they will choose a convenient time. This helps teams (especially sales, user acquisition and human resources) save tons on time on scheduling appointments.

5. Managing users in Pipedrive and organizing leads in a smart way

Lastly, we integrated our Arengu form with Pipedrive, a sales CRM that will help us manage new leads.

Leads were organized according to two different criteria: their location and the revenue. Since leads could indicate their closest office, we could send leads to the proper sales agent based on location. On the other hand, leads could also indicate their budget for their marketing campaign, which triggered different ways of communicating to the sales team.

This behavior is a great way to organize and optimize the sales pipeline, and to automate notifications on new leads to the proper agent.

Pipedrive CRM - No code tools for a webpage
Pipedrive's CRM includes different features to manage your sales pipeline. Source: Pipedrive

About Pipedrive

  • Task automation. This tools helps sales managers automate certain tasks, like sending leads to different sales agents according to your own business rules.
  • API-based integration. Thanks to its API connection, we could easily integrate Pipeline in our Arengu form, and benefit from all of Pipedrive's features.
  • CRM. In your leads panel, you can check the status of each new user and have an understandable overview of your sales process.

In a nutshell

Creating a website may seem overwhelming at first, but the market is full of different tools that will help you reach your goals and save tons of time. In this matter, no-code tools or low-code tools are here to stay — they are efficient and they help you save resources. It is worth giving them a try!

Plus, in this example, we have seen how an Arengu form works as the backbone of a complex lead-acquisition system. Simply with a highly smart form, we could integrate and automate a series of tools and tasks to build a sophisticated sales system.

Give Arengu a try for free and keep an eye on our blog to see all you can do by using Arengu!

View Comments
Next Post

Our favorite low-code tools to build an MVP for startups

Previous Post

Review of the 5 best e-commerce signup forms and checkouts