How To Create Basic Contact Form In Bubble.io

Creating a Contact Form in Bubble.io

I have here the beginnings of a contact form that's going to allow anyone who visits my Bubble app to send me a message and Bubble is going to generate an email notification and that will arrive in my inbox. So let's build up the UI of the form to begin with. At the very least, we're going to need email address so we know who's sending us this message. And then we'll also take their name and then this is a good use for a multi-line input for their message. And we're going to set each of these to mean that they cannot be left empty. And finally put a button in.

Understanding Transactional Emails

Okay, so let's dive into building workflow. But before we do that, just a few words about transactional emails. We need to have a service that will enable our Bubble app to send emails and this is slightly different to how you would send an email from a person to a person. We're talking now about a server, your Bubble app, sending an email to you. And that's known as a, in most cases, that's known as a transactional email rather than a marketing email or a campaign email.

Configuring Email Providers

If you think of MailChimp, you use MailChimp to be able to send emails on your behalf but in most cases, they're like a campaign or marketing email and they're sent in bulk to a group of people. Transactional emails are emails that often either immediately or shortly after sent based on an action that a user has taken. And Bubble has got a built-in integration with a provider called SendGrid. And you can, once you've added a domain name to your Bubble app, you can fill in these two parts here in order to authenticate and to be able to send emails from your application to yourself in this instance via SendGrid.

The Importance of Email Authentication

What a provider like SendGrid or Mailgun or Postmark, just to name another two, what they do is they help you configure your domain name by providing records that add to your domain name, add to the DNS, that authenticate that this app has permission to send an email on your behalf under your brand identity, under your domain name. And if you don't have those things in place, for example, Bubble does still let you send emails but it's more like from like a pulled email address. So it's lacking your branding and it's lacking these additional checks to say this email is sent under the authority of this domain name.

Avoiding Spam Filters

And so it's more like to end up in spam and fail to be delivered. So it is quite important to get this bit right to whether you're using SendGrid, Mailgun, Postmark, that you set up your domain name correctly because if you're going to send an email from an email address at like at, so like website, actual domain name, and you haven't got these steps in place to authenticate sending that email from the server, it is likely to end up in spam and you might end up building a bad reputation around emails coming from that address.

Setting Up the Email Workflow

So let's assume that you have filled this in and we're using SendGrid because that allows you, we need to go to our button, start workflow, because that allows you to use this built-in menu. If you're using a different email provider, again, Mailgun, Postmark, I've used both of them in the past, they're very good, you'll find them under plugins 'cause you'll have to set up your own API integration and work that out yourself using the plugin Bubble API connector, but if we're using SendGrid and we've got that API key, we can use send email here.

Configuring the Email Content

And so this one is going to be sent, you would put your own address in here because you want to receive the notification when someone submits this form. We can specify a reply to address. So this is not the address that the message is coming from, this notification, it is if in our email client we hit reply, who does that go to? And so it would make sense in most cases to put in the message senders email address in here. Send the name, we'll leave blank and I'll comment on that in a moment, but then we'll just put in contact from submission and we can fill this out with name and then from our input field.

Formatting the Email Content

And if you haven't worked out this little quirk in the Bubble editor yet, I'm not actually, my cursor isn't actually on a new line here. I have to add in what looks like an extra line. It's just a quirk when you're using dynamic data. See, there we go, it gets rid of one of those lines. So I want these to appear on new lines and then I'm going to put in two new lines, message. There we go.

Ensuring Email Authenticity

Okay, so this will, assuming I have entered my email address here, this will send an email from an identity to do with my domain name that I've authorized through my transactional email provider like Sengrid with this subject and this email content. But if I was to hit reply to it, I would be able to send a message directly back to the email address that's been entered here. But it's important to make your email not lose authenticity, not run a chance of being put into spam. It's important that this, the identifier of the sender of this notification email is your Bubble app. It's going to be like app at your domain name, for example.

Maintaining Email Integrity

And so when filling in these fields, it's important not to pretend to be sending an email on behalf of the person who's filled in the form because you don't have the authority or the right to pretend to send an email from their email address. So the sender of this email, because it is a notification, is your Bubble app, is an address that you've set up through your transactional email provider. But by using the reply to field, you can just as easily hit reply in your email client and send an email back to the person who submitted this form.