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 create a similar newsletter opt-in form?

    Asked by DeskDocs on May 10, 2016 at 06:20 PM

    Hi there! I've searched and searched your templates and can't find anything close to what I'm looking for. Surely I'm missing something obvious. :)

    Please see attached example of what I'm trying to create. Any advice what template to use? Thanks so much!

     

    Faith

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Boris on May 10, 2016 at 06:35 PM

    If I understand correctly form your screenshot, you seem to be looking for a newsletter signup form. You may want to looks at one of our template forms shared with the keyword "newsletter":

    https://www.jotform.com/form-templates/search/newsletter

    You can also create a similar form by simply using an Email field, and a Submit button. Here is an example form I have created that may help get you started:

    https://form.jotformpro.com/form/61306716478965

    You can clone this form into your own account by following this guide:

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Please let us know if you need further assistance, we'll be happy to help.

  • Profile Image

    Answered by DeskDocs on May 10, 2016 at 06:44 PM

    Thank you for the speedy response!I'll give your form a try.

  • Profile Image
    JotForm Support

    Answered by Boris on May 10, 2016 at 06:52 PM

    You are most welcome. If you need any further assistance, just let us know and we'll be happy to help.

    When it comes to the specific functionality of sending out newsletters, I would also like to add that, if you are using services such as MailChimp or Aweber for your newsletters, our forms can also integrate directly with many of the most popular email/newsletter services:

    https://www.jotform.com/help/163-How-to-Integrate-with-MailChimp

    This means you can use our (JotForm) forms for collecting email addresses through easily built forms, and you can then send out newsletters from such specialized services such as MailChimp.

    I hope this helps.

  • Profile Image

    Answered by DeskDocs on May 10, 2016 at 06:57 PM

    Thank you. The issue is that I'm not working through MailChimp, Aweber or any of the other email providers listed in your integration. I'm working with a company called GetDrip.com. This is now the second full day (10 hours now!) I have been on your site trying to create a form that looks like the one above and it just doesn't seem possible. Is there anyone on your team who can help create this form?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 10, 2016 at 09:34 PM

    It is possible to do by customizing your form using some CSS codes, I have customized the form provided by my colleague, you may take a look to the form on this link: https://form.jotform.com/61307796749975

    You may also clone it and see the CSS code that I have added in the designer, the guide below will help you to clone the form: 

    How-to-Clone-an-Existing-Form-from-a-URL

    You may change the background color as well as the background of the fields and the button style as well. 

    This is some of the code that I have used to customize a bit the form:

     

    li#id_2 .form-buttons-wrapper {

        margin-left : 20px !important;

    }

     

    input#input_3 {

        width : 515px;

        height: 34px;

        margin-top: 9px;

    }

     

    li#id_3, li#id_2 {

        padding : 0px !important;

    }

     

    li#id_3 {

        margin-left : 5%;

    }

     

    label#label_3 {

        display: none;

    }

  • Profile Image

    Answered by DeskDocs on May 11, 2016 at 08:55 AM

    Thank you Kevin. Your help is greatly appreciated and I'm grateful that you took the time to get this started. I've just spent another hour trying to create the form and still can't get it. I guess I'm a lost cause when it comes to CSS. Ha ha. At this point, I guess I need to just hire someone to do this for me. Any ideas where to go for that? 

  • Profile Image
    JotForm Support

    Answered by Boris on May 11, 2016 at 10:33 AM

    I have taken a look at one of your forms, and it already appears to be similar to the form you were looking to create:

    https://form.jotform.co/form/61307210249850

    I believe the only further changes are in the styling, so I have made the following demo form that better matches your earlier provided image:

    The custom CSS used on this last form is:

    #id_3, #id_2 {
        width: 50%;
        padding: 0 4% 30px;
        margin: 0;
    }
    #label_3 { display: none; }
    .form-buttons-wrapper { margin-left: auto !important; }

    #input_3, #input_2 {
    width: 100%;
    height: 50px;
    margin: 0;
    font-size: 20px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    border: 0 none;
    border-radius: 0;
    }

    #input_2 {
    background: #E7501B;
    color: #fff;
    box-shadow: none;
    }

    .form-line-active { background: none !important; }

    I've also made your image mobile responsive, so it works well even on mobile phones. Please take a look at the following form and see if it will appear the way you wanted it to:

    https://form.jotformpro.com/form/61313935272958

    If you want to hire someone to help you with any coding, I'm afraid that we can't make any special recommendations. Usually, you should be able to find a designer or coder willing to help over online freelance sites, such as upWork, Guru, or similar.

    But our support team will also be happy to help you use our easy Form Builder as best as possible.

  • Profile Image

    Answered by DeskDocs on May 11, 2016 at 07:15 PM

    WOW, thank you Boris!!! Holy Moly! Super cool for you to do that. You are a coding angel. Thank you!!!!

  • Profile Image

    Answered by DeskDocs on May 11, 2016 at 07:28 PM

    How do I eliminate the border around the green box? Is it even possible with this software to recreate the original Opt-In Box above?

  • Profile Image

    Answered by victor on May 11, 2016 at 09:54 PM

    If I understand you correctly, you would like to to create a banner like you have in your image. In the banner have the image with no borders and have it display in the entire form.

    I used  different method than my colleagues. Instead of using the HTML field to insert the image I used the HEADER field:

    I inserted the image using the HEADER IMAGE button

    Once uploaded you will see the image, modify the width of the image to 690px, as this is the width of the form.

    Now we have the image size correct, we just need to remove the left spacing

    I think this is best as it does not require much coding.

    Please let us know if this helps.

     

  • Profile Image

    Answered by DeskDocs on May 11, 2016 at 10:47 PM

    Thanks Victor! I was following you until the very end. Where do I find the CSS code section to remove the left spacing?

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on May 11, 2016 at 10:59 PM

    I believe my colleague was editing the code from the Form Designer, but you can simply clone my colleagues form in your account and use it, here is the link to the form: http://www.jotformpro.com/form/61318171304951 

    Please check this guide to learn how to clone it: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

  • Profile Image

    Answered by DeskDocs on May 11, 2016 at 11:29 PM

    Woah, how did you do that? Cool, thank you! There are still a few tiny adjustments needed. There's a thin line showing up below the green graphic and the top gray area (above the green) needs to be removed. Is this somehow accomplished in the Source CSS code when publish button is clicked?

  • Profile Image
    JotForm Support

    Answered by Charlie on May 12, 2016 at 01:53 AM

    There's actually a box shadow the surrounds the main content of the form.

    We could remove it using this custom CSS code:

    .form-all {

        box-shadow: none !important;

    }

     

    Now to remove the line you're seeing just below the green image, you can add this CSS code:

    .form-header-group.hasImage {

        border-color: transparent !important;

    }

     

    Here's my cloned form: https://form.jotform.com/61321242541947. That's how it looks like with the CSS code I mentioned. You can clone it and adjust it.

  • Profile Image

    Answered by DeskDocs on May 12, 2016 at 02:06 PM

    Wow, amazing! Thank you Charlie! I am blown away by the help on this forum. Where are you going to change out the CSS code?  I'd still like to "remove" the top gray bar, plus shrink the gray area on the bottom (again, just trying to get it to look like the original graphic shown at the top of this post). Any final advice is greatly appreciated.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 12, 2016 at 02:15 PM

    You do not need to change any of the existing code on your form, you only need to copy and paste the code given above, you may follow the steps on this guide to inject the code to your form: 

    How-to-Inject-Custom-CSS-Codes

    Or you may also paste this code in the Designer, to do it you will need to click on the Designer icon, you will find it on the top toolbar while in the Form Builder: 

    Then, click on the CSS tab and paste the code there: 

    This is the code that you need to paste there: 

    .form-all {

        box-shadow: none !important;

    }

    .form-header-group.hasImage {

        border-color: transparent !important;

    }

    Hope this helps.

  • Profile Image

    Answered by DeskDocs on May 12, 2016 at 05:35 PM

    Thanks for that tutorial Kevin. I added the code, but nothing seemed to change. The code was added at the very end. Is that the correct placement?

  • Profile Image

    Answered by victor on May 12, 2016 at 05:59 PM

    I have just opened the form and see it is almost identical as the image you provided.

    I am assuming you are embedding the form into your site. Could you please provide us the URL so we can view how it looks and see what you are really looking for. I am assuming you wish to eliminate some more spacing between the form and your site.

     

  • Profile Image

    Answered by DeskDocs on May 12, 2016 at 10:41 PM

    Hello Victor. Thanks for your follow up. Here's a test page to show how it looks on my site:

    http://www.desktop-documentaries.com/test-page.html


    You're correct, that it's close! Just still trying to figure out how to minimize the gray area.

  • Profile Image
    JotForm Support

    Answered by jonathan on May 12, 2016 at 11:06 PM

    I see what you meant when I checked on the website.

    Allow us to check the what CSS code can be applied to address the around padding/spacing for the gray area. We'll get back to you shortly.

  • Profile Image
    JotForm Support

    Answered by jonathan on May 12, 2016 at 11:23 PM

    Please check my test form https://www.jotform.com/61328337766968

     

    I applied the following changes using the CSS editor of the Form Designer.

     

    for the 2 input fields

     

    If my test form matches what you want already, you can also clone my test form and publish it on your test website so that you can view the actual response of the form on the website.

    Don't hesitate to let us know if you need further assistance.

     

  • Profile Image

    Answered by DeskDocs on May 13, 2016 at 05:39 PM

    Thank you Jonathan! How did you get that orange padding box to pop up. Nothing pops up for me when I click the little boxes inside the CSS designer.

    Well, anyway, I posted your new form on my site, but the padding is still off unfortunately. You can see it posted here.

    http://www.desktop-documentaries.com/test-page.html

    Any other ideas?

     

     

  • Profile Image

    Answered by victor on May 13, 2016 at 05:57 PM

    When reviewing your form I noticed that you have padding enabled in your code.

    Adjust the following code from

    /** Remove the line just below the image header**/

    .form-header-group.hasImage {

        border-color : transparent !important;

        padding : 0px 0px 10px 0px;

    }

    To

    /** Remove the line just below the image header**/

    .form-header-group.hasImage {

        border-color : transparent !important;

        padding : 10px 10px 0px 10px;

    }

    This will remove the spacing in your header image as will look like below.

    Please let us know if this helps.

  • Profile Image

    Answered by DeskDocs on May 13, 2016 at 06:44 PM

    Great! Seem to have gotten the padding issue fixed. Thank you!! We're down to the final tweaks.

    The latest version is here: http://www.desktop-documentaries.com/test-page.html

    How to get the two buttons closer together in the middle? 

    How to increase size of orange button to match white button.

    Plus, how to "un-bold" the text "Sign Me Up!"

    (I promise I"m trying to fix these things myself, but none of the buttons in the designer seem to be working for me)

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on May 13, 2016 at 07:33 PM

    Please try injecting the following CSS code as explained on this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #input_3{

        margin-left: 10px !important;

        width: 100% !important;

    }

     

    #input_2{

        margin-left: -30px!important;

        width: 93% !important;

    }

    This should be the result:

     

    Let us know if you need more help.

  • Profile Image

    Answered by DeskDocs on May 13, 2016 at 07:57 PM

    THAT'S IT! HOME RUN!! WOO-HOO!!!

    Thank you BDavid and all the other coders and designers here. I am grateful beyond words. Wow. Is there a donation button or some way to say thanks?

  • Profile Image
    JotForm Support

    Answered by BDAVID on May 13, 2016 at 08:21 PM

    On behalf of my colleagues, you are welcome! We are glad to assist you. Feel free to contact us any time. 

  • Profile Image

    Answered by DeskDocs on May 13, 2016 at 08:30 PM

    Thank you so much. Pretty sure this is the most helpful forum on the web! You guys rock! 

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 13, 2016 at 10:16 PM

    Thanks for your kind remarks. Cheers! :)