Creating My Account Page

In this lesson, we will create a very simple My Account or Profile page.

1. Open your WordPress Dashboard > Pages > Add New

2. Name the Page and Select the Protection Level

Check the membership levels of who should be able to see this page.

3. Create the Page

4. Where to find the shortcodes?

Shortcodes are located at https://docs.imember360.com/category/shortcodes/

5. Find Shortcode for First Name

6. General Membership Shortcodes

7. Find User’s Membership Level

8. Explanation of Shortcode

When you click on a shortcode, the explanation will appear in the column on the left.

9. Shortcode to show how long they have been a Member.

10. i4w_user_registered shortcode explained

11. Open Infusionsoft > Marketing > Campaign Builder

12. Go back to the campaign you created in Infusionsoft during Infusionsoft Setup

Mine is called Membership Demo.

13. Drag a Request Information button over and type a name for it.

To change the name below the button, double click the text.

14. Double click the Update My Account Information button to open configuration box

This is the starting place. Add the fields you want updated.

15. To add Name information hover over First Name fields

16. Add Last Name field

17. Drag the Address button from the Field Snippets

18. Select the desired fields and change labels if needed

I took the billing off and the number 1 from Street Address 1.

19. Add phone number if desired

20. Change submit button

21. Change text and center (if desired)

22. Set Thank you page

You can set up a Infusionsoft thank you page or redirect them to the page they were on.

23. Mark the web form as Ready

24. Click Back to Campaign

25. Click Publish

26. Click the Edit tab and Double Click the Update My Account web form button

27. Click the Code tab

28. Select “HTML Code (unstyled)”

29. Copy the code.

30. Open your My Account page in WordPress

31. Paste the code between the [i4w_webform] shortcodes

32. Style your form, if desired.

The form was taken out to show you just the div. It uses a class called round-box.
You can add this css to your custom css file.

div.round-box {
  width: 350px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  border: 2px #333333 solid;
  padding: 20px 10px 10px 10px;
  margin: 10px;
}

div.round-box-sm {
  width: 220px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  border: 2px #333333 solid;
  padding: 20px;
  margin: 0;
  text-align: center;
}

div.infusion-field {
  margin-left: 20px;
}

input.infusion-field-input-container {
  margin-left: 50px;
  margin-right: 30px;
  float: right;
}

33. Add a Change Password box

Here is the code:

[i4w_password_change buttontext='Change my password']

I put it in a div class called “round-box-sm”. The css is above.