Contact Form & Integrations

At the end of the day, you do want visitors to be able to reach out to you, and you do that by using the contact form element and then combining this with your collection of leads. The first step is to create an area on your page where people can reach out to you. This is a very typical contact form. To bring in a form to your page, go to Add Elements and click Hold on the Form Element and drag it to the position where you want it. You can see these two are for for all intents and purposes, the same. I'll go ahead and delete this one, the one that we just brought in. Let's work with it. What you see here are three default fields. There are different fields for different kinds of information that you collect. This is an email field. This is a selection field where you can give people options to select from. And a paragraph is a text field where people can type in a message. Apart from the field area, you have your sent or your button area, and this is where users will select to send the information.

To work with any field, click on it and go to the field options on the far left. The first thing you'll do is to set the type. This one is an email, and that is great because we want to collect emails. You can select whether you want it required or not, and then add spacing between the fields. This applies to all fields. You have advanced options like, do you want the label shown at the top and the placeholder? And then you can set background to a small with less padding, medium or large. Let's leave it on medium. To change out the text, the placeholder or the label, select it and then type in your own. This is irrelevant. All that matters is the type of field you've set it to. To bring in a new field, select any field, click on Duplicate, go to the new field, and change out the type. I want to collect the name here, which is a small string of text. From the options, let's scroll down, and I'll find text over here. I'll select the text, And I'll set your name. If you want to use a select with a few options, you can do so.

But in this case, I've decided I don't have use for that, so I'll go ahead and delete it. And then here with paragraph, go to field. It's set to paragraph, which is a long string of text with paragraphs. And what I'll do here is just change it to your message. You can move these fields around by selecting the arrows once you have selected a field up or down, style it out with your topography settings that will apply to all of them, and then change the colors to the background, the text, borders, and even a shadow. And you can set the hover state as well. The button styles out separately. Select a button, presets for small, medium, and large, and then custom settings over here for the height. A Fill button or no fill. Change out the text, and you can have rounded corners. You can add your icon, change out the icon, different sides, or remove Again, you have control over the topography, the color of the button, and from settings, you have control over the width of the button. Once you have reduced the width of the button, you can also line it to the middle or to the right, depending on how you would like it to look in your layout.

The two important parts to the button is the link and then the setup of the button action. Let's first go to the link. This here will allow you to have a success This message after people have sent it and an error message in case something went wrong. Additionally, you also have redirect. This is very useful when people have submitted a form and you want them to go to a thank you page or an information page, then you add this. The moment they click on send, then it will also redirect them to that page. The last step will be to work on the integration of the form. Now, if you just want to collect the information within your dashboard, you do not need to make any changes here, and you can access that information from your dashboard. Let's do that first. I will save my page, then go back to the dashboard by exiting in the bottom left-hand corner, and then from this project I've been working on, at the top where the three dots are, select that and select leads. This is where the information will be received. Currently, there are no leads here. To give an example, I will preview this page scroll to the contact form at the bottom, and then add some information here.

Select send or In this case, it says button, and there is your success message. Go back to my dashboard. And now from my project, I'll go again to leads, and you will see the information populates here. I can select this and then export it or delete it. For cases like this, you will need to come back to the dashboard and check. But what if you have a distribution mailer integration or you want to set it up also so that you can receive it within your email as a notification? To do that, we go back into the project. Go to our form, select the button, and then Integrations. There are three integrations and they work concurrently. The first one is a normal email notification. Second one are distribution list or mailer integration like Mailchimp, MailerLite, Zapier. And then you also have the option to bring in reCapture. For the email, select the email notification and then the email to where it will be sent to, the subject, and the from name. You also have these short code options that you can use there. Once you have set this up every time there is a new lead generated from your site, you will get notification.

If you want to collect more fields, you're going to do that with the integration like Mailchimp. Once you have activated this, you're going to set up your API key here and then sync the fields so that you can collect the information.