9 Replies Latest reply on Jun 4, 2015 12:58 AM by Kenneth van Geel

    Social Form Fill Formatting

    Kevin Payne
      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
        • Re: Social Form Fill Formatting
          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?
          • Re: Social Form Fill Formatting
            Ideally you'd swap it for a wider button:
            0EM50000000Qehm

            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 
            • Re: Social Form Fill Formatting
              Kevin Payne
              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

              • Re: Social Form Fill Formatting
                Kevin Payne
                Steven, if you can find that button that you show in your answer, that would be an improvement too!
                Thanks!
                • Re: Social Form Fill Formatting
                  I'm subscribing as I too only need the linkedin button, and the width of the label makes our landing pages unusable
                  • Re: Social Form Fill Formatting
                    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??

                    0EM50000000SRJf
                    • Re: Social Form Fill Formatting
                      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.
                      • Re: Social Form Fill Formatting
                        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;
                        }

                        0EM50000000Sf8X

                        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;
                        }
                         
                        2 of 2 people found this helpful