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

In general terms it is possible to alter forms with JavaScript. But without knowing more details about exactly what you are trying accomplish, it is impossible to know if JS can do what you want.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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
  • 3 months later...

Hello, Liked what I read here. It helped me. I am also trying to place some values of some fields from my javascript code into a hidden field on the form, so that I can have these data in the email that is submitted.

Nevertheless, I still do not know how to do that. I I have found that the hidden fields are variables in the form with names that start with SQF_FIELD_NAME, so in my javascript I did:

SQF_MENU = menu

but this did no work the field is not populated in the form.

I have read here that you do use the  document.getElementsByTagName('input') to get the values of the form, have you figured out to set the values in the form?!

Link to comment
1 hour ago, HadiAlexandre said:

I am also trying to place some values of some fields from my javascript code into a hidden field on the form, so that I can have these data in the email that is submitted.

There are two parts to setting the value of a field. Targeting the field and getting/setting it's value.

const element = document.querySelector ( '[name="SQF_MY_HIDDEN_FIELD"]' );

You of course replace SQF_MY_HIDDEN_FIELD with the name of your hidden field.

Then you can get or/and set the value of the field.

const myValue = element.value;

 

element.value = 'my value';

If you just want to stuff a value into a field you can do it all in one statement.

document.querySelector ( '[name="SQF_MY_HIDDEN_FIELD"]' ).value = 'new value';

If you have more than one hidden field with the same name on the page then you'd need to target it's form and field.

Although the syntax of JavaScript is very strict how you tackle a particular issue is up to you. My advice is very general and not meant to be a final solution.

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 1/22/2023 at 8:14 PM, creedon said:

There are two parts to setting the value of a field. Targeting the field and getting/setting it's value.

const element = document.querySelector ( '[name="SQF_MY_HIDDEN_FIELD"]' );

You of course replace SQF_MY_HIDDEN_FIELD with the name of your hidden field.

Then you can get or/and set the value of the field.

const myValue = element.value;

 

element.value = 'my value';

If you just want to stuff a value into a field you can do it all in one statement.

document.querySelector ( '[name="SQF_MY_HIDDEN_FIELD"]' ).value = 'new value';

If you have more than one hidden field with the same name on the page then you'd need to target it's form and field.

Although the syntax of JavaScript is very strict how you tackle a particular issue is up to you. My advice is very general and not meant to be a final solution.

 

It has worked now. Thanks very much for your help. 

Now I need that in the email that is sent to user using zapier the content is enriched with the description of the values, not only the values.

For instance, I have the field menu with value Petra. This one is easy to find, because they are fixed values, but other fields not so easy.

This is an example of the email I received:

2/2/2023
Andalusia
2
160
peanuts
{First=Joao, Last=Alexandre}
4/3/1988
345345346

I would like to have the name of the fields in the email:

Date of the event: 2/2/2023

Menu: Andalusia

....

Is this possible?

 

Edited by HadiAlexandre
Link to comment
1 hour ago, HadiAlexandre said:

It has worked now. Thanks very much for your help. 

Now I need that in the email that is sent to user using zapier the content is enriched with the description of the values, not only the values.

For instance, I have the field menu with value Petra. This one is easy to find, because they are fixed values, but other fields not so easy.

This is an example of the email I received:

2/2/2023
Andalusia
2
160
peanuts
{First=Joao, Last=Alexandre}
4/3/1988
345345346

I would like to have the name of the fields in the email:

Date of the event: 2/2/2023

Menu: Andalusia

....

Is this possible?

 

Forget my last request , I found how to do it in zapier.

Link to comment
  • 2 months later...

This solution is the same as that for another of my questions concerning how to send emails when hitting a form submission button. Both problems have been taken into account by the approach I have settled on. The solution which I have come up with is to integrate with third party products "zapier" and "airtable" to format and send emails to my customers when they submit a form from my squarespace 7.0 website. On my website,  my "contact" page now has text fields, radio button fields, and an artwork image, none of which are part of the form. The page also has a single form consisting only of input text fields, an email-field, a name-field, an address-field. and couple text area fields. Half of the form fields I have chosen to completely hide using javascript.  When a customer edits one of the non-form fields, I use javascript to place the results in corresponding hidden fields on my form. When my customer hits the submit button, all of the form fields are sent through "Zapier" to "Airtable" to create a new airtable record. When airtable senses that a new record has been created it sends a confirmation email to the customer's email address, and also an email to my website email address. The emails contain all the information from my website contact page,  and also display customer-selected artwork images created by referencing images stored on my website. Image URLs are passed to the emails through hidden text fields. The look, feel, and mechanics work great. The last thing I have to do is to create a way to save, access, display, and be able to easily change, the size and price information for artwork masters and prints. There are still some things I am working out to do that for which I have opened a new issue. Thanks for your interest and help.

Link to comment
  • 2 months later...

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.