Single Line Signup Form

  • Profile Image
    wonda
    Asked on March 05, 2013 at 04:17 AM

    Hi Guys at Jotform is it possible to create a single line sign-up form as the below.

     

     

    Best Regards

  • Profile Image
    Welvin
    Answered on March 05, 2013 at 04:49 AM

    Hi,

    Yes, that is possible with Field Positioning and a csutom CSS injection. Let us your form URL so we can check and help you more about the alignments.

    Example Form: http://jotformpro.com/form/23148799853975

    Thanks

  • Profile Image
    sidharth_kch
    Answered on March 05, 2013 at 04:58 AM

    @ wonda

    Yes you can create a single line form. 

    I have created a sample form. Have a look : http://www.jotform.com/form/30632357157958

     

    Thanks,

    Sidharth

  • Profile Image
    wonda
    Answered on March 05, 2013 at 06:17 AM

    Hi: Guys

    Thank you for your speedy response. I notice that the submit button is not quite align with the text box is it possible to correct that?

    Kind Regards

  • Profile Image
    Welvin
    Answered on March 05, 2013 at 06:51 AM

    Hi,

    Yes by adjusting the custom CSS codes that are injected to the form. Do you have your own form, can you please share with us the form URL so we can check and finalized the codes for you?

     

    Thanks

  • Profile Image
    wonda
    Answered on March 05, 2013 at 07:16 AM

    Hi: Welvin

    https://secure.jotformeu.com/form/30616477104349

    I have added a collapse element is it possible to make it the same color as the background (orange).

  • Profile Image
    EltonCris
    Answered on March 05, 2013 at 08:35 AM

    Hi,

    You mean make the collapse text color to orange? Or the form collapse it self? If you mean the text color, use the following CSS.

    .form-collapse-mid {

    color: orange !important;

    }

    To align the button to the text boxes, use this CSS code. You can adjust 26px if you like.

    #id_2{

    margin-top: 26px !important;

    }

    Also, the text sub-labels looks blurry and totally unreadable. Making it white should help. Use this.

    .form-sub-label {

    color: white !important;

    }

    You can inject all these CSS codes to your form. Here's a guide: How to Inject Custom CSS Codes to your Form.

    Let us know if you need anything else. Thanks!

  • Profile Image
    wonda
    Answered on March 05, 2013 at 08:47 AM

    Hi: EltonCris

    Thank you very much, I appreciate your help, in regards to the form collapse element is it possible to have the element orange not the text.

    Kind Regards

  • Profile Image
    jefreylandicho
    Answered on March 05, 2013 at 09:25 AM

    Yes that is likely possible to turn the form collapse element to orange. To do this, please add this code to your Custom CSS Code

    .form-collapse-table {background: #EB6207 !important;}

    Result Preview :


    You could also try adding the css code below for a shadow effect

    -webkit-box-shadow: -6px 10px 7px rgba(77, 50, 50, 0.66);

    -moz-box-shadow:    -6px 10px 7px rgba(77, 50, 50, 0.66);

    box-shadow:         -6px 10px 7px rgba(77, 50, 50, 0.66);

    If you need further assistance, do not hesitate to contact us again.

  • Profile Image
    EltonCris
    Answered on March 05, 2013 at 11:16 AM

    @shproperties

    Yes, it was for the other user "wonda". You seem to have posted on this thread with blank content so you've received notifications from this thread. I have now deleted your post. 

    Sorry for the confusion.

  • Profile Image
    wonda
    Answered on March 05, 2013 at 11:49 AM

    Hi: jefreylandicho

    Thank you very much.