Question about inserting other text between form fields on the page

Gravity Support Forums » General » Pre-Purchase Questions

realityshifter
Member

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 14 years ago on Friday November 13, 2009 | Permalink
Kevin Flahaut
Administrator
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 14 years ago on Saturday November 14, 2009 | Permalink
realityshifter
Member

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 14 years ago on Saturday November 14, 2009 | Permalink
Kevin Flahaut
Administrator

Wonderful. I'm pleased I could help.

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