Building a Contact Form with Email Integration using Python & Streamlit

Streamlining your Customer Experience to the Next Level!

Contact Form with Python & Streamlit

Are you tired of manually managing customer inquiries and feedback through your website’s contact form? Look no further!

In this article, I will show you how to build a contact form with email integration using Python and Streamlit. With this tool, you can streamline the process of receiving, and managing customer inquiries directly to your inbox, while also improving your customer service and generating leads and sales opportunities.

With features such as form validation, recaptcha integration, and custom email templates you can ensure that you’re only receiving submissions from genuine users. And with the added bonus of Lottie animations, your contact form will be both visually appealing and engaging for users.

So what are you waiting for? Let’s get started on building your next must-have business tool!

Introduction

In today’s digital age, businesses and companies rely heavily on customer feedback, inquiries, and complaints to make informed decisions and improve their products/services.

Contact forms allow customers to reach out to companies without the need for an email or phone call. Having a contact form on your website can also make it easier for customers to find and communicate with you.

However, collecting and processing responses from contact forms can be a daunting task for businesses, especially if they receive a large volume of inquiries. This is where email integration comes in. With email integration, businesses can automatically store and process responses in their email inbox, saving them time and effort.

Business Deliverables

1. Receive feedback and inquiries from customers and clients
2. Respond to customer inquiries in a timely and efficient manner
3. Streamline the process of receiving and managing customer inquiries
4. Improve customer service and satisfaction
5. Generate leads and sales opportunities

Features

1. Form Validation: To ensure required fields are filled out.
2. Recaptcha Integration: To prevent bots, spam or malicious programs from submitting the form.
3. Email Integration: To store contact form responses and ensure that the business can follow up with potential customers.
4. Custom Email Templates: To make it easy for the business to understand the responses they receive with a good design and structure.
5. Lottie Animations Integration: To make the contact form visually appealing and engaging for users.

Requirements

To build this contact form with email integration, we will be using the following libraries and services:

1. Python 3: Python is a widely used high-level programming language that is easy to learn and use
2. Streamlit: Streamlit is an open-source Python library that allows you to create interactive web applications with ease
3. Streamlit_lottie: Streamlit_lottie is a Streamlit component that allows you to add Lottie animations to your Streamlit app
4. Requests: Requests is a Python library that allows you to send HTTP requests using Python
5. Form Submit REST API: API and Email service for HTML forms to send form submission information directly to your email without the need for any backend code or SMTP setup. For more info visit: https://formsubmit.co/
6. Notion: Template to display a “Thank You” message to the user after submitting a contact form. You can access the template which I created here: Notion
7. CSS: To improve the styling and design of the contact form. You can access the CSS code here: CSS

Project Workflow

1. Import the necessary libraries, including JSON, requests, streamlit, and streamlit_lottie.
2. Set the title of the Streamlit app and create two columns to display the Contact form and Lottie animations.
3. In the first column, write a brief introduction and explanation of the contact form. Then, create the HTML for the contact form using a string variable and the form tag to include the necessary fields: name, email, and message.
4. The form action attribute is set to the Form Submit REST API endpoint URL where the data will be posted to the provided email.
5. Additionally, we set a hidden attribute ‘_template’ to ‘table’ and ‘_next’ attribute to Notion page URL where the user will be redirected after submitting the contact form. This Notion page will display a thank you message.
6. Use the markdown function in Streamlit to display the HTML contact form, with the ‘unsafe_allow_html=True’ parameter to allow HTML in the markdown.
7. In the second column, define a function to load Lottie animations from a URL using the requests library. This function is used to load the Lottie animation and display it in the second column of the Streamlit app.
8. Use the ‘st_lottie’ function in Streamlit to display the Lottie animation in the second column, using the ‘load_lottieurl’ function to load the animation data and set various parameters for the animation, such as its speed, quality, height and width.

Demo Video

Workflow of Contact Form

Conclusion

This article showed how a contact form is an essential tool for businesses and companies as it helps them to collect valuable feedback and inquiries from their customers. With email integration, businesses can store and process responses in their email inbox, saving them time and effort.

Overall, this project is a great example of how Python and Streamlit can be used to build useful and visually appealing applications for businesses and individuals to streamline their customer experiences.

Thank you for taking the time to read this article and would you like to see the code behind this tool? Feel free to leave a clap, comment on the article and let’s connect on LinkedIn to learn and grow together!