Jump to content

LoftyDevs

Circle Member
  • Posts

    42
  • Joined

  • Last visited

Everything posted by LoftyDevs

  1. Can't add two text field in squarespace 7.0 Recording 2024-06-13 163732.mp4
  2. I can provide you a code with animation & styles @SmallSitesSarah Lead generation form <!DOCTYPE html> <html> <head> <title>Lead Generation Form</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f8ff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #leadForm { background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; transition: transform 0.5s ease-in-out; } #leadForm.fade-out { transform: scale(0.5); opacity: 0; } label { display: block; margin-top: 10px; color: #333333; } input[type="text"], input[type="email"] { width: calc(100% - 20px); padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #28a745; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; width: 100%; font-size: 16px; } button:hover { background-color: #218838; } </style> </head> <body> <form id="leadForm"> <label for="petName">Pet name:</label> <input type="text" id="petName" name="petName"><br><br> <label for="gender">Gender:</label> <input type="text" id="gender" name="gender"><br><br> <label for="age">Age:</label> <input type="text" id="age" name="age"><br><br> <label for="weight">Weight:</label> <input type="text" id="weight" name="weight"><br><br> <label for="email">Your email address:</label> <input type="email" id="email" name="email"><br><br> <button type="submit">Submit</button> </form> <script> document.getElementById('leadForm').addEventListener('submit', function(e) { e.preventDefault(); const petName = document.getElementById('petName').value; const gender = document.getElementById('gender').value; const age = document.getElementById('age').value; const weight = document.getElementById('weight').value; const email = document.getElementById('email').value; // Store data in sessionStorage sessionStorage.setItem('petName', petName); sessionStorage.setItem('gender', gender); sessionStorage.setItem('age', age); sessionStorage.setItem('weight', weight); sessionStorage.setItem('email', email); // Add fade-out animation to the form document.getElementById('leadForm').classList.add('fade-out'); // Wait for animation to finish before redirecting setTimeout(function() { window.location.href = 'checkout.html'; }, 500); // 0.5 second }); </script> </body> </html> the user is redirected to the checkout page. with auto fill <!DOCTYPE html> <html> <head> <title>Checkout Form</title> <style> body { font-family: Arial, sans-serif; background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #checkoutForm { background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); padding: 20px; width: 400px; opacity: 0; animation: fadeIn 1s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } label { display: block; margin-top: 10px; color: #333333; } input[type="text"], input[type="email"] { width: calc(100% - 20px); padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #007bff; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; width: 100%; font-size: 16px; } button:hover { background-color: #0056b3; } </style> </head> <body> <form id="checkoutForm"> <label for="email">Your email:</label> <input type="email" id="email" name="email"><br><br> <label for="name">Your name:</label> <input type="text" id="name" name="name"><br><br> <label for="petName">Pet name:</label> <input type="text" id="petName" name="petName"><br><br> <label for="species">Species:</label> <input type="text" id="species" name="species"><br><br> <label for="breed">Breed:</label> <input type="text" id="breed" name="breed"><br><br> <label for="gender">Gender:</label> <input type="text" id="gender" name="gender"><br><br> <label for="age">Age:</label> <input type="text" id="age" name="age"><br><br> <label for="weight">Weight:</label> <input type="text" id="weight" name="weight"><br><br> <label for="healthConcern">Your pet's health concern:</label> <input type="text" id="healthConcern" name="healthConcern"><br><br> <label for="medications">Current medications:</label> <input type="text" id="medications" name="medications"><br><br> <button type="submit">Checkout</button> </form> <script> window.onload = function() { // Retrieve data from sessionStorage document.getElementById('email').value = sessionStorage.getItem('email'); document.getElementById('petName').value = sessionStorage.getItem('petName'); document.getElementById('gender').value = sessionStorage.getItem('gender'); document.getElementById('age').value = sessionStorage.getItem('age'); document.getElementById('weight').value = sessionStorage.getItem('weight'); } </script> </body> </html>
  3. Might be this video and plugin helps you. Plugin : https://conversiontracking.io/shop/p/currency-converter-plugin-for-squarespace-71 Video : https://youtu.be/jF1R7-IKdG0?si=hRqXG4geO75vz7QY
  4. <style> .header-title-logo img { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert=’1′); } </style> Where to add the code: Home Page Settings >> Advance
  5. sorry @raego h1 {font-family: 'MabryPro-Medium' !important; font-size: 8vw !important; line-height: 100% !important; margin-top: 0px; margin-bottom: 0px; } h2 {font-family: 'MabryPro-Medium' !important; font-size: 3.8vw !important; line-height: 1.1 !important; margin-top: 0px; margin-bottom: 0px; } h3 { font-family: 'MabryPro-Medium' !important; font-size: 5vw !important; line-height: 1.1 !important; margin-top: 0px; margin-bottom: 0px; } h4 {font-family: 'MabryPro-Medium' !important; font-size:36px; line-height: 1.1 !important; margin-top: 0px; margin-bottom: 0px; } p { font-family: 'MabryPro-Regular' !important; margin-top: 0px; margin-bottom: 10px; font-size: 22px; line-height: 140% !important; } p2 { font-family: 'MabryPro-Regular' !important; margin-top: 0px; margin-bottom: 10px; font-size: 36px !important; line-height: 140% !important; } p3 { font-family: 'MabryPro-Regular' !important; font-size: 14px !important; line-height: 100% !important; } .sqsrte-small { font-family: 'MabryPro-Regular' !important; font-size: 14px !important; line-height: 100% !important; } .sqs-block-content { font-family: 'MabryPro-Regular' !important; font-size: 12px !important; line-height: 150% !important; } .header-nav *, nav.header-menu-nav-list * { font-size: 18px; color: #FD0 !important; font-family:'MabryPro-Medium' !important; text-align: center; } .sqs-block-button-element, .sqs-button-element--primary{ font-family: 'MabryPro-Regular'!important;} you can use a this type of code may be working this code replace with your font
  6. Squarespace allows you to inject custom CSS into your site. You can use this feature to override the default behavior and ensure that your content at the top of the page remains fixed in position without any background bar appearing. Here's a sample CSS code you can try
  7. you can use this #collection-ID-12345 p, #collection-ID-12345 h2 { /* Replace 12345 with your actual ID */ font-family: 'Sofia' !important; } p, h1, h2, h3, span { /* Targets paragraphs, headings, and spans */ font-family: 'Sofia' !important; }
  8. Your current code targets all paragraphs with p *. The asterisk (*) is a universal selector and can be overridden by more specific selectors. Since headings are working, they likely have a more specific selector applied to them. you can use particular id or class for use this font I'll send you a code and second option using this CSS for Increased Specificity
  9. hello, I have Same Issues Create but I have Solution For you @media (max-width: 799px) { .section-id > p > a { padding: 0.4em; color: white; background: #4b4bd7; border-radius: 4px; /* width: 100%; */ font-size: 1.05rem; } } using this type of code if can't working the property using the !important also and also using this type of property for primary secondary btn .header-menu-cta replace with section-id .header-menu-cta > .theme-btn--primary { background: #fdb812 !important; color: black !important; border: none !important; } using media query is very important
  10. Hello I am working on a project page for a design firm in 7.1 The PLAN was to make a project product categories and then use the Filter to filter products by price and do so via CATEGORIES Thanks
  11. have you tried this solution if you haven't tried this Solution https://developers.squarespace.com/view-json-data
  12. Very big button In home page set spacing properly in client application page between paragraph and form Set dropdown menu when we open the option all navlinks shown outside the menu . Button is very big in remote page In about section increase paragraph font-size I send image of sidebar menu it's not looks good while we open the dropdown pages. face to face page's button is good implement that in all over pages, I send image also.
  13. Here is the full code .accordion-item__description:before{ content:" "; display:block; width:250px; height:120px; background-image:url(gus.jpg); background-size:contain; background-repeat:no-repeat; margin-right:15px } .accordion-item:nth-child(2) .accordion-item__description:before{ background-image: url(shawn.png)!important } .accordion-item:nth-child(3) .accordion-item__description:before{ content:none!important } .accordion-item__description{ display:flex!important }
  14. Options for email registration, social media login (Facebook, Google). When trying to register it only gives the option to register using email but not the option to register using social media accounts. This needs to be corrected per the requirements
  15. can you add shipping Option ? without shipping taxes are not show. Please add shipping.
  16. @glang I reviewed the given website it's perfectly works fine as you need.
  17. I'm getting this error while transferring the newly designed Squarespace website; the old one is also on Squarespace.
  18. Thanks for your insights @paul2009. I'm particularly interested in leveraging Developer Mode for its advanced customization capabilities. While I understand that JavaScript, HTML, and CSS can be added without Developer Mode, I'm looking to delve into more intricate and tailor-made solutions. Your note about Developer Mode being exclusive to Squarespace 7.0 is crucial. I appreciate the heads-up regarding the limitations and the unavailability of newer features in that version. If you have any further advice or recommendations on best practices when using Developer Mode, I'd love to hear more. Thanks again,
  19. I've been exploring the Developer mode and had some discussions about it. Before I delve into using it for both my personal projects and my client's websites, I have a few questions: If I initiate the website design in Developer mode, will the client have the flexibility to later change the user interface if needed? Can I publish templates created in Developer mode for wider use? If I've designed part of a website using the Squarespace user interface, am I allowed to transition to Developer mode for custom code? I'm eager to learn more about the intricacies of Squarespace's Developer mode and would appreciate insights or how-to guides from experienced developers familiar with it. Thank you.
  20. I've found an article that guides you on adding an overlay on image hover. Check it out here: https://support.squarespace.com/hc/en-us/articles/205826048-Creating-hover-effects-for-your-images OR Achieving an overlay hover effect can be done with CSS code. div#block-yui_3_17_2_1_1696487530512_47089 { opacity:0 !important; transition: opacity 1s; } div#block-yui_3_17_2_1_1696487530512_47089:hover { opacity:1 !important; transition: opacity 1s; }
  21. When upgrading a site from Squarespace 7.0 to 7.1 and you need to disconnect and then reconnect a GoDaddy domain, it's a common concern to wonder if the automatic reconnect will work smoothly or if there might be downtime or manual intervention required. In most cases, the automatic reconnect should work seamlessly if you follow the correct steps. Squarespace has made domain management quite user-friendly, and as you've connected GoDaddy domains before, you're already familiar with the process. Here are some general steps to ensure a smooth transition: 1. Disconnect the Domain from the Old Site (7.0): In the Domain settings of the old Squarespace site, disconnect the GoDaddy domain. This action should release it from the old site. 2. Connect the Domain to the New Site (7.1): In the new 7.1 site, navigate to the Domain settings and connect the GoDaddy domain. Squarespace should recognize the domain if it's still active and correctly configured on the GoDaddy side. 3. DNS Settings: Ensure that the DNS settings (like A records or CNAME records) for the domain are correctly configured to point to your new Squarespace 7.1 site. This might require some manual configuration on the GoDaddy side if it's not done automatically. 4. Propagation Time: Keep in mind that DNS changes can take some time to propagate across the internet. While many updates are nearly instantaneous, it's possible that some visitors may experience temporary issues accessing your site during this propagation period. To answer your specific question, the auto-connect feature should still work fine if everything is configured correctly. However, it's always a good practice to be prepared for some propagation time and have a plan in case any unexpected issues arise. If you've connected domains from GoDaddy to Squarespace before, you're in a good position to handle this transition smoothly. If you encounter any issues during the process, Squarespace's support team can provide specific guidance based on your domain and setup. Remember to double-check all settings, and you should be on your way to a successful transition from Squarespace 7.0 to 7.1 without significant downtime or disruptions.
  22. Working fine as I recently implemented video in background and working fine. Squarespace 7.1 Chrome Version: 116.0.5845.187 (Official Build) (x86_64) MackBook Air Intel
×
×
  • 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.