PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Question about inserting other text between form fields on the page

  1. Before I purchase the plugin, I have a question about whether or not it can handle the kind of form I need to build. I need a form that will allow the visitor to listen to three separate sound files and then click a radio button next to the one they like best. I have a plugin that handles playing the audio files wherever I insert the appropriate hyperlink or tag (the plugin is WP-Audio), but I need a form that will allow me to insert those links either above the list of radio buttons or next to each radio button.

    So basically, I need a plugin that can make a form with a layout that is something like either of the two layouts in this mock-up: http://www.beyondawakening.com/images/form-layouts.jpg

    Can I do that with the Gravity Forms plugin? Every form plugin I've found so far will not allow me to insert any other text, links, or anything else so it appears between one field and the next field in the form. I need to be able to insert some text to describe each section, and to insert the links to the audio.

    Thanks in advance for your help.

    Posted 12 years ago on Friday November 13, 2009 | Permalink
  2. This version of Gravity Forms allows HTML in the field description area. You could put your links in there if you wanted and have this functionality.

    Form Admin Screenshot

    If you preferred to have the audio links lined up with the choices like in your example, it would take some CSS tweaking to pull off, but it's pretty easy to do. I replicated your example in just a few minutes with a simple form and a little markup and CSS in the page editor.

    Demo Screenshot

    I created the form with all the necessary fields and added it to a new page. Once the form was added into the page editor (HTML view) I added the links and a CSS style block directly into the editor and placed it directly above the form reference.

    Page Editor Screenshot

    Basically, I've absolutely positioned the unordered lists next to the corresponding form fields. (note: my content container is set to position:relative so the absolute positioning is relative to the form, not the top left corner of the page)

    Here's the code I added directly above the form short code. It's just to give you an idea of what I did, you'll need to customize everything to fit your particular form styles.

    <style type="text/css">
    ul.audiolists {position:absolute; left:225px;}
    ul.audiolists li {list-style-type:none; margin:0 0 10px 0;}
    ul.audiolists li a {background-image:url(http://dl.dropbox.com/u/688846/gravityhelp/play_icon.gif); background-repeat:no-repeat; background-position:left center; padding: 0 0 0 22px; display:block; line-height:22px;}
    ul#audiolist1 {top:190px;}
    ul#audiolist2 {top:355px;}
    ul#audiolist3 {top:520px;}
    </style>
    <ul id="audiolist1" class="audiolists">
    	<li><a href="#">Play Audio 1</a></li>
    	<li><a href="#">Play Audio 2</a></li>
    	<li><a href="#">Play Audio 3</a></li>
    </ul>
    <ul id="audiolist2" class="audiolists">
    	<li><a href="#">Play Audio 1</a></li>
    	<li><a href="#">Play Audio 2</a></li>
    	<li><a href="#">Play Audio 3</a></li>
    </ul>
    <ul id="audiolist3" class="audiolists">
    	<li><a href="#">Play Audio 1</a></li>
    	<li><a href="#">Play Audio 2</a></li>
    	<li><a href="#">Play Audio 3</a></li>
    </ul>

    So, there are a couple of ways to accomplish this pretty easily. If you don't mind doing a little CSS work post form creation, you can style it pretty much any way you'd like to.

    Posted 12 years ago on Saturday November 14, 2009 | Permalink
  3. Wow, that's fantastic! That's exactly what I was hoping for. I've been looking all over the place for a user-friendly way to do this. I'm so glad I found your site. I'm definitely going to order the plugin.

    Thanks again!

    Posted 12 years ago on Saturday November 14, 2009 | Permalink
  4. Wonderful. I'm pleased I could help.

    Posted 12 years ago on Saturday November 14, 2009 | Permalink