Home › Forums › Quform WordPress › How can I wrap every quform widget in a div with a common ID?
- This topic has 5 replies, 2 voices, and was last updated 9 years, 8 months ago by
Ally.
- AuthorPosts
- November 4, 2015 at 6:00 pm #17348
diegocanal
ParticipantHi Ally,
Now I have, in different pages, quform widgets like:
<div class="custom-sidebar iphorm-widget" id="iphorm-widget-10">...</div>
<div class="custom-sidebar iphorm-widget" id="iphorm-widget-11">...</div>
<div class="custom-sidebar iphorm-widget" id="iphorm-widget-12">...</div>
but I would like to have all of them wrapped in a div with a common ID, something like:
<div id="iphorm-widget-wrapper"> <div class="custom-sidebar iphorm-widget" id="iphorm-widget-10">...</div></div>
<div id="iphorm-widget-wrapper"> <div class="custom-sidebar iphorm-widget" id="iphorm-widget-11">...</div></div>
<div id="iphorm-widget-wrapper"> <div class="custom-sidebar iphorm-widget" id="iphorm-widget-12">...</div></div>
What is the best way to accomplish it?
Thanks!
Regards,
—
Diego- This topic was modified 9 years, 8 months ago by
diegocanal.
November 9, 2015 at 12:47 pm #17366Ally
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
November 9, 2015 at 2:56 pm #17377diegocanal
ParticipantHi Ally,
I am not trying to have several html elements with the same ID on the same page, actually, I never have more than one form on the same page. Please, notice that on my previous post I said:
Now I have, in different pages, quform widgets like:
On the other hand, I am afraid the class iphorm-widget does not solve it. The point is that I need the wrapping element with an ID, around the whole iphorm widget, because I need to have an anchor link pointing to it. Also I cannot use the specific ID of a given form (for example: iphorm-widget-10) because I am building a page template (php) that is going to be used for diferent pages, each of them with a dfferent form in it.
The solution you’ve provided solves it, but with an undesirable side effect, it replaces the specific ID of the widget (for example: replacing iphorm-widget-10 with iphorm-widget-wrapper), because of that we loose especificity to style forms on a per form basis (for example: #iphorm-widget-10 .iphorm-outer {…)
The definitive solution would be what I asked for on my first post – injecting/adding a new div, with a general ID, (iphorm-widget-wrapper) wrapping around the whole iphorm widget.
In summary, instead of getting (with your previous piece of code):
<div class="custom-sidebar gdl-divider iphorm-widget" id="iphorm-widget-wrapper"> ... ... </div>
The ideal output would be:
<div id="iphorm-widget-wrapper"> <div class="custom-sidebar gdl-divider iphorm-widget" id="iphorm-widget-10"> ... ... </div> </div>
IMO this would be a great addition to the pluging. It might be an option that could be toggled on and off or that were toggled off when there are more than one forms on the same page.
I would be very grateful if you could provide the piece of code to achive that.
Thank you very much for your kind attention.
Regards,
—
Diego- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
- This reply was modified 9 years, 8 months ago by
diegocanal.
November 9, 2015 at 3:35 pm #17390Ally
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
November 9, 2015 at 5:29 pm #17398diegocanal
ParticipantHi,
That is what I have been doing (using the Text Widget + shortcode) so far 🙂 but it has a drawback in my case so that is why I wanted this solution.
The point is that I use the form in a sidebar and make it sticky on scroll down (using a jQuery script). To make it work I must init the script using the id or class of the parent of the widget, no mater if it is a Text Widget or a Quform Widget. Because my Text Widgets are nested whithin another div with a unique ID (I am not sure if that is done by WP or by my theme), for example:
<div class="custom-sidebar widget_text" id="text-43" style=""> <div class="textwidget"> ........our iphorm code or shortcode </div> </div>
…up till now I’ve been using the parent’s element ID (on the example above it would have been text-43), but I has not been happy with that solution because that is a unique id to that particular Text Widget – also notice that using the class was not an option because I could have more than just one Text Widget in the same sidebar – so I’ve been forced to extract that ID in every page in order to use it in the init of the sticky script.
With the piece of code you’ve just provided (BTW, I don’t know if on purpose but you put class instead of ID) I can use the iphorm-widget-wrapper ID, both, for the anchor link and the init of the sticky script, so now I am a happy man 🙂
I really appreciate your help on this matter.
Thank you!
Regards,
—
Diego- This reply was modified 9 years, 8 months ago by
diegocanal.
November 9, 2015 at 6:27 pm #17401Ally
Support StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
- This topic was modified 9 years, 8 months ago by
- AuthorPosts
- You must be logged in to reply to this topic.