TM

Exercise: Contact Us Form

3 Infusionsoft University: Exercise © Copyright 2015, Infusionsoft, Inc. All Rights Reserved

University Exercise

Exercise — Build a ‘Contact Us’ Form

1. Hover over the Master Navigation menu and select “Campaign Builder” from the Marketing Section

2. Click on the green “Create a Campaign” button

3. Name your campaign “Contact Us Form”

4. In the tool palette on the right, select “Goals”

5. Click on “Sign Up for Newsletter” and drag it on to the left side of the campaign canvas.

The following are instructions to build a “Contact Us” form yourself; if you’d like a pre-built “Contact Us” form and campaign,

you can download one from our Marketplace by clicking on the “Get Campaign Templates” button on the campaign builder

list and choosing the “Automate Contact Requests” campaign.

4Infusionsoft University: Exercise © Copyright 2015, Infusionsoft, Inc. All Rights Reserved

University Exercise

11. In the resulting pop-out window, Click “Stlye”.

12. Select the “Simple” style.

13. Remove all elements from your webform leaving only the “Submit” button.

To remove elements, hover over them and click the trash can in the blue bar that appears.

6. Double click on the text below the goal you just added to change the goal name text.

7. Name it “Contact Us Form”

8. Double check that the badge on the lower left hand corner is purple, indicating that this is a webform goal.

9. Double click in the middle of the goal.

10. Once the webform editor opens, find the “Layout & Style” button on the right side of the screen. Click it.

14. Click to the “Snippets” tab.

68

5 Infusionsoft University: Exercise © Copyright 2015, Infusionsoft, Inc. All Rights Reserved

University Exercise

15. Click on “Paragraph” and drag it into the webform area, just above the submit button.

16. Click into the text box and replace the default text with:

In order to contact us fill in the fields below and click submit. Someone will follow up with you soon!

17. From the snippets section above, add a “Spacer” snippet below your paragraph.

18. Select the number of pixels (15 is fine) and click “Save”.

19. Click to the “Field Snippets” tab.

20. Click the “Email” snippet and drag it onto the webform below the spacer you just added.

21. Ensure that it is set to required and click “Save” in the pop-out window that appears.

6Infusionsoft University: Exercise © Copyright 2015, Infusionsoft, Inc. All Rights Reserved

University Exercise

22. From the Field Snippets tab above, grab the “Other” field and drag it below the email field you just added.

23. From the “Which Field” drop down select the bottom option that says “Create a Custom Field...”.

24. Name the custom field “Contact Us Comments”.

25. Set “Type” to “Text Area”.

26. Click on “Show advanced options” and assign this field to a tab and header. You can set tab and header to “Custom Fields” if you like.

27. Click “Save this Field”.

28. Set to Required, change the Label to say “Comments” and click “Save”.

7 Infusionsoft University: Exercise © Copyright 2015, Infusionsoft, Inc. All Rights Reserved

University Exercise

29. At the top of the screen, switch to the “Thank-you Page” tab.

30. If it’s not already open, click the “Layout & Style” button on the right side to open the dialogue box again.

31. Click on “Style”.

32. Select the style labeled “Simple”.

33. Remove all elements from your thank you page by hovering over them and deleting each component using the trash can in the blue bar.

34. Click on the “Snippets” tab.

35. Add a Title snippet.

8Infusionsoft University: Exercise © Copyright 2015, Infusionsoft, Inc. All Rights Reserved

University Exercise

36. Place your cursor in the title snippet and type out “Thank you for reaching out to us. We’ll review your comment and

follow up with you accordingly. Have a nice day!” Or something similar.

37. Grab a Paragraph snippet from the snippets section above. Place it below the title snippet.

38. Place your cursor in the default paragraph text, delete what is there and type out “To continue browsing click here.”

39. Switch to the Format tab.

40. Highlight the “To continue browsing click here” text and then click the “Link” button to make this a hyperlink.

41. Set the destination URL as your website, or wherever they were before they submitted the contact us form.

42. Click “Insert/Update”

43. Switch to the settings tab at the top.

9 Infusionsoft University: Exercise © Copyright 2015, Infusionsoft, Inc. All Rights Reserved

University Exercise

44. Set duplicate checking to “Check using the person’s email address”.

45. Add a notification email address. This is the person who will be notified when this form is submitted.

46. Edit the Email Subject to say “Contact Us Form Submission”.

47. In the upper right of the form, switch the Draft/Ready toggle to ready by clicking it once.

48. In the top left, click the “Back to Campaign” button.

49. From the tools palette on the right, select “Sequences”.

50. Drag out a Sequence (not an Email Confirmation) and set it a few squares to the right of your “Contact Us Form” goal.

51. Hover over the goal and grab the green arrow that appears, click on it and drag it to the “Untitled Sequence” to connect the two.

52. Double click on the “Untitled Sequence” text to rename it, call it “Contact Us Form Follow Up”.

10Infusionsoft University: Exercise © Copyright 2015, Infusionsoft, Inc. All Rights Reserved

University Exercise

53. Now double click on the “Contact Us Form Follow Up” sequence to open and configure that sequence.

54. From the right side tool palette, click on “Communications”.

55. Drag out an Email and place it a few squares right of the “Start” trigger (note that these will automatically connect).

56. Double click on the “Untitled Email” text to rename it, “Contact Us Form Follow Up Email”.

57. Then double click on the email itself to configure it.

58. Change the subject line to say “Thanks for your message”

59. Edit what is already in the email body, or add a new paragraph snippet to say:

“We’ve received your message. Someone will review it and follow up with you shortly. Thanks for your interest.

For your records, here is a copy of the message we received:

~Contact._ContactUsComments~”

Note: “~Contact._ContactUsComments~” references the merge field created in Step 23. Adding merge fields can be done by

clicking on the button next to the subject line.

11 Infusionsoft University: Exercise © Copyright 2015, Infusionsoft, Inc. All Rights Reserved

University Exercise

60. In the upper right, click the “Draft/Ready” toggle once to switch this email to ready.

61. In the top left, click “Back to Sequence”.

62. In the top right click the “Draft/Ready” toggle once to switch this sequence to ready.

63. In the top left, click the “Back to Campaign” button.

64. Once back on the campaign canvas, click the blue publish button in the upper right.

65. Then click the publish button again in the pop-up window that appears.

66. Once your campaign has published, click back to the “Edit” tab.

67. Double click on the “Contact Us Webform” goal icon to open the webform.

68. Click to the “Code” tab.

69. Here you’ll see three different code options; grab any of them to post the Contact Us form on your website. OR

Click on “Have Your Webmaster Do It” and add your webmaster’s email address to send them the code. OR

Click on “Use the Hosted Version” if you’d prefer to use the hosted version of this webform, or if you want to test it.

Once you’ve posted the webform to your site, it’s now live and ready to go! Once installed, it will notify the person you indicated as well as respond to the customer to let them know you’ll be in touch.