Display email input field and submit button within same line.

Still looking for help with this! Any advice or guidance in a direction would be much appreciated!

Thank you!

Hi Rmt303,

It was night time when you posted that, it’s morning now. I will take a look.

There is a lot of stuff going in in that area.

There are remnants of regular MailChimp embed code wrapped in a form-group that contains the “Sign up for The Grounds News” title. Then our form is wrapped in a div with col-sm-4 that is only 256px wide, it is not enough space for the form to display inline.

If you can remove all the old embed stuff and just have “Sign up for The Grounds News” and our form it should be enough room.

Try that and let me know and I can take another look.

Thank you!
-Tracy

Sorry! Thanks for the reply, I have removed the old embedded code and yet the submit button still falls below on the next line….

We’re getting there ??

If you look at the HTML you have the title wrapped in a form label with col-sm-5 and the form next to it wrapped in col-sm-4

<label for="mce-EMAIL" class="col-sm-5 control-label">Sign up for The Grounds News</label>
<div class="col-sm-4">

Those 2 sections are sharing a parent container with the social buttons that is only 800px wide. This leaves the form itself with 256px wide. It is not wide enough to have the button inline with the text field.

I would get rid of all the extra code and put the form in a col-sm-9 and use the Title that comes with our form.

Try that and let me know how it goes. It may need more tweaking, but the entire form will have more width to work with.

Thank you!
-Tracy

Tried what you suggested and the submit button still fell below.

I dont get it. With the old code before I installed this addon I had everything laid out perfectly on one line. Same text jsut a smaller input field and submit button.

Where could I find the style sheet you use for default configuration? I have edited a bit for color matching purposes, but if i could shorten the input field and make the button a bit smaller it would fit.

Hi I just took a peek and it looks like it is the same as it was before with the same column classes forcing the form into a 256 pixel wide space.

If you can put the title and form into one col-sm-9 container it will give us more room to put the form on one line. It may still take some tweaking, but we can get it to work. With only 256 pixels to work with, the form field will be tiny on one line and the user interface will not be good for users. It may prevent folks from signing up for you list, which would be bad.

Also, I can see from the code that inline is not enabled. When it is there are classes added to it.

Here is an example of what I’m talking about. Via the inspector, I removed all the remnants of the old embed code and other extra misc code and just put the form inside a col-sm-9 container:

<div class="col-md-8 col-md-offset-2">
	<div class="col-sm-9">
		<h4>Sign up for The Grounds News</h4>
		<section id="yikes-mailchimp-container-1" class="yikes-mailchimp-container yikes-mailchimp-container-1 ">
		 	All the MailChimp form code generated by the plugin...
		</section>
	</div>		

	<div class="col-sm-3 sosial">
		Social icons...
	</div>
</div>

Here is the resulting form, and how it would look inline:
https://cloudup.com/cRyJTsfugma

Does this make sense? I really want to help you get the form to display the way you want ??

Thank you!
-Tracy

Hello again,

Any luck? ??

Thank you!
-Tracy

Unfortunately no, I cant seem to tweak your submit button or input field to fit onto one line.

If I take your form code out and put back the old mailchimp code will it display as it used to?

I really don’t know about your last question. There is a lot of extra code in that section. You’ll need to clean all that up first.

Did you try it like my instructions? I was able to get it to work.

Aside from going in and doing it myself, I’m not sure how to help further ??

Best of luck!
-Tracy

From you example earlier everything was still on two lines. Before we installed yikes, I had the old code setup where “Sign up…” the email input field, submit button, and the social icons all sat on the same line and looked great.

I cannot seem to achieve that with the yikes signup. Personally I think it looks fine on two lines with the submit button falling below the email input field. But the higher ups want everything on one line….

So if I removed your sign up form from the footer would the old regular mailchimp embedded form still work or would yours override it?

I am sorry to be a pain, and I really do greatly appreciate all the help you have given me. Still give the plugin high praise and ratings.

Unfortunately, I can’t answer that because I am unfamiliar with the code you had there before.

However, if you retrace your steps backwards, I don’t see why it wouldn’t work.

FYI, I am able to get it to display inline with the space it has there now, but it’s so tiny at that point the form will be hard to use.

https://cloudup.com/iUMK-a-W_9i

Thank you!
-Tracy

Hi there;

I’m currently redesigning my website with a new theme and would like to replicate my MailChimp signup form on my new website. It was originally custom created (on the old site), but I’d like to use your plugin to make things easier on my new website.

Here is my old website https://www.debozarko.com/. You can see the signup form by the footer.

Here is my new website https://www.newwebsite.debozarko.com/ and the signup form is up higher. I’m currently using a MailChimp element from the theme, but it only allows for email address. I would like “First Name” and email address like my old website.

Can you tell me if it is possible to create a Mailchimp form with your plugin that looks like the footer signup at https://www.debozarko.com/? In other words, I want “first name”, “email address”, and submit button all on one line rather than stacked.

Thanks for your help.

Yes, you can use or plugin to create a form like this.

Inline forms: https://yikesplugins.com/support/knowledge-base/how-do-i-place-all-of-my-form-fields-on-one-line/

Using placeholder text vs. labels: https://yikesplugins.com/support/knowledge-base/editing-forms/

Look at the section that explains all the options for a single field.

The form may still need a little styling to get it to look exactly the way you want, if so, open up a new topic and we will be happy to help you.

Thank you!
-Tracy

Hi there;

I’ve created an inline form for my website. It looks fine except for a few things:

1) The submit button is not aligned with the name and email fields.
2) The submit button blends into my background until rollover. How do I change the color of the button so that it is black with white text when static and gray with white text on rollover?
3) Below the name field embedded in the red background is a link that blends into the background that I randomly discovered. It says “edit form”. How do I get rid of this.
4) Lastly, how do I test the form? I unsubscribed my email personal address and then tried to subscribe again and get this error message:
“[email protected] has unsubscribed, and cannot be resubscribed by you. To prevent spam complaints, they’ll need to resubscribe of their own free will.”

Here is my website https://www.newwebsite.debozarko.com/.

I’m trying to replicate the signup form look of my old website at this link https://www.debozarko.com/ (scroll down to footer).

Thanks for your help! ??