How to create a similar newsletter opt-in form?

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

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.

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

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.

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?

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;

}

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? 

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.

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

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?

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.

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

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 

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?

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.

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.

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.

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?

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.

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.

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.

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.

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?

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.

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)

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.

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?

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

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

Thanks for your kind remarks. Cheers! :)