Social Form Fill Formatting

[Anonymous]

Hi.  Is there a way to adjust the default formatting of the social form fill icon/graphic?  I only want to use LinkedIn (not FB, Twitter) but the graphic defaults to the width of three and is mucking up the look of my landing pages. 

Thanks,

Kevin

[Anonymous]

I don't think this is possible.  The width of the social buttons is also constrained by the width of the form below it and a form as narrow as 1 button isn't very practical.  Also, the prompt is also as long as the three social buttons - would you want it to wrap down to just the width of the FB icon?

[Anonymous · Accepted solution]

Ideally you'd swap it for a wider button:


If this can't be done today it should be added as an upcoming enhancement.  Twitter and Facebook are important and some will insist they should be there, but Linkedin will continue to be the gold standard for B2B data quality 

[Anonymous]

Thanks Elliott and Steven.  The width of the social button isn't constrained by the form but vice versa, at least that's how it appears to me. I cannot shorten the width of the button and my form can be no narrower than the width of the button.  Ideally, I would like to edit the text above the button to "Use LinkedIn" (for example).
Thanks!
Kevin

[Anonymous]

Steven, if you can find that button that you show in your answer, that would be an improvement too!
Thanks!

[Anonymous]

I'm subscribing as I too only need the linkedin button, and the width of the label makes our landing pages unusable

[Anonymous]

How is this marked as solved?? Using social media fill, whether 1 or all 3, makes the form VERY wide - unnecessarily. Why is there no way to access the CSS or make at least the message wrap??

[Colby_Dix]

I'm with Terri. This is a pretty half assed feature that isn't well implemented. Any insight as to where to access the css on that sucker would be lvoely.

[Anonymous]

Hi Terri,

Here is how you manage the width of the form.

Add some custom Css to your form and change the width accordingly
.cf_sign_on {
    width: 240px !important;
}



And just to add to that here is the code to replace the entire social part with just a LinkedIN button.
I am sure this should allow you to edit the code and implement your own button/style.

/* Add your custom CSS below */

.cf_sign_on {
    width: 240px !important;
  height: 30px !important;
  background: none !important;
      border: none !important;
}
.cf_synd_icon_li_sm {
background: url('http://www.acme.com/connect-with-linkedin.png') !important;
}

.cf_sign_on_caption{
      text-indent: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.cf_icon {
  width: 218px !important;
  height: 34px !important;
}
.cf_sign_on_button {
  width: 230px !important;
  height: 50px !important;
  border: none !important;
  background: none !important;
      text-indent: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
 

[Anonymous]

Thanks, exactly what I was looking for!