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

    How to make form to fit into the rest of my SquareSpace website?

    Asked by ancientalkemist on February 13, 2015 at 12:08 AM

    Hi,

    I am back to editing my form and I need to make it fit into the rest of my webpage. The fonts I need to use are only available on Typekit. Have you made any improvements on integrating this with Jotform?

    I tried what you had suggested above, but couldn't make it work. 

     

    Thanks!

    squarespace form layout Form CSS
  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 13, 2015 at 12:22 AM

    Hello ancientalkemist,

    Please share your SquareSpace web page URL where you have embedded your form and we will take a look.

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by ancientalkemist on February 13, 2015 at 01:22 AM

    Here is the webpage URL. Right now, the jotform is the Step 2 only. I am editing it to include the entire step one as well so all the info I gather goes to one place instead of two.

    http://www.alkemica.la/membership/

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 13, 2015 at 03:49 AM

    Hi,

    I can see that you are embedding the form using its source code. Embedding the form using source code carries your website fonts and field styles which I think did exactly on that page.

    With regards to expanding the form to fit on your page, do you mean like this image?

    If yes, try it with this CSS codes. Just place it between the head tag on your page.

    <style type="text/css">

    .form-all {width: 100%;}

    .form-textbox, .form-textarea, input[type="file"] {

    width: 100% !important;

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-shadow:none;

    }

    #cid_13 span.form-sub-label-container {width: 48.9%;}

    #cid_13 span.form-sub-label-container:first-child {width: 50%;margin-right: 5px;}

    input[type="file"] {width: 100% !important;}

    .form-line {padding-left: 0 !important;padding-right: 0 !important;}

    </style>

    Let us know should you have further questions. Thank you!

  • Profile Image

    Answered by ancientalkemist on February 13, 2015 at 02:03 PM

    No that  isn't what I meant by fit..I meant fit stylistically. If you read the the old thread that I started awhile ago..embedding the form using the source code doesn't work on squarespace.

    http://www.jotform.com/answers/295113-Issues-with-source-code-and-squarespace-

    Right now, the jotform is the Step 2 only. I am editing it to include the entire Step 1 as well so all the info I gather goes to one place instead of two.

    Step 1  currently uses squarespace forms. The fonts on the jot form in Step 2 are Tahoma and Helvetica while the fonts on the rest of the page are Museo Sans and Proxima Nova.

    I would like to be able to use those fonts on my jotform, but they are only available via typekit.

     

  • Profile Image
    JotForm Support

    Answered by KadeJM on February 13, 2015 at 03:51 PM

    As far as I know I believe that it is possible to import the typekit font which you are requesting. However, be advised that this may need your form source code possibly if it is not a commonly used font family on the internet to import it.

    Please see http://www.jotform.com/help/100-How-to-Use-Google-Webfonts-in-JotForm for suggestions of how you could do this in a similar format from google.

    Additionally though, I would also like to point out that we have several Google Fonts which are chooseable from within our Form Designer and you don't need the source for that either. 

  • Profile Image

    Answered by ancientalkemist on February 13, 2015 at 04:09 PM

    If you read the old thread and this new thread, you would know that I already tried that. Embedding the source code on squarespace works on the backend, but nothing shows up on the front end. 

    I just tried the form designer and the changes it makes aren't accurately viewed. I have to go back to the form builder to check it. I may have found a good replacement font. How do I use a different font and color for my Step 1 and Step 2 headings? I already read the Google Webfont thread, tried to translate it to Typekit, and couldn't get it to work!

     

    That is why I am asking for help!

    I would like to increase the width of my email input fields and decrease the width of the area code input field under phone and make the overall styling like this:

     

     

     

     

  • Profile Image

    Answered by raul on February 13, 2015 at 05:56 PM

    Please take a look at this form: http://form.jotformpro.com/form/50437214457958

    Is this how you want to make your form look like? If so, feel free to clone the form to your account to see the CSS code and options that I used to build it.

    If it's not, please provide more details on the corrections you would like to make and we'll be happy to assist.

    Thank you.

  • Profile Image

    Answered by ancientalkemist on February 13, 2015 at 07:00 PM

    It's close, but I want the font color and style to look more like the screenshot that I sent you, not so harsh and bold. Also the required asterisk should match the rest of the font color. The upload fields should match the rest of the fields. The submit button should match color with the font and have square corners.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 13, 2015 at 09:32 PM

    @ancientalkemist 

    Here, I have refined my colleague's (Raul) form version and added the fonts you want. Feel free to clone it so you can make further changes. http://www.jotformpro.com/50438177214958

    Hope this helps. Thank you!

  • Profile Image

    Answered by ancientalkemist on February 13, 2015 at 09:33 PM

    Thanks..it looks great!