Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

How To Create Basic Contact Form In Bubble.io

In this Bubble.io tutorial video we demonstrate how to create a simple contact form within your application. When the form is submitted we'll trigger a Workflow that sends an email to you with the contents of the form.

I have 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 arrived in my inbox.

Form UI

So let's build up the UI of the form to begin with. At the very least we're going to need an email address so we know who's sending us this message. Then we also take their name and then this is a good use for a multi line input for their message. We're going to set each of these to mean that they cannot be left empty and finally put a button in.

Transactional emails explained

Okay, so let's dive into building a 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. 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 in most cases that sends a transactional email rather than a marketing email or a campaign email.

Marketing / Campaign emails

If you think of MailChimp, you use MailChimp to be able to send emails on your behalf. But in post cases they're like a campaign or marketing email and they're sent in bulk to a group of people.

Transactional email providers

Transactional emails are emails that often either immediately or shortly after sent based on an action that a user has taken. Bubble has got a built in integration with a provider called SendGrid. 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.

Sender DNS authentication

And 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 to add to your domain name, to 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 a pooled 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 and so it's more likely to end up in spam and fail to be delivered. So it is quite important to get this bit right 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 like website@yourdomainname, 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.

Workflow editor

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 because you'll have to set up your own API integration and work it out yourself using the plug in Bubbles API connector.

But if we're using SendGrid and we've got the API key, we can use Send email here. 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 as 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 sender's email address in here. Sender name will leave blank and I'll comment on that in a moment. But then we'll just put in contact form submission and we can fill this out with Name and then from our Input field. And if you haven't worked out this little quirk in the Bubble editor yet, 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. So 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.

Okay, so 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 authorised through my transactional email provider, like SendGrid 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 has 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 the identifier of the sender of this notification email is your Bubble app.

What sender address to use

It's going to be like app@yourdomainname, for example. 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's 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.

 

Latest videos

menu