Jump to content

pjmsr

Member
  • Posts

    13
  • Joined

  • Last visited

Posts posted by pjmsr

  1. I was using the form on my contact/purchase page for three reasons. First, in conjunction with the third-party products "airtable" and "zapier" I had found out how to send multiple emails containing form data when I hit the submit button. Second, it was useful to be able to use the screen-formatting of fields such as name and address which react nicely when I resize my window on the desktop or when I open the page on my iphone. Third, it was useful to use the validation functionality of the form for fields such as email. I am now abandoning the use of a form for all these things, and am taking alternate approaches. I have determined how to send emails when I hit any button (more on this in a later post) and am currently evaluating how to incorporate data from other basic fields on the page, some of which need to be filled in programmatically. I will have to handle screen formatting without the form, perhaps by using basic non-form fields. I have determined that it is not too hard to validate things like the contents of text boxes as they are being edited and/or upon hitting a button. Worst case I can use html to do all these things. So it will be some more work but I know how to implement all the pieces and just need to put them all together. Thanks everyone who have posted comments above. If anyone still wants to use a form to do these things, the above posts may provide some answers. Good luck. I am now marking this topic answered.

  2. I have created a form block on my page. In addition to the form block, on my page I have put an additional code-block containing html elements (input, select, etc) outside the form. When the contents of these html elements changes their values are programmatically put into associated text boxes within the form block. I am using javascript to do this. The form block is connected to third party app "Zapier". When I hit the submit button zapier receives the form data and sends it to third party app "Airtables", which then sends out two emails. (For completeness, on the same page I have also embedded a form from third party app "Cloudtables" into a second code block which is hidden and not being acted upon at the moment). I have had good success in the zapier/airtables integrations and have been able to generate the desired the emails when hitting the form submit button -- until now. Recently I have found it necessary to listen for load-completion events, before running my javascript function which initializes the code-block and form block only when the page is fully loaded. The code below shows how I have coded this page-loading and initialization into squarespace code injection. The form didplay seems to programmatically load fine when I refresh the page, or switch tabs or regain focus. However just recently, when I have been using the page, after programmatically loading the form, if I place the cursor in a field on the form, and then hit a key, all the other text boxes on the form have their contents set to data which had been previously manually typed in on the screen. Elements outside the form are not affected. When I edit elements not on the form things behave as normal. Also, if the form is completely filled out programmatically and I hit the submit button, all the text boxes on the whole form reverts to the last data which was manually typed in since the last submit button push, and that is what is submitted. If I look at the html contents of the page, programmatic changes to form block field values do not show up like manually typed in values do. It seems as if the programmatically entered data is just not "committing" to the form block like the manually typed in data is doing -- the programmatic changes show up only on the screen. Basically I need to figure out how to get the programmatically entered data to commit to the form block prior to manually editing or submitting the form.

    function my_function() {

      // code which initializes the page including the code block fields and the form block fields

    }

    // code which runs the above code whenever the page needs re-initialized

        if(window.attachEvent) {
          window.attachEvent('onload', my_function);
        } else {
          if(window.onload) {
            var curronload = window.onload;
            var newonload = function(evt) {
                curronload(evt);
                my_function(evt);
            };
            window.onload = newonload;
          } else {
            window.onload = my_function;
          }
        }    
        document.addEventListener("load",my_function);
        document.addEventListener('focus', my_function);                            
        document.addEventListener("visibilitychange", () => {
          if (document.visibilityState === "visible") {
            my_function();
          };
        });

  3. 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.

  4. 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.

  5. Hi, I am an artist who is in the process of setting up my squarespace 7.0 website. I have my gallery page set up and my contact page almost set up, using a lot of javascript in code injection, which is working fine. I have teamed up with 3rd party apps zapier and airtable to send confirmation emails to my customers even though although I have chosen not to use an online store. I will exclusively use paypal invoices to handle all monetary transactions, because shipping costs are heavily dependent upon the shipping address. What I would like to do now is to make it easy to display and change the price and size data data associated with each piece of artwork. One idea for a solution is to store this information in an xml file which would be made accessible to the site, and then let my javacript handle things from there. Ideally I would be able to upload the file to reside on the site, and have some javascript parse the file whenever the information is needed. If I want to change some of the information I would only have to re-upload the single file to the site. But I have not been able to figure out if it is possible to somehow upload a non-image file to my 7.0 site; nor have I been able to determine if code-injection javascript would be able to access the file for parsing, even if that file could be saved on the site. Note that I prefer not to use the feature whereby metadata can be uploaded with each image, because In the confirmation emails I have included references to artwork thumbnails, and these references need to stay valid across price changes. Does anyone know if these things can be done? If I can't do it this way I will have to come up with another plan. Thanks!

  6. I have a squarespace website which currently interacts with zapier and airtable to create a new record in my airtable base every time I submit a form on my website. That same form submission also causes an acknowledgement email, containing form data, to be sent to an email address inputted by the website user into the form. In general I am trying to find a database solution which will work with my squarespace website, and airtable is one of the candidates. I need my squarespace website java script code (which I am well versed in) to be able to do the following: 1. Search the airtable base for a record; 2. perform an atomic read/update function on the record so that only one website instance at a time can read/update and no other website instance can access the record in between the read and update. I need to find out if this is possible by integrating squarespace and airtable, and if so I need to be pointed in the right direction concerning implementation. I am not certain, but if there is a solution I suspect the java script on my squarespace site would somehow have to gain access to the airtable API for my airtable base. Thanks.

     

     
     
  7. 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.

  8. 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

  9. 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

  10. Site URL: http://philipmarksart.com

    I am trying to use javascript to dynamically send emails to my customers who have inputted their email and then hit a button. The button can be a submit button for a form or just a button. My domain "philipmarksart.com" is managed by squarespace, and i have a custom gmail email "philip@philipmarksart.com" which I have connected to squarespace. I have submitted forms which send appropriate emails to this email address when i hit a submit button. I have also used third party products and have sent emails to multiple email addresses but the emails have to be set up previously and cannot be dynamically changed. So far, I've used javascript successfully to implement a lot of custom handling on this website. From what i have discerned  by web research, I believe i need to modify my squarespace and/or google DNS settings and hook up with an smtp server to accomplish this task. Google workspace provides a free smtp server which I hope i will be able to use for this purpose (although I would use other smtp servers if necessary). What i need help with is how to set up my dns records to accomplish this. Unfortunately i don't have any experience on what to add or remove from my dns table. I would appreciate any help i can get  with respect to this issue. I have attached screen shots of my squarespace dns information. I would think that this capability would be useful to a lot of squarespace users. Thanks -- pjmsr.

    DNSTable.png

    dnsNameservers.png

×
×
  • 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.