Jump to content

Custom Contact Form

Recommended Posts

Hello all,

this is my contact form - https://www.wolk.studio/contact  

image.thumb.png.72d621c6fd95275d8139c44251e4544d.png

As you can see the CSS does not effect the (required) font size and the captions for some strange reason. Here is the current CSS:

//CONTACT FORM
// For the Form
@font-face {font-family:TabletGothic; src:url(https://static1.squarespace.com/static/65a4f0d085c986465cc1e281/t/65a7d0831d1fbf08554873ab/1705496707549/Tablet+Gothic+Compressed+W02Th.ttf)
}

.form-wrapper .field-list .title {  
  font-family: TradeGothic;  
  font-size: 5px;
  color: #000000;  
  letter-spacing: .10em;   
  text-transform: none;
}

.form-wrapper .field-list .description {
    font-family: TradeGothic; 
    font-size: 5px; 
    color: #000;
    letter-spacing: .1em; 
    text-transform: none;
}

.form-wrapper .field-list .field .caption {
  font-size:5px;
  font-family:'TradeGothic';
  color:none;
}

 


I am want to make it look like this one

image.thumb.png.0d4f2626445cf54b927f69d3a6254681.png

 

Thank you in advance.

 

Edited by ggimishev
Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi @ggimishev 1st thing I notice is that your font-family names are not the same. 

In @font-face where you have loaded your font file, you called it TabletGothic.

In the following CSS, you called it TradeGothic.

Try aligning those and see if it helps.

I have a guide on Top 5 reasons why custom font is not working in SquareSpace. Not matching font-family is #1. If that doesn't work, try working through the rest of the guide to see if it helps.

Let me know how it goes.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment
4 hours ago, melody495 said:

Hi @ggimishev 1st thing I notice is that your font-family names are not the same. 

In @font-face where you have loaded your font file, you called it TabletGothic.

In the following CSS, you called it TradeGothic.

Try aligning those and see if it helps.

I have a guide on Top 5 reasons why custom font is not working in SquareSpace. Not matching font-family is #1. If that doesn't work, try working through the rest of the guide to see if it helps.

Let me know how it goes.

Hello @melody495,

not the font family name is the problem. The resizing of the font also does not work. It must be something with the CSS selector idk.

Link to comment
12 hours ago, ggimishev said:

 It must be something with the CSS selector idk.

You are right. You can check the CSS selector from the Inspect tool.

Here is what I see for your contact form. You have selectors for .form-wrapper and .field-list, then you need to target relevant ones to apply your CSS styling to. I have highlighted the ones that you seem to want to target.

image.thumb.png.2043937f87012ee32ee14280ef4f8cb6.png

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (contain affiliate links)


 

Link to comment

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.