How to Create Stunning Surveys in ClickFunnels - Complete Tutorial

For More Training on ClickFunnels 1.0 and 2.0, Membership Sites, Courses and Custom Code Hacks - Go To CFninjas.com
Check out the One Funnel Away Challenge here… funneldesignma...
Alright Paul, you wanted to know how to set up a survey element in ClickFunnels to look like a specific example, so let's dive right in. I’ve set one up already, and here’s the final result. I’ll walk you through the entire process, step by step, so you can replicate this yourself.
First, we’ll start by adding a new section. I initially thought a wide section was the way to go, but it turned out a medium section with a white background was what we needed. Adjust the border to 15 and the drop shadow to 40. Inside this section, we’ll create two rows: one with two columns and one with a single column. In the first row, place an image element on the left and a headline element above a paragraph element on the right. Align these elements, and we’re good to go for the first part.
Next, we’ll create the bottom row by adding a one-column row. To match the survey box background color from the original example, right-click, inspect the element, and copy the background color code. Paste this color into the background settings of our survey element. Adjust the padding and border settings to zero so it aligns perfectly with the section’s edges. Don’t forget to round off the corners of the section to complete the look.
Now, we move on to adding the survey element itself. Drag in the survey element, remove the progress bar, and replace it with a subheadline. Set up your questions and responses, in this case, just a simple "Yes" and "No". To match the example, switch from a vertical list to a 2x2 grid layout, and hide the radio button icons. Align the text properly and adjust the subheadline size for better visibility.
For the final touches, we need to tweak some CSS. Inspect the original button elements to understand their styles, especially the background color and box shadow. Copy these styles into ClickFunnels. Ensure the buttons are centered, remove unnecessary float settings, and adjust the padding, border radius, and margins to ensure they look neat and aligned.
One last detail: the hover effect. In the original example, hovering over the buttons slightly changes their appearance. To replicate this, adjust the hover settings in the CSS. Make sure the hover effect is subtle but noticeable, enhancing the user experience without overwhelming the design.
So there you have it, Paul. This step-by-step guide should help you recreate that survey element exactly as you wanted. If you have any more questions or need further assistance, just let me know. Happy building!