What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Advertise all of my social media icons in an autoresponder.

    Asked by Cnelson0409 on May 28, 2017 at 01:48 PM
  • Profile Image
    JotForm Support

    Answered by Nik_C on May 28, 2017 at 02:06 PM

    I'm sorry but we didn't receive your example, could you please attach the screenshot by following:

    1) Go to this link: https://www.jotform.com/answers/1156605

    2) Click this image:

    Thank you!

  • Profile Image

    Answered by   on May 28, 2017 at 03:11 PM

     

  • Profile Image

    Answered by Cnelson0409 on May 28, 2017 at 03:13 PM

    See attached 

  • Profile Image
    JotForm Support

    Answered by Nik_C on May 28, 2017 at 03:54 PM

    Thank you for additional information, you could create such page in HTML through our code editor in Autoresponder:

    You could use HTML and CSS styling to make such box in the Autoresponder.

    If you have any further questions please get back to us.

    Thank you!

  • Profile Image

    Answered by Cnelson0409 on May 28, 2017 at 05:43 PM
    Is there a tutorial video as I am not familiar with using source codes? I've tried copying and pasting from a 3rd party site into the source code and had no success. Thanks in advance.
    Sent from my iPhone 7
    ...
  • Profile Image
    JotForm Support

    Answered by BDAVID on May 28, 2017 at 05:52 PM

    What is the code you are trying to paste into your jotform's autoresponder?

  • Profile Image

    Answered by Cnelson0409 on May 28, 2017 at 06:43 PM
    @import '//codepen.io/chrisdothtml/pen/ojLzJK.css';
    .social-btns .btn,
    .social-btns .btn:before,
    .social-btns .btn .fa {
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43,
    1.59);
    transition-timing-function: cubic-bezier(0.31, -0.105, 0.43,
    1.59);
    }
    .social-btns .btn:before {
    top: 90%;
    left: -110%;
    }
    .social-btns .btn .fa {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    }
    .social-btns .btn.facebook:before {
    background-color: #3b5998;
    }
    .social-btns .btn.facebook .fa {
    color: #3b5998;
    }
    .social-btns .btn.twitter:before {
    background-color: #3cf;
    }
    .social-btns .btn.twitter .fa {
    color: #3cf;
    }
    .social-btns .btn.google:before {
    background-color: #dc4a38;
    }
    .social-btns .btn.google .fa {
    color: #dc4a38;
    }
    .social-btns .btn.dribbble:before {
    background-color: #f26798;
    }
    .social-btns .btn.dribbble .fa {
    color: #f26798;
    }
    .social-btns .btn.skype:before {
    background-color: #00aff0;
    }
    .social-btns .btn.skype .fa {
    color: #00aff0;
    }
    .social-btns .btn:focus:before,
    .social-btns .btn:hover:before {
    top: -10%;
    left: -10%;
    }
    .social-btns .btn:focus .fa,
    .social-btns .btn:hover .fa {
    color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
    }
    .social-btns {
    height: 90px;
    margin: auto;
    font-size: 0;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }
    .social-btns .btn {
    display: inline-block;
    background-color: #fff;
    width: 90px;
    height: 90px;
    line-height: 90px;
    margin: 0 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 28%;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
    opacity: 0.99;
    }
    .social-btns .btn:before {
    content: '';
    width: 120%;
    height: 120%;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    }
    .social-btns .btn .fa {
    font-size: 38px;
    vertical-align: middle;
    }
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on May 28, 2017 at 07:22 PM

    Unfortunately external linking with CSS source code is not possible for the form Email template at this time. So you cannot use your code to customize the form Notification and Autoresponder email template.

    Custom CSS code is possible only if you apply it inline within the html table when editing the Email template source code.

    You can read more details about the same discussion thread here : https://www.jotform.com/answers/532789-How-to-add-CSS-code-to-email-autoresponder

    ---

    Another method I think that can work is to get your social media embed code (assuming it was on a website page) and embed it on the Email template within its own iframe.

    I am thinking on how the Social Share widget work on the form.

     

    Let us know if you need further assistance.

     

  • Profile Image

    Answered by Cnelson0409 on May 29, 2017 at 12:44 PM
    Thank you but in all honesty, I am not familiar with writing code plus I do
    not see where there is a html button within the table to paste the code.
    Please advise if possible.
    ...
  • Profile Image
    JotForm Support

    Answered by BDAVID on May 29, 2017 at 01:25 PM

    Please follow this step by step workaround:

    1) Get the URL of the social media icon: example: https://cms.jotform.com/uploads/image_upload/image_upload/BDAVID/42235_SocialMedia_Facebook%20(1).png 

    2) Inset that URL in the "SRC" property of the following code:

    <img src="URL TO SOCIAL MEDIA ICON HERE" alt="Social Media Name" width="50px" height="35px">

    Example:

    <img src="https://cms.jotform.com/uploads/image_upload/image_upload/BDAVID/42235_SocialMedia_Facebook%20(1).png" alt="Facebook" width="50px" height="35px">

    3) Get the full link to your social media page, example: https://www.facebook.com/JotForm/ 

    4) Insert that link inside the "href" attribute of the following code:

    <a target="_blank" href="LINK HERE" ></a>

    Example:

    <a target="_blank" href="https://www.facebook.com/JotForm/" ></a>

    5) Now, insert the completed code from step 2, in between the <a...> and </a> of the completed code from step 4, example:

    <a target="_blank" href="https://www.facebook.com/JotForm/" ><img src="https://cms.jotform.com/uploads/image_upload/image_upload/BDAVID/42235_SocialMedia_Facebook%20(1).png" alt="Facebook" width="50px" height="35px"></a>

    6) Copy the completed code from step 5 into the source code of your autoresponder, example:

    Result: https://form.jotformpro.com/71427606580962 (Submit it if you want to, so you can get the autoresponder)

    Hope this helps. Let us know if you have more questions.

  • Profile Image

    Answered by Cnelson0409 on May 29, 2017 at 04:43 PM
    Thank you very much
    ...