Can I style the text that appears in my page as clickable link with the name of the form?

  • Profile Image
    katarina82
    Asked on April 15, 2013 at 01:27 PM

    The font of the link is not really suitable for the page, Can I modify it?

    Thanks,

    Kat.

  • Profile Image
    jefreylandicho
    Answered on April 15, 2013 at 01:42 PM

    Yes you can modify the font by Injecting a custom CSS in your form styles. To inject a CSS code in your form style, go to Setup & Embed and click the Preferences Icon.

    On the Preferences Windows, Click Form Styles tab and add the CSS Code in the Inject CSS Code textarea.

    If you need futher assistance, please contact us again.

  • Profile Image
    katarina82
    Answered on April 15, 2013 at 06:10 PM

    Can you pls tell me exactly what code to inject? I need to mainly change the size to bigger, but changing font would also be helpful.

    Thanks,

    Kat.

  • Profile Image
    EltonCris
    Answered on April 15, 2013 at 06:52 PM

    Hi Kat,

    I guess you were referring to the pop-up embed code? If so, just insert style attribute on the code and declare CSS properties. Example:

    <a style="font-size:12px;font-color:red;text-decoration:none;font-family:verdana;" target="_blank" href="javascript:void( window.open('http://form.jotformpro.com/form/31047132009946', 'blank','scrollbars=yes,toolbar=no,width=700,height=500'))">Test Form</a>

    You can change the bolded values if you like, you can also add more CSS properties.

    Let us kow if you have further questions. Thank you!

  • Profile Image
    katarina82
    Answered on April 18, 2013 at 06:30 PM
    Hi,
    thanks, I eventually worked out what you meant, and added the coloured part
    to my embed code (modified...), and got the fonts to be bigger as well as
    changed the font family, but when I was validating the code in Sandvox, I
    was told that the code is faulty.
    Also, when I viewed the form in browser (Safari), it had some spacebars
    missing and the text areas were much narrower.
    The code is:
    target="_blank" href="javascript:void( window.open('
    http://form.jotformeu.com/form/30915488310352',
    'blank','scrollbars=yes,toolbar=no,width=700,height=500'))">Custom Made
    Vision Board Form
    Thanks,
    Kat.
  • Profile Image
    EltonCris
    Answered on April 18, 2013 at 10:51 PM

    Hi Kat,

    That's probably because of the unrecognized properties not for that specific browsers.

    The following CSS should fixed the text-area width in Opera.

    textarea {
    max-width: 532px;
    }
    Let me know if you have further questions. Thank you!
  • Profile Image
    katarina82
    Answered on April 19, 2013 at 09:13 AM
    Hi,
    Thanks, the text width got fixed. However, I'm still getting the no-spaces
    problem (even after inserting another space in the HTML text editor on your
    site). This is what I'm getting:
    (healthy)meat , or onlyfishorvegetarian food )
    Thanks,
    Kat.
  • Profile Image
    KadeJM
    Answered on April 19, 2013 at 01:39 PM

    Hello Kat, to correct that problem you need to use the html code for spacing. Place it inside the html before the start of your span that underlines the word otherwise it'll create a space with an underline included and you don't want that.

    Space Code:

    &nbsp;

     

    Example:

    (healthy) &nbsp;<span style="text-decoration: underline;">meat</span>,

    Result:

  • Profile Image
    katarina82
    Answered on April 19, 2013 at 03:45 PM
    Hi,
    thanks, it worked.
    Kat