WordPress 404 On Form Submit

WordPress 404 on form submit

Get 1 year access to all of our current and future products and 1 year of professional support — 99€

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you’ll have it all covered!

3rd Party Discount – 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you’ll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

WordPress 404 on form submit

Get 1 year access to all of our current and future products and 1 year of professional support — 99€

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you’ll have it all covered!

3rd Party Discount – 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you’ll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

alexking.org

Once a user has submitted a form, you generally don’t want them to submit it a second time. 1 A nice way to handle this is to disable the submit button once the form has been submitted, while replacing the text in the submit button with a message to let the user know that their desired action has been taken.

Here is a little code that will disable the submit button and display that nice message:

Set the message to display by setting a data attribute on the submit button. If the data attribute isn’t set, we don’t do anything. This is a good safeguard against unexpected functionality, but if you want to disable the button for all forms anyway you can do so with a little code tweak.

  1. Some folks insist on double-clicking on the web. ↩

Other Recent-ish Posts of Note on This Site

We’ve Made Web Development Complicated

When I first made my transition from front-end development into back-end development in

2002, I had two things to learn: a…

Every New Hire Has Three Jobs

At Crowd Favorite we’re getting ready to hire several developers. I’ve been told that our on-boarding process can…

Owning Your Online Identity

I’ve put up a post on the Crowd Favorite blog about how I use WordPress and the FavePersonal theme (free!) to own my…

Comments Off on Disable Submit Button After a Form is Submitted

Alex King, Web Developer

I passed away in September 2015. I was an independent web developer based in Denver, CO. I was an original contributor to WordPress, I created the Share Icon, and I founded Crowd Favorite. Read more…

Recent Blog Posts

Thanks to Dealspotr for sponsoring this site.

ChameleonJohn – best coupon codes for thousands of online stores.

Add a MailChimp Signup Form to Your WordPress Website without a Plugin

February 18, 2014 Marcy Diaz

Share this post:

It’s easy to add a MailChimp Signup form to your WordPress blog or website to collect names for your email list without using a plugin. For a lot of themes, the form will just blend in with your theme. Look at how the form will look in the default WordPress themes – Twenty Twelve, Twenty Thirteen, and Twenty Fourteen.

The advantage of using your own form is that you can create a different signup form for each of your lists, in case you have one for a download and one for your blog. The only other way to do this is to use more than one plugin; not so nice. Also adding a form directly to your website allows people to sign up without leaving your website, and the form can be styled to match the styles styles of your website.

MailChimp Embedded Form Settings

So you start by looking at the signup form settings in MailChimp.

  1. Login to your MailChimp account.
  2. Then in your MailChimp Dashboard on the left, choose Lists.
  3. Now you’ll see all the lists you have in your MailChimp account. (If you don’t have any lists, you will need to create one with the Create List button in the upper right hand corner.)
  4. Now hover over the down arrow on the far right of the list you want to use for the signup; choose Signup forms.
  5. On the next page are three choices. You use General form to choose the fields (email, first name, last name, etc.) for your form and to edit all the confirmation and thank you pages. For your blog newsletter, choose the Embedded forms button.

MailChimp Embedded Form Code Page

Now you can get the code for the signup form to embed on your blog.

  1. You can choose any of the three form types – Classic, Slim, Naked. You can use Classic for this tutorial; the advantage is that you get the JavaScript so that if someone gets an error while completing the form, they will still be on your website form, rather that going to the full page signup form page from the General form section.
  2. If you uncheck to include a title with your form, you can use the widget title to title your form.
  3. You can choose to show all fields or only the required fields. For this tutorial, I’m using a form that asks for email and first name.
  4. You can also uncheck interest group fields and required field indicators. You would only keep these if you had a form with a lot of fields.
  5. Leave the form width empty, so that the form will fill the width allowed in your widget.
  6. Now select all the code from the box – Copy/paste onto your site.

Your WordPress Blog or Website

Add a text widget and paste in your MailChimp code.

  1. Now you want to login to your WordPress dashboard. From the menu, click Appearance > Widgets.
  2. Drag a new Text widget to your sidebar, and place it where you want your signup box to be.
  3. Paste the code from MailChimp into the text area. Add a widget title, like Newsletter Signup or Blog Signup Form
  4. Save and view how it looks on your website.
  5. If some themes this is all you will need to do. But while the form for Twenty Twelve isn’t too bad, but the others use white text for the widget area, and MailChimp adds a white background, so the form disappears.

Look at the MailChimp Code

This is the MailChimp Classic form code.

Right at the beginning is this code section; this is what creates the styles for the MailChimp form.

You can delete those lines so that the beginning of the code in the text widget looks like this. This will allow you to see how your form looks with only your theme styles.

Now look at our three themes again. It’s looking much better except that there’s not enough spacing; the Submit button is running into the input fields.

So you can add a little CSS back. It’s preferable that you use a Custom CSS Editor or add the CSS to your child theme style.css, but you can also add it directly to the widget.

In style.css or a custom CSS editor, add

Or make the beginning of the code in the text widget look like this:

(Note that if you use the Naked form code from MailChimp, you will need to use #mc_embed_signup input instead of #mc_embed_signup .mc-field-group in the two CSS blocks above.)

This is how the forms look with just adding those two lines of CSS.

Now you have a nice MailChimp signup form without using a plugin. This should work for many current themes, including many Genesis child themes. Please let me know how yours looks.

You can also add more styles to make the form stand out from the sidebar, but that can wait for another time.

Leave a Reply

Your email address will not be published. Required fields are marked *