Jump to content

Java Script and Form Blocks

Recommended Posts

Site URL: https://www.philipmarksart.com

I am an artist interested in selling my paintings (originals and prints) online. Shipping for each piece is heavily dependent on the customer address and so must be calculated manually for each order. Thus i cannot use a standard store. When I have reviewed an online order, I will manually use paypal to send the customer the invoice, so my website does not have to handle any money. I would like to create a form from which a customer can request an invoice for purchase of chosen works. When a client submits the form they must immediately receive an automatic email confirmation containing all the information about the order, and I must be notified of the request. Through experimentation and research I believe I have found an integration of the products Squarespace, Zapier, and Airtable can be used to implement this functionality. If i use a contact form provided by these products I have found that I can get this concept to work. However, for various reasons, I also want the form fields showing on my squarespace website to be manipulated by squarespace javascript, and to use the javescript to process and populate the fields during customer interaction, prior to submitting the form. If I try to use any of the product's provided contact forms or a squarespace form block I do not have programmatic access to the form fields, and so I have opted to build a form from scratch inside a squarespace code block. I have coded a form (see snapshot attached) and got the javascript to work with it. The form doesn't seem to be recognized by squarespace as a contact form. At the very least I need to determine the value of the "action" attribute of the form, and there may be other things which I do not know. I hypothesize that if squarespace recognizes the form as a contact form then zapier will be able to access it and transfer the information in the fields to Airtable which I have shown will send the confirmation email to the customer. Thanks. pjmsr

Html.png

Form.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thanks for your quick response. Basically I am an artist aiming to sell my paintings on my squarespace website. I cannot use a squarespace store because the shipping costs depend heavily on the customer address, and need to be calculated manually by me. Once I have the order information I plan to use paypal to send each customer an invoice. My website will not handle monetary transactions. The main things needing to be done are:

  1. Have the user submit a form which automatically sends an email or other notification to me. The email needs to contain all the order information. This is easy to do via a squarespace custom contact form and I have done this.
  2. The form submission must send an immediate confirmation email (including all order information) to the potential purchaser, because the customer will need to keep track of what they have ordered. I have tried but have not been able to figure out how to send emails by using javascript. But once a squarespace contact form is filled out, I have been able to accomplish this via the third-party integrations with vendors Airtable and Zapier. Once the integrations are set up, all I have to do is fill out the form and hit the submit button. Then the user receives the confirmation email.
  3. I need to be able to manipulate my form fields with javascript so that I can do things like: Save/retrieve form data to/from my device using cookies; select paintings on my gallery page, click an image to take me to my ordering page; automatically fill out some fields on the form with the information for the clicked artwork image; fill select-box options on the form with a list of all my paintings; allow the user to choose a painting using the select-box which will cause some of the other fields on the form to be filled out. I have working javascript code which does all this while interacting with custom fields that I have coded in a code-block.
  4. I am hoping to figure out a way to do one of the following three things: Actually read/write from/to the content of the fields in the squarespace custom contact form using javescript; or figure out how to put a custom contact form into a code block which would need to be recognized by the Airtable and Zapier products; or figure out how to send emails from my squarespace site with javascript.
  5. Note: Zapier documentation says it only works with form-blocks (including custom contact forms).
  6. Note: I cannot use the squarespace subscription functionality because a user can submit several orders and must get a separate confirmation email for each.

Please let me know if you need more information. Thanks, pjmsr

Link to comment

I have solved about 95% of my problems concerning this venture. I have found that when I have placed a form block on a page, I can read from and write to any of the form field elements using javascript by getting a reference to each field using the using function "document.getElementsByTagName().  Example:

     var allInputBoxesArray = document.getElementsByTagName('input');

returns an array of all fields of type 'input' in the form. Then I can I can access the content of any specific field by indexing into the array. Example:

     var inputBox0 = allInputBoxesArray [0];

I have also figured out how to return an immediate automated confirmation email response directed to an email address which the customer has inputted onto my form, which occurs when the customer hits the submit button. To do this I have used Squarespace integrated with the third party products "Airtable" and "Zapier". I am even able to automatically put thumbnail images of my art into the confirmation emails so that the customer is confidant of what they have requested. But there is one problem left to figure out.

One kind of field in my form is a 'select' field which the user clicks and then selects one of the options from a dropdown. This works fine if I pre-define the dropdown options when designing the form. However, I would like to programmatically populate the options into my select box during run-time, with the names of all my paintings. The options are easy to populate at run-time using javascript, but if I have changed the options with javascript then the form will not validate after hitting the submit button. Instead, I get a red error indication which states that the select box does not have a valid value, and then the form will not submit. I'm trying to find a way to somehow disable validation or create a custom validation at least for that select box element field. I have tried making the field "not required" but that doesn't help. Any suggestions would be appreciated.

What I might try next its to put the select element box on the same page but not on the form, and then when I select something I will programmatically place the text of the appropriate result into a (possibly hidden) text field on the form which should then be able to be submitted. Thanks, pjmsr.

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.