Inserting HTML / Javascript code into the body of a Wordpress site through Visual Composer

Navigation
0

Hello

I'm trying to insert a custom table (html / javascript code) into the body of a page of my Wordpress website.

This table: link

At the moment the table is missing the javascript part

Code: 

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Planos Mensais de Limpeza de Piscinas</title>
  <script src="http://s.codepen.io/assets/libs/modernizr.js"type="text/javascript"></script>

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  
<style>

body { background: #fff; font: 400 12px "Open Sans", "Helvetica Neue", sans-serif; color: #333; text-align: center; padding: 4em 15em; }

/*TÍTULOS*/
h1 { font-weight: 300; font-size: 5em; line-height: 1.35; margin: 0 0 .125em; }
h1 + p { font-size: 1.5em; color: #999; max-width: 30em; margin: 0 auto 3em; }

/*TABELA*/
table { width: 100%; text-align: left; border-spacing: 0; border-collapse: collapse; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*TABELA - FONTS BASE*/
th { font-family: inherit; font-size: .875em; line-height: 1.45; color: #444; vertical-align: middle; padding: 1em; }
td { font-family: inherit; font-size: 1.5em; line-height: 1; color: #444; vertical-align: middle; } 
th { font-weight: 600; }

/*TABELA - BORDAS INICIAIS*/
colgroup:nth-child(1) { width: 15%; border: 0 none; }
colgroup:nth-child(2) { width: 10%; border: 1px solid #ccc; }
colgroup:nth-child(3) { width: 10%; border: 1px solid #ccc; }
colgroup:nth-child(4) { width: 10%; border: 1px solid #ccc; }
colgroup:nth-child(5) { width: 10%; border: 1px solid #ccc; }

/*TABELA - HEADER*/
thead th { background: #def4fe; background: -moz-linear-gradient(top,  #ffffff 0%, #f5f5f5 100%); background: -webkit-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); background: -o-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); background: -ms-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); background: linear-gradient(to bottom,  #ffffff 0%,#f5f5f5 100%); text-align: center; position: relative; border-bottom: 1px solid #ccc; padding: 3em 0 2em; font-weight: 400; color: #999; }

thead th:nth-child(1) { background: transparent;  }
/*thead th:nth-child(3) {  }*/
thead th h2 { font-weight: 800; font-size: 20px; line-height: 1; color: #59c7fb; } /*Títulos plano*/
thead th h2 + p { font-size: 18px; line-height: 1; } /*Preços plano*/
/*thead th:nth-child(3) h2 {  }*/
/*thead th:nth-child(3) h2 + p {  }*/

/*TABELA - BODY*/
tbody th { background: #fff; border-left: 1px solid #ccc; }
tbody th span { font-weight: normal; font-size: 87.5%; color: #999; display: block; } /*Fonte da descrição dos benefícios*/

tbody td { background: #fff; text-align: center; }

tbody tr:nth-child(even) th,
tbody tr:nth-child(even) td { background: #f5f5f5; border: 1px solid #ccc; border-width: 1px 0 1px 1px; } /*Formatação das linhas da tabela*/
tbody tr:last-child td { border-bottom: 0 none; } /*Formatação da borda do botão comprar*/

/*TABELA - FOOT*/
tfoot th  { padding: 1em 0.5em; border-top: 1px solid #ccc; }
tfoot td  { text-align: center; padding: 1em 0.5em; border-top: 1px solid #ccc; }
tfoot a  { font-size: 12px; font-weight: bold; color: #fff; text-decoration: none; text-transform: uppercase; display: block; padding: 1.125em 2em; background: #1bbde8; border-radius: .5em; }


/*CHECKLIST ICONS*/
.fa-check {
  color: #b7e000;
}

.fa-times {
  color: #AF3D11;
}

</style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script></head><body><body><imgsrc="https://piscinafacil.com.br/wp-content/uploads/2016/07/logo-piscina-facil-manutencao-com-responsabilidade-tecnica.png?x63376" height="100px">
  <h1>Planos Mensais</h1>
  <p>Confira nossos planos para todos os tipos de piscina.</p>

Estado 
	<select name="estado"> 
		<option value="estado">Selecione o Estado</option> 
		<option value="ac">SC</option> 
	</select>
<br>
Cidade
	<select name="cidade"> 
		<option value="cidade">Selecione a Cidade</option> 
		<option value="ac">Florianópolis</option> 

	</select>
<br><br>
Tipo de Piscina
	<select name="tipo"> 
		<option value="tipo">Residencial</option> 
		<option value="ac">Coletiva</option> 

	</select>
<br>
Volume da Piscina
	<select name="volume"> 
		<option value="volume">Até 50m²</option> 
		<option value="ac">de 51m² até 100m²</option> 

	</select>

<br><br><br>


	<table>

		<colgroup></colgroup>
		<colgroup></colgroup>
		<colgroup></colgroup>
		<colgroup></colgroup>
		<colgroup></colgroup>

	    <thead>
	    	<tr>
	    		<th>&nbsp;</th>
	    		<th>
	    			<h2>VIRTUAL</h2>
	    			<p>R$ </p>
	    		</th>
	    		<th>
	    			<h2>INVERNO</h2>
	    			<p>R$ </p>
	    		</th>
	    		<th>
	    			<h2>+ FÁCIL</h2>
	    			<p>R$ 190,00</p>
	    		</th>
	    		<th>
	    			<h2>ZERO CLORO</h2>
	    			<p>R$ </p>
	    		</th>
	    	</tr>
	    </thead>

	    <tfoot>
	    	<tr>
	    		<th>&nbsp;</th>
	    		<td><a href="#">ADERIR</a></td>
	    		<td><a href="#">ADERIR</a></td>
	    		<td><a href="#">ADERIR</a></td>
                        <td><a href="#">ADERIR</a></td>
	    	</tr>
	    </tfoot>

	    <tbody>
	    	<tr>
	    		<th>Quantidade de Visitas/Mês </th>
	    		<td>0</td>
	    		<td>2</td>
	    		<td>
                             <form>
                             <SELECT NAME = "menu" SIZE=1>
                             <OPTION>4
                             <OPTION>8
                             </SELECT>
                             </form>
                        </td>
	    		<td>
                             <form>
                             <SELECT NAME = "menu" SIZE=1>
                             <OPTION>4
                             <OPTION>8
                             </SELECT>
                             </form>
                        </td>
	    	</tr>
	    	<tr>
		    	<th>Quantidade de Visitas/Mês - Supervisor Operacional </th>
		    	<td>0</td>
	    		<td>0</td>
	    		<td>0</td>
	    		<td>0</td>
	    	</tr>
	    	<tr>
	    		<th>Controle Técnico </th>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Anotação de Função Técnica </th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Análise da Água in Loco <span>Análise dos parâmetros: pH, Cloro Residual, Alcalinidade e Turbidez</span></th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></i></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Análise da Água em Laboratório Credenciado </th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Limpeza Física <span>Aspiração, Peneiração, Escovação, Limpeza de bordas, etc...</span></th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Limpeza Química <span>Aplicação de Produtos</span></th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    		<td><i class="fa fa-check" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Consultoria Técnica <span>Instalação Elétrica, Hidráulica, Bombas e Filtros</span></th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Assessoria Completa para Regularização da Piscina <span>Vigilância Sanitária e Prefeitura</span></th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Manutenção Preventiva de Filtro e Bomba </th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	<tr>
	    		<th>Fornecimento de Guardião de Piscinas </th>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    		<td><i class="fa fa-times" aria-hidden="true"></td>
	    	</tr>
	    	</tr>
	    </tbody>

	</table>

</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>

I'm trying to insert the table into the body of a page made from Wordpress.

The site has been fully developed with Visual Composer . I'm trying to insert the table through the raw HTML element of Visual Composer.

However, when you enter the code in raw HTML , the ALL Page layout ends up getting unconfigured ( in>). I believe the css in this table is changing all the rest of the content.

I would like to know for what reason, this table code inserted in raw HTML, is changing the layout of the entire page, and how can I proceed so that the code does not change the layout of the entire page?

Thanks in advance for your attention!

    
asked by anonymous 18.04.2017 / 22:01

0 answers

Ionic1 + input [type = file] does not work; How does it work? Pass id received from the database by URL with javascript