Adding and then customizing an INFUSIONSOFT WEBFORM

Hi @tuanphan, hope you're well?

I want to include an Infusionsoft email sign up block on my site. I've managed to insert the HTML code...but how do I properly edit and stylize the sign up block so it matches the design of my SQSP site??

Hi @tuanphan or @Jia or @bangank36. Do any of you have knowledge on how to customize Infusionsoft web forms added via HTML code to a SQSP site??

Site URL: https://jeanine-thompson.squarespace.com/

Hi there. Can anyone please assist.

I have to add an INFUSIONSOFT WEBFORM to my SQSP site.

I've successfully applied the HTML code, so the input fields appear in the relevant SQSP site section...but how to I stylize the overall input block so it looks the same as my site?? The editing functions in Infusionsoft don't include my site fonts etc...

I am not familiar with Infusionsoft web forms so it will depend on how the form has been added. Please provide us with a link to the page and the public password used to access it.

Thanks @paul2009 🙂 I added the form by inserting the HTML code into a section code block. I used the unstyled code because when I use the styled one, the fonts/styling/design of the Infusionsoft webform clashes with my site and the block looks very amateurish.

Please see what I've managed to do so far at the bottom of my homepage just above the footer...

https://jeanine-thompson.squarespace.com/

password: tuansqsp

PS: as you will see, currently, the blocks are not aligned, the SUBMIT button is too big etc etc...

There are a number of ways to do this, depending on how you want it to be styled, but to summarise you'll want to add some CSS to Design > Custom CSS that targets the elements of the form. Unfortunately the code that has been added is very basic and doesn't include many classes that can be used to style the form, but as you are typing this code in manually, you could add them easily enough.

However, here's a basic starting point as a template that refers to the fields and submit button:

.infusion-field {
  margin-top:17px;
}
.infusion-field input {
  border: none !important;
  width: 100% !important;
  font-size: 14px;
  padding: 16px !important;
}
.infusion-submit button {
  padding: 12px;
  color: #fff !important;
  background: #f45ec6 !important;
  border-radius: 16px 0px;
  border: 0;
}
.infusion-submit button:hover {
  opacity: .8;
}

If you add this to Custom CSS (and save and refresh) it should change from this:

to something like this:

As I said, it's just an example that you can build on to style it how you want.

Did this help? Please give feedback by clicking an icon below  ⬇️

10 minutes ago, paul2009 said:

.infusion-field {
  margin-top:17px;
}
.infusion-field input {
  border: none !important;
  width: 100% !important;
  font-size: 14px;
  padding: 16px !important;
}
.infusion-submit button {
  padding: 12px;
  color: #fff !important;
  background: #f45ec6 !important;
  border-radius: 16px 0px;
  border: 0;
}
.infusion-submit button:hover {
  opacity: .8;
}

Thank you for all your help, @paul2009...I've tried this it doesn't work on my side? 😞 

10 minutes ago, Iwan said:

I've tried this it doesn't work on my side?

Did you refresh your browser after saving? I can see the changes when I look at the site from here.

Hey there, thanks, it does work 😀 My SQSP is super slow to update and refresh today...

Thank you again SO MUCH for your help....I'll keep my form simple and just use the code to edit and tweak...

Really appreciate.

Btw, sorry, how do I make the BUTTON the same size as my site's other buttons...plus BUTTON font, font size etc? 

Hi @paul2009, I've managed to format my button...but how do I center align it please 😇 so it's positioned in the centre of the entire block area

34 minutes ago, Iwan said:

how do I center align it please

When I looked there was a 4-column spacer to the left of the 8-column code block. If you adjust the, you should be able to centre it. For example, two 2-column spacers on either side, or you can remove the left spacer and then add CSS to adjust the code block.

Eeek. Ok. I'll try figure that out thank you

What CSS would I add to adjust the code block?

ps: I don't see how you see the spacers as this mailer is created from the HTML code??

Do you still need help?

Please @tuanphan, how do I change the font size of the input field labels of my current webform? i.e Name* and E-mail*

@tuanphan can you help?

On 4/19/2022 at 7:01 PM, Iwan said:

Please @tuanphan, how do I change the font size of the input field labels of my current webform? i.e Name* and E-mail*

Add to Design > Custom CSS

form[action*="infusionsoft"] input {
    font-size: 20px !important;
}