Jump to content

Valisco

Member
  • Posts

    13
  • Joined

  • Last visited

Reputation Activity

  1. Love
    Valisco reacted to seonto in how to customize contact form   
    Thank you very much! It works perfectly!
    If you want to change the place holder too, use this code. I just add red one only.


            .form-wrapper .react-form-contents .field-list .form-item
                { input, text area, select, textarea, ::placeholder
                    {
                          font-size: 14px ! important ;
                    }
                }
  2. Like
    Valisco got a reaction from seonto in how to customize contact form   
    Did something just recently update with Squarespace for the form? I used this code and changed some of it around yesterday (see below for what I used) and it worked perfectly! I looked at my website today and everything reverted back. Do you know of any reason why this would be? 
    The only thing that DOES seem to be working still is the padding/margins I did on the form button.
    https://www.valiscosupply.com/contact
    /* Contact form */ .form-wrapper .field-list .field .field-element { background: #F5F4F0 !important; border-top: none !important; border-left: none !important; border-right: none !important; color: #000000 !important; margin-top: 15px !important; border-radius: 10px !important; font-size: 14px !important; } /* form input size */ .form-wrapper .field-list .field .caption .field-element { font-size: 14px !important; } /* form button */ input.button.sqs-system-button.sqs-editable-button { padding-left: 3em !important; padding-right: 3em !important; padding-top: 1em !important; padding-bottom: 1em !important; margin-top: 10px; } ***** EDIT ******
    I figured out the issue from another post. It looks like Squarespace is updating the form to other "naming conventions" (not sure what they're officially called, newbie here) but I was able to fix it with these changes if it helps anyone else.
    /* Contact form */ .form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea { background: #F5F4F0 !important; border-top: none !important; border-left: none !important; border-right: none !important; color: #000000 !important; margin-top: 5px !important; border-radius: 10px !important; font-size: 14px !important; }} /* form input size */ .form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea { font-size: 14px !important; }} /* form button */ input.button.sqs-system-button.sqs-editable-button { padding-left: 3em !important; padding-right: 3em !important; padding-top: 1em !important; padding-bottom: 1em !important; margin-top: 10px; }  
  3. Like
    Valisco got a reaction from tuanphan in how to customize contact form   
    Did something just recently update with Squarespace for the form? I used this code and changed some of it around yesterday (see below for what I used) and it worked perfectly! I looked at my website today and everything reverted back. Do you know of any reason why this would be? 
    The only thing that DOES seem to be working still is the padding/margins I did on the form button.
    https://www.valiscosupply.com/contact
    /* Contact form */ .form-wrapper .field-list .field .field-element { background: #F5F4F0 !important; border-top: none !important; border-left: none !important; border-right: none !important; color: #000000 !important; margin-top: 15px !important; border-radius: 10px !important; font-size: 14px !important; } /* form input size */ .form-wrapper .field-list .field .caption .field-element { font-size: 14px !important; } /* form button */ input.button.sqs-system-button.sqs-editable-button { padding-left: 3em !important; padding-right: 3em !important; padding-top: 1em !important; padding-bottom: 1em !important; margin-top: 10px; } ***** EDIT ******
    I figured out the issue from another post. It looks like Squarespace is updating the form to other "naming conventions" (not sure what they're officially called, newbie here) but I was able to fix it with these changes if it helps anyone else.
    /* Contact form */ .form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea { background: #F5F4F0 !important; border-top: none !important; border-left: none !important; border-right: none !important; color: #000000 !important; margin-top: 5px !important; border-radius: 10px !important; font-size: 14px !important; }} /* form input size */ .form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea { font-size: 14px !important; }} /* form button */ input.button.sqs-system-button.sqs-editable-button { padding-left: 3em !important; padding-right: 3em !important; padding-top: 1em !important; padding-bottom: 1em !important; margin-top: 10px; }  
  4. Thanks
    Valisco got a reaction from squaredepot in how to customize contact form   
    Did something just recently update with Squarespace for the form? I used this code and changed some of it around yesterday (see below for what I used) and it worked perfectly! I looked at my website today and everything reverted back. Do you know of any reason why this would be? 
    The only thing that DOES seem to be working still is the padding/margins I did on the form button.
    https://www.valiscosupply.com/contact
    /* Contact form */ .form-wrapper .field-list .field .field-element { background: #F5F4F0 !important; border-top: none !important; border-left: none !important; border-right: none !important; color: #000000 !important; margin-top: 15px !important; border-radius: 10px !important; font-size: 14px !important; } /* form input size */ .form-wrapper .field-list .field .caption .field-element { font-size: 14px !important; } /* form button */ input.button.sqs-system-button.sqs-editable-button { padding-left: 3em !important; padding-right: 3em !important; padding-top: 1em !important; padding-bottom: 1em !important; margin-top: 10px; } ***** EDIT ******
    I figured out the issue from another post. It looks like Squarespace is updating the form to other "naming conventions" (not sure what they're officially called, newbie here) but I was able to fix it with these changes if it helps anyone else.
    /* Contact form */ .form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea { background: #F5F4F0 !important; border-top: none !important; border-left: none !important; border-right: none !important; color: #000000 !important; margin-top: 5px !important; border-radius: 10px !important; font-size: 14px !important; }} /* form input size */ .form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea { font-size: 14px !important; }} /* form button */ input.button.sqs-system-button.sqs-editable-button { padding-left: 3em !important; padding-right: 3em !important; padding-top: 1em !important; padding-bottom: 1em !important; margin-top: 10px; }  
  5. Like
    Valisco reacted to paul2009 in I'm at a loss...My form styling is suddenly broken   
    It is nothing that you have done! 
    To explain, a Form Block update is currently being rolled out to all Squarespace websites, on a site by site basis. This update improves forms for global visitors by making a number of welcome changes to dates, times, addresses and telephone numbers.
    In addition to the functional changes, there are also some design tweaks. For example, required fields now show as “(required)” - or the equivalent when other language settings are used - as opposed to showing “*”.
    The downside of these changes is that they break all custom scripts and custom CSS on all sites. If you've used any custom code, it will need to be rewritten. This is a huge undertaking for anyone who produces third party addons for Squarespace (please be patient with them!) but, if you're only using some custom CSS, it should be straightforward to update it for the new form markup and classes. Here are some examples of the changes:
    The form-inner-wrapper class has been removed and replaced by the new react-form-contents class The field-element class has been removed. The selector ".form-item input" may be useful when targeting form inputs. The classes three-digits and four-digits have been removed. The phone class can still be used. The classes day, month, year, two-digits and four-digits have been removed. You can still use the date class. The classes hour, minute, second, am and pm have been removed. You can still use the time class. The classes address1, address2, city, state-province, zip and country have been removed. Address fields are now dynamically generated, depending on the selected country and there is a new country-select class for the country dropdown. You can still use the address class. Did this help? Please give feedback by clicking an icon below  ⬇️
  6. Like
    Valisco reacted to tuanphan in Having the mobile menu slide in on the left side of my site.   
    You can also use this code
    .header-menu { left: unset !important; width: 75% !important; } With close menu, use this code
    https://github.com/tomsWebConsulting/twcscb/blob/main/v7.1/close forced mobile menu on desktop when clicking outside of menu.html
×
×
  • 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.