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

    I would like to add a colour swatch and a swatch displaying different font styles on my jotform order page. How do I do this?

    Asked by housesignsaustralia on November 21, 2011 at 05:49 AM
  • Profile Image
    JotForm Support

    Answered by Mike_T on November 21, 2011 at 06:44 PM

    Thank you for contacting us.

    Unfortunately, your request is not completely clear for me. Could you please explain your goal more detailed? Please also describe how the form should look like.

    We are looking forward to hearing from you.

  • Profile Image

    Answered by housesignsaustralia on November 22, 2011 at 05:58 PM

    Hi there

     

    I emailed this reply yesterday but had not heard back so thought I would resend my response:

     

    I am needing to create a colour swatch to be placed on my jotform order form.

    Something similar to http://www.housenameshousesignshousenumbers.com.au/order-hs-framedglass.htm

    Please scroll down to near the bottom of this page link to see an example.

     

    I am also needing to create a font style swatch for this form.

    A couple of examples can be seen on http://www.arteco.com.au/House_Signs_TimberandGlass_orderform.htm

    (and http://www.housenameshousesignshousenumbers.com.au/order-hs-framedglass.htm)

    My initial thoughts are that the layout seen in the arteco link will best suit my form .

     

    Here is a link to a draft order form I have created that will be used on my website. http://www.ablewebs.com/clients/signs950/house-signs-australia-traditional-style.html

     

    Let me know if you require any more detail or info.

     

    I look forward to your reply

     

    Cathy

  • Profile Image
    JotForm Support

    Answered by idarktech on November 22, 2011 at 07:32 PM

    Hi Cathy,

    Base on the sample websites you gave, they are using color swatches and font styles as images. To do that on your form, you have to embed the images on your Radiobox Options, you can use the sample code below as your guide.

    <img src="http://www.housenameshousesignshousenumbers.com.au/images/Colour_white.png"> White

    Just change the blue link to your image direct link, you can upload your images here if you want. www.tinypic.com

    Check this sample screenshot.

     

    To figure out how I'd set it up, please feel free to clone this form. http://www.jotform.com/form/13251342594

    If everything is unclear, please feel free to let us know. Thank you so much!

  • Profile Image
    JotForm Support

    Answered by abajan on November 22, 2011 at 09:52 PM

    Cathy

    With due respect to my colleague, assuming that www.housenameshousesignshousenumbers.com.au did not give you permission to hotlink their images, it would be advisable for you to save them to your computer (better yet, use your own images) and then upload them to an image hosting service like ImageShack and use the links they provide. However, if you foresee that there will come a time when you will require secure form submissions, create a JotForm form with an upload button and then go to that form's address and upload the images. The image URLs will be stored in the submission records of that form. When the time comes to share the secure version of the form, all you would need to do is append an "s" to the "http" part of the images' URLs (please see this thread for details).

    The above paragraph only applies to the frame and font images. The procedure is not necessary for the color swatches because we have the power of CSS at our disposal to generate those colors, allowing the form to load a bit faster. (As a matter of fact, I'm sure the font samples can also be generated with CSS but we shan't go there now!) Copy this code and substitute it for what is currently in the "Options" box of the color swatch radio button field and edit the background color of each swatch to suit your tastes. (You can use this reference for the codes.)

    Instead of having the color swatch radio buttons in a single column, you might want to spread them over three columns. Below is a screenshot of a clone I made of your form, with the color swatches in place:

    (Click the image to visit the live form)


    Hopefully you found this to be helpful. Like Idarktech stated, if you need clarification on anything, be sure to let us know.

  • Profile Image
    JotForm Support

    Answered by abajan on November 22, 2011 at 10:00 PM

    LOL After re-reading Idarktech's post, I just realized that he never suggested that you hotlink the images.

    My apologies, Idarktech.

  • Profile Image

    Answered by housesignsaustralia on November 23, 2011 at 09:07 AM
    Hi there
    Thanks for your reply.
    I am needing to create a colour swatch to be placed on my jotform order
    form.
    Something similar to
    http://www.housenameshousesignshousenumbers.com.au/order-hs-framedglass.htm
    Please scroll down to near the bottom of this page link to see an example.
    I am also needing to create a font style swatch for this form.
    A couple of examples can be seen on
    http://www.arteco.com.au/House_Signs_TimberandGlass_orderform.htm
    (and
    http://www.housenameshousesignshousenumbers.com.au/order-hs-framedglass.htm
    )
    My initial thoughts are that the layout seen in the arteco link will best
    suit my form .
    Here is a link to a draft order form I have created that will be used on my
    website.
    http://www.ablewebs.com/clients/signs950/house-signs-australia-traditional-style.html
    Let me know if you require any more detail or info.
    I look forward to your reply
    Cathy
  • Profile Image

    Answered by housesignsaustralia on November 30, 2011 at 08:57 PM
    Hi there
    Please find below a link to my jotform order form.
    Is there a way the font style image can be inserted next to the
    corresponding radio button & text (rather than underneath as it currently
    is displayed)?
    I need to include the required field option so therefore the creation
    of individual radio buttons & different font image boxes would not work
  • Profile Image
    JotForm Support

    Answered by abajan on November 30, 2011 at 11:13 PM

    Try this, Cathy:

    1. Click the image and then cut or copy its URL to your clipboard from the "Image Source" button:


    2. With the image still selected, click the red X to delete it from the form


    3. Increase the form's width from 650 to 800 pixels:


    4. Include the image's URL as part of the first radio button's value:

    Just type it straight on one line leaving the double-quotes empty and then paste the URL you copied to your clipboard in Step 1 between those quotes. The editor will automatically wrap the image tag to the other lines as needed. If you hit [Enter] to create a new line, another radio button item will be added and you certainly don't want that happen.


    5. Inject the following CSS:

    #cid_15 .form-radio-item {
    line-height:90px;
    }

    #cid_15 img {
    position:absolute;
    top:0;
    left:205px;
    }

    6. Save the form


    The relevant section of your form should now be aligned that in like this image of a clone of the form:

    (Click image to go to the live form)

    If you need clarification on any of the steps above, please let us know.

  • Profile Image

    Answered by housesignsaustralia on December 01, 2011 at 02:29 AM
    Thanks for your prompt reply
    Please find below the link to the form after following your instructions.
    As you will see the page almost seems to be indented to the right and
    therefore some of the font style is cut off on the right.
    Do you know how this could be fixed?
    http://www.ablewebs.com/clients/signs950/house-signs-australia-traditional-style.html
    Many thanks
    Cathy
  • Profile Image

    Answered by housesignsaustralia on December 01, 2011 at 03:44 AM

    Hi there

    Font styles seem to be fine now.

    I am trying to add the border image next to the border radio button but have not been successful.

    Do I follow exactly the same steps as for the font styles?

    Thanks

    Cathy

  • Profile Image
    JotForm Support

    Answered by abajan on December 01, 2011 at 07:37 AM

    Actually, I discovered this morning that the injected CSS I provided needs to be significantly edited to accommodate additional images. I'll provide the solution later today.

  • Profile Image

    Answered by housesignsaustralia on December 01, 2011 at 07:41 AM

    Hi Abajan

    I have been able to add extra images for the borders.

    Please see link below:

    http://www.ablewebs.com/clients/signs950/house-signs-australia-traditional-style.html

    Is it possible to shift the radio button up a little so that it is in the middle(as seen in the font style) rather than at the bottom of the border image?

    Thanks very much

    Cathy

  • Profile Image
    JotForm Support

    Answered by abajan on December 01, 2011 at 02:24 PM

    I forgot that there's a handy little CSS property called "vertical-align" which makes the task much simpler than expected. First increase the width of the form to 825 pixels and then replace all of the current injected CSS with just the following:

    #cid_15 img {
    vertical-align:middle;
    }

    #cid_18 img {
    vertical-align:middle;
    }

    Incidentally, while checking the properties of the radio buttons for the "Border" field, I noticed a few things that need to be corrected:

    1. UPPERcase "IMG" was used for each tag instead of "img" (All element names in XHTML must be lowercase)

    2. All image tags in XHTML must have an "alt" attribute

    3. All tags must be properly closed. In the case of "img" and other self-closing tags, that means ending with a space and (forward) slash:

    Please see this page for more information.

    A clone of your form with the images properly aligned is located at https://www.jotform.com/form/13345901560. Feel free to clone it.

  • Profile Image

    Answered by housesignsaustralia on December 01, 2011 at 06:10 PM
    Hi Abajan
    Thanks for you reply and replacement CSS.
    Please find below a link showing a different layout for colour swatch.
    http://www.ablewebs.com/clients/signs950/house-signs-australia-traditional-style.html
    What would I need to do to achieve this on my form?
    Thanks very much for your help.
    Cathy
  • Profile Image
    JotForm Support

    Answered by abajan on December 01, 2011 at 06:47 PM

    Since all images associated with radio button inputs are to be vertically aligned to the middle, you can replace the current injected CSS with just the following single rule that will take care of everything for you:

    .form-input img {
    vertical-align:middle;
    }

    Just add the other color swatches in the same manner you have done with the first. However, remember to use "img" instead of "IMG" (you have used "IMG" for the first swatch). Also, the form's layout would look much better if the radio buttons for the "BORDER" field were spread across three columns instead of the current single column.

  • Profile Image

    Answered by housesignsaustralia on December 01, 2011 at 07:14 PM

    Thanks very much Abajan

    CSS has been  changed.

    I have changed IMG to small letter img

    Could you tell where I need to place the colour hex code  so that the colour in the box matches the written name (eg:Ivory has the hex code of #EBDBB8 )

    Thanks for this

    Cathy

  • Profile Image
    JotForm Support

    Answered by idarktech on December 01, 2011 at 08:03 PM

    Hi Cathy,

    To change the text color, you can wrap it with css codes. Please check below:

    <font style="color:#EBDBB8"> Ivory </font>

    Let us know if you need further clarifications. Thanks.

  • Profile Image

    Answered by housesignsaustralia on December 01, 2011 at 08:47 PM
    Hi there
    Thanks very much for your reply.
    I am wanting to change the colour in the colour swatch box to its
    corresponding colour. (not the colour of the text as per your instructions
    below)
    Could you tell me if and/or how I am able to do this?
    Cathy
  • Profile Image
    JotForm Support

    Answered by idarktech on December 01, 2011 at 08:56 PM

    I see, can you post here your form URL? If you are referring to this form here: http://www.ablewebs.com/clients/signs950/house-signs-australia-traditional-style.html then, sorry but it can't be edited using CSS, you have to download that image and edit it manually using Photoshop or any other Photo Editing Softwares, apply that color and reupload.

    Is that what you really mean? You can also check my colleagues post above, as he have already stated on how to use CSS to create swatch box background color.

  • Profile Image

    Answered by housesignsaustralia on December 02, 2011 at 12:00 AM
    Hi there
    Thanks very much for your reply.
    I was referring to that form and thanks for the reference to the previous
    email.
    Much appreciated
    Cathy
  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2011 at 04:31 AM

    Hi again Cathy

    Please do the following and afterwards let us know if the form looks okay:

    1. On the "Form Style" tab, change the Form Width to 825

    2. On the same tab, change the Label Width to 135

    3. Replace all of your current injected CSS with the following:

    .form-line {
    padding-bottom:20px;
    }

    textarea {
    width:510px;
    }

    .form-input img,
    .swatch {
    vertical-align:middle;
    }

    .swatch {
    width:60px;
    height:30px;
    display:inline-block;
    border:1px solid #000;
    }

    .form-radio-item {
    padding-right:15px;
    }

    .ivory-swatch {
    background:ivory;
    }

    .aqua-swatch {
    background:#0FF;
    }

    .green-swatch {
    background:green;
    }

    .red-swatch {
    background:red;
    }

    .darkblue-swatch {
    background:#00008B;
    }

    .purple-swatch {
    background:purple;
    }

    .grey-swatch {
    background:grey;
    }

    .brown-swatch {
    background:brown;
    }

    .black-swatch {
    background:#000;
    }

    4. Copy this code to your computer's clipboard

    5. Click the "COLOR" field and then the "Options" toolbar button and delete all of the code there

    6. Paste the code that was copied to your clipboard in Step 4 into the same area and click "OK"

    7. (Optional) Reduce the number of rows in the text area to 3

    8. Save the form

  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2011 at 04:42 AM

    Your form should now look like this. Incidentally, I don't know what program was used to create the font image but changing its background color from white to #FCFBE3 it would make it look transparent since the background of the form's parent element on the page is that color.

  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2011 at 04:59 AM

    If added to the injected CSS, the following rule will remove the background and bottom border from the "YOUR DETAILS" and "SIGN NAME" headings, just like they're displayed in the clone:

    #cid_1 .form-header-group,
    #cid_8 .form-header-group {
    background:none repeat scroll 0 0;
    border-width:0;
    }

  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2011 at 05:16 AM

    I forgot to mention that the buttons in the cloned form's submission field were centered by first clicking the field then clicking the "Button Align" button and selecting "Center":

    (Click image to view at actual size)

  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2011 at 07:51 AM

    Cathy, I don't know how many of your users browse the Net with Internet Explorer 6 or 7 but I recently tested my solution at BrowserStack.com and discovered two issues with those browsers:

    1. The swatches are not displayed inline
    2. The grey swatch renders as white

    I found out from QuirksMode.org that a display value of "inline-block" only works properly in the said browsers if applied to elements that are naturally displayed in an inline fashion. However, changing all instances of "div" to "span" opened "a whole new can of worms", so to speak:

    The grey swatch was being displayed as white because the said browsers don't recognise "grey" as a color. So, changing it to "gray" in the injected CSS solved that problem but as you can see, changing the divs to spans caused the misalignment problem. Placing a non-breaking space between "Dark" and "Blue" didn't help.

    I'll see if I can come up with a solution later today but in the interim one of my colleagues may have the answer.

  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2011 at 09:56 PM

    Okay, here's how to resolve the display issues in IE 6 and 7 plus a few other adjustments.

    1. Increase the Form Width to 830

    2. Change the column spread of the "CHOOSE FROM" field from "1" to "2"

    3. Replace the current code in the Options for the "COLOR" field with this

    4. Replace the curent injected CSS with the following:

    /* Removes the background and bottom border
    from "YOUR DETAILS" and "SIGN NAME" headings */
    #cid_1 .form-header-group,
    #cid_8 .form-header-group {
    background:none repeat scroll 0 0;
    border-width:0;
    }

    /* Increases space between fields */
    .form-line {
    padding-bottom:20px;
    }

    /* Setting text area widths here instead of via the "Columns" button gives more consistent results across browsers*/
    textarea {
    width:512px;
    }

    /* Vertically aligns the images and color swatches with their radio buttons */
    .form-input img,
    .swatch {
    vertical-align:middle;
    }

    /* Defines the dimensions of the color swatches
    and gives each a 1 pixel wide black border. Also,
    the swatches can't be diplayed inline without the 3rd declaration */
    .swatch {
    width:60px;
    height:30px;
    display:inline-block;
    border:1px solid #000;
    }

    /* Increases space between label of a radio button
    the following radio button */
    .form-radio-item {
    padding-right:15px;
    }

    /* Increases the label widths in the "COLOR" field to accommodate
    "Dark Blue". Especially important for IE 6 and 7 */
    #cid_21 .form-radio-item {
    width:160px;
    }

    /* The following rules set the
    background color of each swatch */

    .ivory-swatch {
    background:ivory;
    }

    /* #0FF is the shortened form of #00FFFF */
    .aqua-swatch {
    background:#0FF;
    }

    .green-swatch {
    background:green;
    }

    /* "red" is the same as #F00 which is the
    shortened form of #FF0000 */
    .red-swatch {
    background:red;
    }

    .darkblue-swatch {
    background:#00008B;
    }

    .purple-swatch {
    background:purple;
    }

    .grey-swatch {
    background:gray;
    }

    .brown-swatch {
    background:brown;
    }

    /* #000 is the shortened form of #000000 */
    .black-swatch {
    background:#000;
    }

    (The comments will help you to understand what the various rules do)

    5. Insert the "FRAME" images and remove the reminder note from the Free Text (HTML) field

    6. Save the form


    If you require further assistance, please let us know.

  • Profile Image

    Answered by housesignsaustralia on December 03, 2011 at 11:08 PM
    Hi Abajan
    Thanks for all your emails. All your hard work is very much appreciated.
    You ( & the team) have been so helpful & I can't thank you enough.
    I am working my way through inserting the fonts, borders & colour swatches.
    Please find below link to an order page where in the top colour swatch
    field the 2nd & 3rd coloums seem to be closer together & therefore the
    words Dark Blue are seen on 2 lines instead of 1.
    http://www.ablewebs.com/clients/signs950/house-signs-australia-order-classic-style.html
    I have tried deleting & reinserting the css code you supplied into the
    colour field but this does not appear to fix the problem. It looks fine in
    the Jotform Form but not on the website.
    Do you know how I can fix this problem?
    Cathy
  • Profile Image

    Answered by housesignsaustralia on December 04, 2011 at 12:23 AM
    Hi again Abajan
    I have been trying to insert the corresponding font swatches & border
    images to the 4 remaining pages using your previous instructions as of Nov
    30 email but have unable to do so.
    I am not seeing the images next to the radio buttons eg:
    http://www.ablewebs.com/clients/signs950/house-signs-australia-order-classic-style.html
    -
    no font swatch
    http://www.ablewebs.com/clients/signs950/house-signs-australia-heritage-style.html
    -
    no font or border images
    Can you see what I am doing wrong?
    The fonts, borders and colour swatches all have different CSS. Does each
    different CSS code get injected so that they can all be seen or do I need
    to delete & replace the css code?
    The traditional order page has all three but I can't place all three on the
    remaining pages.
    Should I be inserting all the font swatches by including the images URL in
    the options tab & injecting the relevant CSS into the 4 remaining order
    pages. Then doing the same for the border images.
    I am confused!!!
    Thanks
    Cathy
  • Profile Image
    JotForm Support

    Answered by abajan on December 04, 2011 at 04:19 AM

    Hi Cathy

    Since the forms are very similar to each other, the easiest way to have done this would have been to clone the form (see How to Clone an Existing Form in our user guide) and then make the required changes to each one. I'm not sure if you did that but please don't make any more changes to any of the forms until I get a chance to provide the solutions for each of them later today. I put that in bold because there have been instances where a user asks us to help with a form and then, while we're working on a solution, they go and replace fields and make other changes, making the solution we provide pretty much useless.

  • Profile Image

    Answered by housesignsaustralia on December 04, 2011 at 05:47 AM
    Thanks for that Abajan.
    I don't think I cloned the forms - but I do see what you are saying.
    I will await your email.
    Many thanks
    Cathy
  • Profile Image
    JotForm Support

    Answered by abajan on December 04, 2011 at 12:09 PM

    Solution for CLASSIC STYLE form:

    1. The image tag in the "Options" for the "LETTERING STYLE" needs to be corrected. There needs to be a space between "img" and 'src="https://www.jotform.com/uploads/housesignsaustralia/form_files/etc...'.
    "img" is short for "image" and "src" is short for "source". So, "img" tells the browser to display an image and 'src="https://www.jotform.com/uploads/housessignsaustralia/form_files/etc..."' where to find the image. There's no such tag as "imgsrc". Also, remember to include the space before the closing slash:


    2. Replace all of your current injected CSS with the following: 

    #cid_1 .form-header-group,
    #cid_8 .form-header-group {
    background:none repeat scroll 0 0;
    border-width:0;
    }

    .form-line {
    padding-bottom:20px;
    }

    textarea {
    width:512px;
    }

    .form-input img,
    .swatch {
    vertical-align:middle;
    }

    .swatch {
    width:60px;
    height:30px;
    display:inline-block;
    border:1px solid #000;
    }

    .form-radio-item {
    padding-right:15px;
    }

    /* #cid_18 is the ID of the "CENTRE COLOR" field */
    #cid_18 .form-radio-item,
    #cid_21 .form-radio-item {
    width:160px;
    }

    .ivory-swatch {
    background:#EBDBB8;
    }

    .aqua-swatch {
    background:#59D3BC;
    }

    .green-swatch {
    background:#004438;
    }

    .red-swatch {
    background:#790019;
    }

    .darkblue-swatch {
    background:#011C38;
    }

    .purple-swatch {
    background:#4B08A1;
    }

    .grey-swatch {
    background:#58636C;
    }

    .brown-swatch {
    background:#49241A;
    }

    .black-swatch {
    background:#000;
    }

    It's only an illussion that the space between the 2nd and 3rd columns of the "CENTRE COLOR" field is closer than that between the 1st and 2nd columns. The real problem is that the field isn't wide enough. As noted in the comment attached to the 7th rule, #cid_18 is the ID of that field. .form-radio-item is the class name for the container (for want of a better term) that spans each radio button input and its label in the form. However, since we want to change the width of such containers only if they are within the "CENTRE COLOR" and "EDGE COLOR" fields, the rule needs to be more specific than

    .form-radio-item {
    width:160px;
    }

    because that would apply to all such classed containers in the form. So, we zero in on just the color swatch fields whose IDs are #cid_18 and #cid_21 respectively with

    #cid_18 .form-radio-item,
    #cid_21 .form-radio-item {
    width:160px;
    }

    This is interpreted by browsers as "Apply a width of 160 pixels to the containers classed .form-radio-item only if they are within the field having an ID of #cid_18 or #cid_21". The horizontal space between radio buttons in the said fields is actually 175 pixels (except in IE). That's because of the right-padding (padding-right) of 15px applied to all .form-radio-item classed containers via the preceding rule.

    I'm just trying to give you some insight as to how CSS works but this is really just skimming the surface of a rather deep subject - at least, to me it is. However, a good place to start learning about CSS is MaxDesign.com.au (Yep, it's an Australian domain!)


    3. (Optional) Consider centering the submission field's buttons:


    After implementing the suggested changes, your CLASSIC STYLE form should look like this. Go ahead and make the changes to just that form and let us know if you encounter any problems.

    The fixes for your other forms will be posted later today (That's Barbados time - I'm pretty much on the opposite side of the globe to you. So, my today might be your yesterday! LOL).

  • Profile Image

    Answered by housesignsaustralia on December 04, 2011 at 05:44 PM
    Hi Abajan
    Thanks very much for your email and solutions.
    I have made the changes and the form now looks right.
    The centred submission fields look better - thanks for that suggestion,
    much appreciated.
    I will wait to hear from you again regarding the other forms.
    Just to let you know:
    I am needing to insert images of the frames next to the corresponding radio
    buttons in the Frame Choose From field on each of the 5 order pages. I have
    attached a file to show you what they will look like.
    No need to worry about this now, but just wanted to let you know.
    Thanks for this
    Cathy
    (Hope you are having a good day over in Barbados - you lucky thing - sigh!)
  • Profile Image
    JotForm Support

    Answered by abajan on December 04, 2011 at 08:38 PM

    Cathy, I just checked your CLASSIC STYLE form and although it looks better, I noticed that its right side is cropped. I think that's because its embed code has been pasted into the wrong position in the page's source. If you compare the source of that page with the source of the page that contains the TRADITIONAL STYLE form (which is being displayed correctly) you will see that while in the TRADITIONAL STYLE page the form's code has been inserted on line 133 immediately after the closing "div" tag, the code for the CLASSIC STYLE form has been embedded in a totally different position: Line 119 immediately after the closing "h3" tag.

    Also, have you noticed that the red swatch is being displayed incorrectly? The omission of the number sign ("#") from the hex color code for that swatch in the injected CSS caused that to happen. In other words, you have

    .red-swatch {
    background:790019;
    }

    instead of

    .red-swatch {
    background:#790019;
    }

    Make those changes and the CLASSIC STYLE form should be displayed correctly on the page within which it is embedded.

  • Profile Image
    JotForm Support

    Answered by abajan on December 04, 2011 at 08:55 PM

    Incidentally, was it your intention to display different colors for the brown swatch? On the TRADITIONAL SIGN form it's "#49241A" while on the CLASSIC SIGN form it's "brown" (which is the same as "#A52A2A").

  • Profile Image
    JotForm Support

    Answered by abajan on December 04, 2011 at 09:43 PM

    Actually, that's my fault. I forgot that you had changed the colors and gave the old color codes in the original injected CSS. If you replace the current injected CSS in the CLASSIC STYLE form with the corrected code above, the colors should look right.

    My apologies.

  • Profile Image
    JotForm Support

    Answered by abajan on December 04, 2011 at 10:03 PM

    Solution for the HERITAGE STYLE form:

    1. Replace its current injected CSS with the same code provided above for the CLASSIC STYLE form (just change the CSS comment from '#cid_18 is the ID of the "CENTRE COLOR" field' to '#cid_18 is the ID of the "BLACK CENTRE WITH EDGE COLOR OF" field' so that it doesn't cause confusion when you view it months or years from now).

    2. Center the submission field's buttons as outlined above

    There's no need to interfere with the source of the page within which the form is embedded because it is already correctly positioned and will be automatically updated with the changes you make in the form builder.

  • Profile Image
    JotForm Support

    Answered by abajan on December 04, 2011 at 10:17 PM

    The COLONIAL STYLE form looks fine, except that there's no font image but I think that you simply haven't included as yet. The same goes for the missing font image in the HERITAGE STYLE form.

  • Profile Image

    Answered by housesignsaustralia on December 04, 2011 at 10:57 PM
    Hi Abajan
    Thanks for the emails.
    I have been replacing the css in the heritage order form with the css in
    your email for the classic order page, but it doesn't appear to be fixing
    the problem.
    Would you be able to have a look & see why?
    Thanks for this
    Cathy
  • Profile Image

    Answered by housesignsaustralia on December 04, 2011 at 11:34 PM
    Hi Abajan
    I am inserting a border image into the colonial page and the image is not
    displaying (just a square box)
    http://www.jotform.com/?formID=13142942172
    Is this happening because there is something wrong with the image file I am
    uploading from my computer or is there another reason?
    Could you also confirm what css needs to be injected to make the radio
    buttons line up in the middle of the frame images that can be seen on the
    same link.
    Thanks for this.
    Cathy
  • Profile Image
    JotForm Support

    Answered by abajan on December 04, 2011 at 11:49 PM

    Re: The HERITAGE SIGN form problem not being corrected with the CLASSIC STYLE form's injected CSS

    A selector is missing from the 9th rule:

    #cid_21 .form-radio-item {
    width:160px;
    }

    should be

    #cid_18 .form-radio-item,
    #cid_21 .form-radio-item {
    width:160px;
    }

    I'm curious as to how this could have happened though. Are you viewing my posts in the thread or only in your inbox? Make sure you view them in the thread (http://www.jotform.com/answers/57823-I-would-like-to-add-a-colour-swatch-and-a-swatch-displaying-different-font-styles-on-my-jotform-order-page-How-do-I-do-this) because upates to posts in the thread will not show up in your inbox. In other words, when a new post is made in a thread to which you have previously posted something, a notification having the contents of that post is sent to your inbox. However, you will not be notified of if any changes made to that particular post.

    The correct CSS to inject is found in my post above headed "Solution for CLASSIC STYLE form". Drag your mouse over the code to select it and then hit [Ctrl+C] to copy it. Then load the HERITAGE STYLE form into the form builder, delete all of it's injected CSS, paste [Ctrl+V] what was copied to your clipboard and save the form.

    -----------------------------------------------------------------------------------------

    Solution for the BEVELLED MIRROR STYLE form:

    Just replace its current injected CSS with the following:

    #cid_1 .form-header-group,
    #cid_8 .form-header-group {
    background:none repeat scroll 0 0;
    border-width:0;
    }

    .form-line {
    padding-bottom:20px;
    }

    textarea {
    width:512px;
    }

    .form-input img {
    vertical-align:middle;
    }

    .form-radio-item {
    padding-right:15px;
    }

    (Since they're no color swatches in this form, there's no need to include the rules that control the display of such fields.)

    ------------------------------------------------------------------------------------------

    I'll check what's going on with the border and frame images in the COLONIAL STYLE form and get back to you shortly.

  • Profile Image
    JotForm Support

    Answered by abajan on December 05, 2011 at 12:50 AM

    Solution for the  COLONIAL STYLE form:

    1. Replace all of the form's current injected CSS with the following:

     

    #cid_1 .form-header-group,
    #cid_8 .form-header-group {
    background:none repeat scroll 0 0;
    border-width:0;
    }

    .form-line {
    padding-bottom:20px;
    }

    textarea {
    width:512px;
    }

    .form-input img,
    .swatch {
    vertical-align:middle;
    }

    .form-input img {
    padding-right:4px;
    }

    .swatch {
    width:60px;
    height:30px;
    display:inline-block;
    border:1px solid #000;
    }

    .form-radio-item {
    padding-right:15px;
    }

    #cid_18 .form-radio-item,
    #cid_21 .form-radio-item {
    width:160px;
    }

    #cid_22 .form-radio-item {
    width:210px;
    }

    .ivory-swatch {
    background:#EBDBB8;
    }

    .aqua-swatch {
    background:#59D3BC;
    }

    .green-swatch {
    background:#004438;
    }

    .red-swatch {
    background:#790019;
    }

    .darkblue-swatch {
    background:#011C38;
    }

    .purple-swatch {
    background:#4B08A1;
    }

    .grey-swatch {
    background:#58636C;
    }

    .brown-swatch {
    background:#49241A;
    }

    .black-swatch {
    background:#000;
    }

    (Of course, the injected CSS in the other forms will also now need to updated to accommodate the new images)

    2. Delete the field that contains the small image of the border

    3. Replace the code in the "Options" for the "BORDER" field with this

    4. Replace the code in the "Options" for the "CHOOSE FROM" field with this

    Your COLONIAL STYLE form should now look like this.

    Good Night (well, actually I think that should be Good Afternoon to you). It's way past my bedtime! Another JotForm Support team member in different time zone will likely continue to help you while I'm asleep.

    P.S. I forgot to mention that the BORDER field should be two columns. I think I earlier explained how to do that.

  • Profile Image

    Answered by housesignsaustralia on December 05, 2011 at 01:33 AM
    Hi
    I am trying to copy & paste the "Border " field using the *this* link in
    the below email in the thread post.
    I am not able to.
    Do you know why?
    Thanks
    Cathy
  • Profile Image

    Answered by housesignsaustralia on December 05, 2011 at 02:39 AM
    Hi Abajan
    In response to the following;
    Cathy, I just checked your CLASSIC STYLE form and although it looks better,
    I noticed that its right side is cropped. I think
    that's because its embed code has been pasted into the wrong position in
    the page's source. If you compare the source of that page with the source
    of the page that contains the TRADITIONAL STYLE form (which is being
    displayed correctly) you will see that while in the TRADITIONAL STYLE page
    the form's code has been inserted on line 133 immediately after the closing
    "div" tag, the code for the CLASSIC STYLE form has been embedded in a
    totally different position:
    Line 119 immediately after the closing! "h3" tag.
    Could you see if this is now correct and let me know.
    Thanks
    Cathy
    On Mon, Dec 5, 2011 at 4:32 PM, Cathy Rogan <
  • Profile Image
    JotForm Support

    Answered by abajan on December 05, 2011 at 07:02 AM

    Hi again Cathy

    Yes, the CLASSIC STYLE form is now positioned correctly on the page.

    In your penultimate post, it was stated that you were unable to copy and paste the BORDER "field" using the *this* link. The word "this" links to the following page:

    http://pastebin.com/raw.php?i=t4LUHXXc

    The code you see there is supposed to be placed in the Options box for the BORDER field in the following manner:

    1. Select and copy the code in the way I described above: Drag your mouse over the code to select it. (If you are experiencing difficulty selecting the entire code, just drag the mouse over part of it and then hit [Ctrl+A] on the keyboard to select all of it.)

    2. With the code highlighted, hit [Ctrl+C] to copy it to your clipboard

    3. Load the COLONIAL STYLE form into the form builder and click the BORDER field and change the column spread from "1" to "2"

    (Click image to enlarge)


    4. With the BORDER field still selected, click the "Options" button, select everything in the box, paste [Ctrl+V] what was copied to your clipboard in Step 2, click "OK" and save the form:

    (Click image to enlarge)

  • Profile Image

    Answered by housesignsaustralia on December 06, 2011 at 02:46 AM

    Hi Abajan

    I am away for the next day or so, so can only access a computer occasionally.

    Thanks for your reply.

    When clicking on the pastebin link in this jot form thread there is no code coming up, only the letters B3 & B4 with a square box next to each.

    Do you know what would cause the link to look like this, I guess this is why I am not able to copy & paste it

    http://pastebin.com/raw.php?i=t4LUHXXc

    Many thanks

    Cathy

  • Profile Image
    JotForm Support

    Answered by abajan on December 06, 2011 at 04:19 PM

    Hi Cathy

    Try the following link instead and let us know if you are able to view the code:

    http://db.tt/IZo2rxKL

    If clicking the link doesn't work, right-click it and from the pop-up menu click "Save link as..." or whatever the phrase for your particular browser is. After the file has been downloaded, open it to view the code.

    Don't worry, we'll eventually figure this out :)

  • Profile Image
    JotForm Support

    Answered by abajan on December 06, 2011 at 04:38 PM

    By the way, are those the correct borders (B3 and B4) for the COLONIAL STYLE form? According to your Sign Gallery page, the borders for the various styles are as follows:

    Traditional Style: B1, B2 and B5
    Classic Style: No border
    Heritage Style: B6
    Colonial Style: B1 and B4
    Bevelled Mirror Style: No border

    To simplify matters, if you can confirm that the borders listed above for each style are correct, I can go into your account and make the changes to each form for you.

  • Profile Image

    Answered by housesignsaustralia on December 07, 2011 at 07:03 AM

    Hi Abajan

    Thanks for your reply.

    Confirmation of borders as follows:

    Traditional - B1,B2 & B5

    Classica - no border

    Heritage - B6

    Colonial - B3 & B4

    Bevilled Mirror - No border

    I look forward to hearing from you tomorrow.

    Thanks very much

    Cathy

  • Profile Image

    Answered by housesignsaustralia on December 08, 2011 at 06:50 AM

    Hi Abajan

    Could you please confirm if I should wait to hear from you prior to working on and making changes to my jotform order pages.

    I am hoping you recieved my email last night re: the confirmation of borders.

    I look forward to hearing from you.

    Many thanks

    Cathy

  • Profile Image

    Answered by housesignsaustralia on December 08, 2011 at 06:54 AM
    Hi Abajan
    I have posted an answer in response to your last forum jotform email on the
    thread and thought I would also send a message via gmail as I had not heard
    from you today.
    Could you please confirm if I should wait to hear from you prior to working
  • Profile Image
    JotForm Support

    Answered by abajan on December 08, 2011 at 12:58 PM

    Hi Cathy

    Sorry about not replying sooner. This computer is being shared with my sister who also does work on it. Please don't make any changes until you hear later (in about 5 hours time).


    ~ Wayne

  • Profile Image

    Answered by housesignsaustralia on December 08, 2011 at 05:00 PM

    Hi Abajan

    Thanks for letting me know.

    I look forward to hearing from you and will await your instructions.

    Cathy

  • Profile Image
    JotForm Support

    Answered by abajan on December 08, 2011 at 10:09 PM

    Cathy

    Please check all five forms and let us know if everything looks okay now. Incidentally, in order to match the titles on the other sign's order pages, remove "Copy of" from the title of the Bevelled Mirror Style page: Copy of House Signs of Australia | Order Bevelled Mirror Style | House Signs of Australia.


    ~ Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on December 08, 2011 at 10:22 PM

    I forgot to mention that it would be advisable to delete the form named "Heritage Sign Order Page" so that you don't confuse it with "HERITAGE STYLE 2" (the one currently embedded on the House Signs of Australia site).

  • Profile Image

    Answered by housesignsaustralia on December 09, 2011 at 12:28 AM

    Hi Wayne

    Many thanks for your email.

    Forms are looking great. Thank you so much.

    A couple of things I noticed:

    1    An image of the font style example needs to be inserted into the Heritage style order page.

    2    Free style text of:    Lettering used for the Concave style is  the same as the above example.  
         to be inserted under the radio button CL1 Concave in the Classic style order page.

     To ensure that everything goes smoothly would you prefer to add the above or shall I? (I could email you a file with the font style image)

    I look forward to hearing from you.

    Cathy

  • Profile Image

    Answered by housesignsaustralia on December 09, 2011 at 06:33 AM

    Hi Abajan/Wayne

    I have made final changes needed to the jotform & I think all looks right with them. Fingers crossed.

    It would be great if you could check & confirm I have made the changes correctly.

    Thanks so much for all your help, you have been fantastic.

    I am looking forward to launching the site.

    I look forward to hearing from you.

    Cathy

  • Profile Image
    JotForm Support

    Answered by abajan on December 09, 2011 at 08:02 AM

    Hi Cathy

    Everything looks super. The only thing I would suggest is that the right side of the font images be cropped to where the letters end. The following montage of the images will better explain what I mean:

    (Click it to zoom to actual size)

    The first font image which appears on the Traditional Style order page is okay because it is cropped to where the right edge of the lowercase "z" (as indicated by the first arrow) allowing the "T1" label to be positioned next to it.

    The other images should be cropped in like manner so that their text labels also appear near to them. This really needs to be done in the case of the third image (indicated by the second arrow) because the "H1" label is miles away from its font!

  • Profile Image

    Answered by housesignsaustralia on December 09, 2011 at 06:34 PM

    Hi

    Thanks for your email.

    I will crop the image and reinsert as you suggested.

    I would like to have any fields that have only 1 option selected by default. I have tried to do this using the selected option but have not been successful (the images seem to disappear)

    Would you be able to do this for me or tell me how to do it?

    Many thanks for this

    Cathy

  • Profile Image

    Answered by allanftd on December 10, 2011 at 03:11 AM

    There is a workaround for this but it will only work if you are using the full source code. just look for the check box field concerned and remove this check box attribute: checked="checked"

     

  • Profile Image

    Answered by housesignsaustralia on December 10, 2011 at 10:55 PM

    Thanks for your reply.

    I don't understand about the full source code etc and am not wanting to cause any problems with the current forms so I will just leave things as they are.

    Cathy

  • Profile Image
    JotForm Support

    Answered by abajan on December 12, 2011 at 06:53 PM

    Hi again Cathy

    Actually, I was recently able to set the two single radio button fields in a clone of your HERITAGE STYLE 2 form to "Selected" (by default). For each field, this was accomplished by first clicking the field then the "Selected" button, clicking the second button, as shown below and saving the form:

    (Click image to zoom to actual size)


    Since the house signs must have both the lettering style and border, a radio button (as you are already using) is the appropriate selector (it cannot be deselected by users and it is actually unnecessary to set the field as "Required"). However, in a case where you would like an item selected by default but still give users the option to deselect it, a check box would have to be used.

    Hopefully, you found this helpful.


    ~ Wayne

    P.S. I would have answered this sooner if I had known about it but for some reason I have stopped receiving notifications of new posts to this thread.

  • Profile Image
    JotForm Support

    Answered by abajan on December 12, 2011 at 06:55 PM

    Incidentally, to see the above solution in action, go to http://www.jotform.com/form/13451206324