In our previous Formidable Pro tutorial, we constructed a form that enables your site's visitors to leave an entry in a guestbook. This tutorial picks up where Part 1 left off and walks you through the steps for creating a custom display to show your entries on one of your site's pages.
The video will walk you through the following Formidable Pro features:
- Custom Display Panel
- Custom Display Info
- Form and Display Type
- Content
- Advanced
In addition, we'll walk through the source code displayed below and explain each section and what it does.
The custom display source code is below1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!-- space between each guestbook post --> <div style="clear: right;"> <p> </p> </div> <!-- working code to display the guestbook entries --> <div style='padding: 25px; border: 1px solid #000000; line-height: 1.4em; width: 100%'> <!-- display the rectangle, change the color to match your theme --> <!-- name, url & email --> <div style="display: inline; font-weight: bold; font-size: large; vertical-align: text-bottom;">[ihzfpx] [x1jxfj] <!-- email --> [if bgb7ao not_equal=""] <!-- if email is not empty --> <a href="mailto:[bgb7ao]"><img src="http://<your-domain-path>/email.gif" alt="Send poster an email" style="float: right; position: relative; right: 75px;" /></a> [/if bgb7ao] <!-- url --> [if 2t1gv6 not_equal=""] <!-- if url is not empty --> <a href="[2t1gv6]" target="_blank"><img src="http://<your-domain-path>/website.gif" alt="Visit Poster's website" style="float: right;"/></a> [/if 2t1gv6] </div> <!-- entry creation date --> <!-- date & ip --> <div>[created-at format='D, j F Y']</div> <!-- refer to php documentation for date formats --> <!-- horizontal line separator --> <hr style='border: 1px solid #DDDDDD; width: 50%;' align='left' /> <!-- message and country--> <div>[47kidn]</div> <div style="font-style: italic;">[arve91]</div> </div> <!-- close the rectangle --> |
This is how the custom view appears after applying the code:
Feel free to download the source code.
1Author's note: I recently changed the custom view source code to eliminate the tables and use HTML <div> tags and CSS for positioning the data.
I just wanted to say thank you for such a great tutorial!
Hi Victor,
I gradually worked my way through the custom display tutorial successfully The only snag was with FormidablePro and WordPress updating things so that the build stopped displaying the insert panel until the updates were applied. I’m also glad I have done a bit of PHP programming as that knowledge was needed. All in all though, I’m glad you have added a useful perspective on building custom display panels.
Best,
Tom Birchmire