Jump to content

LoftyDevs

Circle Member
  • Posts

    42
  • Joined

  • Last visited

Personal Information

Recent Profile Visitors

1,069 profile views
  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.
×
×
  • 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.