Jump to content

Add a form field and script in an accordion

Recommended Posts

Hi everyone,

Is it possible to insert a small script and a form field inside an accordion which will be located in the product additional information?

This is the code I'd like to insert in one of the item of the accordion:

<script>
function rolls() {
var totalrolls = Math.ceil(((document.input.input2.value -0) + 53) * (document.input.input1.value -0) / 50000) ;
document.getElementById('txtrolls').innerText=totalrolls;
}
</script>
 
<form name="input">
<p> Height from floor to ceiling (cm): <input type="text" name="input1" value="" onkeyup="rolls()"><br></p>
<p> Total width of all the walls (cm): <input type="text" name="input2" value="" onkeyup="rolls()"><br></p>
<h4>
Number of rolls needed:
<span id="txtrolls" style="font-size:150%”> </span>
</h4>
</form>
 
Link to comment

You probably can't do that easily with SQSP's built in accordion, but there are plenty of plugin accordions that work with a markdown or code block, and hence would be much easier to add that code to. 

This is one of many options:
https://www.will-myers.com/products/p/accordion-dropdown-plugin-for-squarespace

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...
On 11/11/2022 at 10:40 PM, Arthur2465 said:

Hi everyone,

Is it possible to insert a small script and a form field inside an accordion which will be located in the product additional information?

This is the code I'd like to insert in one of the item of the accordion:

<script>
function rolls() {
var totalrolls = Math.ceil(((document.input.input2.value -0) + 53) * (document.input.input1.value -0) / 50000) ;
document.getElementById('txtrolls').innerText=totalrolls;
}
</script>
 
<form name="input">
<p> Height from floor to ceiling (cm): <input type="text" name="input1" value="" onkeyup="rolls()"><br></p>
<p> Total width of all the walls (cm): <input type="text" name="input2" value="" onkeyup="rolls()"><br></p>
<h4>
Number of rolls needed:
<span id="txtrolls" style="font-size:150%”> </span>
</h4>
</form>
 

I think you can add form field then we can try code to move it into Accordion? If you share link to a product, we will check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.