Putting a Document behind a Modal Form to Collect Leads
HD

Harcourts Digital

Created Apr 03, 2024

Putting a Document behind a Modal Form to Collect Leads

46
    s

Harcourts Dashboard

0 Steps

📤

Upload the Document.

7 Steps
1

Click on Media Manager

Click on Media Manager
2

Click on Documents

Click on Documents
3

Click on Upload

Click on Upload
4

Click on Browse Files and find the document you want to put behind a modal.

Click on Browse Files and find the document you want to put behind a modal.
5

Click on Upload

Click on Upload
6

Next, you'll need to click Actions to copy the link to that document for later

Next, you'll need to click Actions to copy the link to that document for later
7

Click on Copy Link (Important for Later)

Click on Copy Link (Important for Later)

📝

Create the Modal Form

17 Steps
8

Next, we need to create the modal form that will be used to collect the lead's information. For this, go to the Forms tab in the Dashboard.

Next, we need to create the modal form that will be used to collect the lead's information. For this, go to the Forms tab in the Dashboard.
9

Click on Custom Forms

Click on Custom Forms
10

Click on Add New Form

Click on Add New Form
11

Type the name of the form. This will be visible to the end-user

Type the name of the form. This will be visible to the end-user
12

Type the email address that the leads will be sent to.

Type the email address that the leads will be sent to.
13

Type "Buying Guide Lead" - This will be the subject line in any leads that come through, so it is important to distinguish that this is a buying lead, selling lead etc.

Type "Buying Guide Lead" - This will be the subject line in any leads that come through, so it is important to distinguish that this is a buying lead, selling lead etc.
14

Important: Under 'Thank You Method', select 'Redirect to Link' (Important)

Important: Under 'Thank You Method', select 'Redirect to Link' (Important)
15

Under 'Thank You URL', paste the document link that we copied in step number 7. Now, when a user completes the form, they'll be redirected to the document

Under 'Thank You URL', paste the document link that we copied in step number 7. Now, when a user completes the form, they'll be redirected to the document
16

Click on Save to save the form details

Click on Save to save the form details
17

Click on Back to Form Manager

Click on Back to Form Manager
18

Next, we will add the Form Elements. This will include a full name, an email address and potentially a phone number

Next, we will add the Form Elements. This will include a full name, an email address and potentially a phone number
19

To do this, click on Edit Form Layout

To do this, click on Edit Form Layout
20

Add a Text Field to collect the user's name

Add a Text Field to collect the user's name
21

Type "Full Name" under the label and click 'Add Element to Form'

Type "Full Name" under the label and click 'Add Element to Form'
22

Click on Email Address and add that element to the form

Click on Email Address and add that element to the form
23

Click on Telephone and add that element to the form.

Click on Telephone and add that element to the form.
24

Once you're happy with how the form looks, click on Save Form Elements

Once you're happy with how the form looks, click on Save Form Elements

🎉

Add the Form to your Page and Start Collecting Leads.

16 Steps
25

Click on Pages

Click on Pages
26

Beside your desired page, click on Actions

Beside your desired page, click on Actions
27

Click on CMS to open the website builder

Click on CMS to open the website builder
28

In the Content Blocks area on the right, click the 'Call to Action and Enquiry' folder

In the Content Blocks area on the right, click the 'Call to Action and Enquiry' folder
29

From that folder, select and drag a Call to Action (CTA) block with a button onto the page

From that folder, select and drag a Call to Action (CTA) block with a button onto the page
30

Update the written text to describe your document and encourage users to download it

Update the written text to describe your document and encourage users to download it
31

Click on the button

Click on the button
32

Click on the link symbol to add your modal

Click on the link symbol to add your modal
33

Change the Link Text to 'Download' or something similar

Change the Link Text to 'Download' or something similar
34

Under Link Type, select Modal

Under Link Type, select Modal
35

Under modal, select the Form that you created earlier

Under modal, select the Form that you created earlier
36

Click on Save

Click on Save
37

Click on image

Click on image
38

Add an image of the document to encourage people to download it

Add an image of the document to encourage people to download it
39

Your block is now ready to start collecting leads. When a user clicks download, your form will pop up to collect some details before bringing them to the document link where they may read or download it

Your block is now ready to start collecting leads. When a user clicks download, your form will pop up to collect some details before bringing them to the document link where they may read or download it
40

Click on Save to save your changes and Publish to publish them live to the site

Click on Save to save your changes and Publish to publish them live to the site
Well done!
Create how-to guides like this in a snap. Get Tango now.