JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプトが動かない。

JavaScriptを使ったフォーム項目の表示/非表示を切り替えるスクリプトが動きません。
javascriptに詳しい方解決策を教えていただけないでしょうか
よろしくお願いします。

http://5am.jp/javascript/form_change_javascript/
上記のサイトを参考にさせて頂き、フォーム項目の表示/非表示までは出来たのですが、
必須項目#secondBoxの送信ボタンを押すと#firstBoxの必須項目が影響し項目の入力メッセージが出てしまいます。

cmsはwordpressで、プラグインはcontact form7を使用しています。
onclick属性がプラグインで表示されなかったので、下記サイトを参考にfunction.phpに書き込み、表示させました。
よろしくお願いします。

http://kitaney-wordpress.blogspot.jp/2015/03/contact-form-7.html

JavaScript

<script type="text/javascript">
	function entryChange1(){
		radio = document.getElementsByName('entryPlan') 
		if(radio[0].checked) {
			//フォーム
			document.getElementById('firstBox').style.display = "";
			document.getElementById('secondBox').style.display = "none";
			//特典
			document.getElementById('firstNotice').style.display = "";
		}else if(radio[1].checked) {
			//フォーム
			document.getElementById('firstBox').style.display = "none";
			document.getElementById('secondBox').style.display = "";
			//特典
			document.getElementById('firstNotice').style.display = "none";
		}
	}
	
	//オンロードさせ、リロード時に選択を保持
	window.onload = entryChange1;
</script>

contact form7 入力内容

[radio entryPlan id:test use_label_element default:1 "abc" "def"]
<div class="cf7-block" id="firstBox">
[text* test id:test class:form-control]
[submit class:btn btn-success "送信"]
</div>

<div class="cf7-block" id="secondBox">
<p>住所：<br>[number number-info2-age watermark "例) 42"] </p>
[submit class:btn btn-success "送信"]
</div>