Receive Email with Data from Custom Forms or Collections

Hey there, incredible web creators! Hope you’re having an amazing day. Today, I want to dive into something pretty crucial if you're dabbling in the world of Wix and building custom forms. In this post, we'll be deep-diving into how you can receive notifications for form submissions directly to your email rather than just storing them in collections. Are you excited? Let's roll!

When you create custom forms on Wix, you might have noticed that, by default, the data only gets stored in the collections. This setup works fine for some use cases. But what if you need this information to land directly in your email inbox? You get Wix notifications upon form submissions, but they don't contain the actual input data. Uh-oh! 😱 Although the regular Wix forms allow for email notifications featuring said data, your custom forms might leave you a little befuddled. But don't worry, my friend, I've got your back—let’s walk through this step-by-step!

Getting Started with Wix Editor

First up, we’re going to start from scratch with a new Wix project. This is because Wix is continually updating its features and it’s always a good idea to have the latest insights. As a best practice, I tend to skip past a lot of the provided templates because I love the flexibility and control of building a website from scratch. Wix offers different ways to build—like ADI for the basics or Editor X for responsive design aficionados. But if you’re looking for a comfortable balance of control and features, you’ll probably want to stick with the classic Wix Editor as you get your feet wet.

Setting Up Your Form

Let's create an event registration form as our example—for this, you’ll want to enable the Developer Mode. This will give you access to custom inputs and fields. We’re going to build a form with fields like Full Name, Email, Phone Number, and so on. Remember to add the form fields before creating your collections; this will make it easier when you're deciding which fields you need.

Create Collections

In Wix, your collections store different sets of data. Head over to Content Manager > Collections > Create New Collection and label it something intuitive, like "Registration." Following this, it’d be a good idea to modify your collection’s permission settings, which can be found under the new updates. Set permissions according to who can view, add, update, or delete entries in your collection.

Connecting Form Fields to Collections

Go back to your forms and connect each field to your data set using the Content Manager. Make sure your data set is set to Write Only to prevent any unintentional edits or errors. This step is crucial as it bridges your form and collection, ensuring that inputted data gets properly stored.

Writing the Code for Notifications

Here we go! This is where the magic happens. With a little bit of coding, you can automate sending the form data to your email. In the Wix Editor, under your form, paste the code snippet. Make sure the form fields defined in your code match with what you set up in your collection. The most significant customizations here include the field key in your collections, the collection name, and your user site ID.

Adding Data Sets and Event Handlers

Back in your content manager, add datasets to your collection and define handlers for events like `onAfterSave`. This ensures every time a form is submitted, your function to send email notifications gets triggered.

A Quick Trick with Wix Email Trigger

To create the notification emails, travel over to your Wix Dashboard > Developer Tools > Trigger Emails. Here you can structure the email notifications by adding variables for each data field. Define what each piece of data represents to make your emails insightful and clear. Yay!

Receiving Email Notifications

Upon successful setup, data submitted via your forms will be packaged in emails and sent to the specified addresses. You can breathe a sigh of relief—no more hunting for submissions in collections!

Automating with Wix Automations

Maybe you're short on time or just need a simple notification setup. Wix Automations also offers a straightforward alternative. It'll let you know a submission has occurred, though it won’t send all of the data as our coding method does.

Final Thoughts

Custom forms with email notifications can feel intimidating at first, but with this walkthrough, I hope you’re feeling a bit more confident and ready to implement this in your projects. Send me a comment or a message if you run into any hiccups, and I'll be happy to lend a hand.

---

Join the NewForm Community!

Over at NewForm, we're all about propelling your design skills and providing you access to a wealth of resources. With us, you can enter web design contests, engage in weekly skill-building events, and connect directly with industry professionals. Whether you're a complete newbie or a seasoned developer, NewForm is the launchpad to take your skills to new heights. So, why wait? Dive into our community today for a chance to excel in the web development field!

---

Until next time, happy coding! 🎉