Veamos esta última opción
paso a paso:Lo primero es, como decimos, crear una nueva página en blancopáginas > página nuevaLe pondremos como título, por ejemplo, "CONTACTO", la editamos en modo HTML y pegamos este código:
<div style="text-align: center;">
<br /></div><div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div style="text-align: center;">
<span style="font-size: large;">Nombre</span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
</span></div>
</div>
<div style="text-align: center;">
<span style="font-size: large;">eMail *</span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Mensaje *</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><span style="font-size: large;"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" color:="" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /></span>
</span></div>
</div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
<div style="text-align: center;">
<br /></div>
</form>
</div>
Le damos a "vista previa" y vemos cómo nos ha quedado.
¿CÓMO PERSONALIZAR EL FORMULARIO DE CONTACTO?
Añadiendo nuevos códigos enplantilla > personalizar > avanzado > CSScomo por ejemplo estos:/* Formulario de Contacto
----------------------------------------------- *//* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 1000px;
margin: 0 auto;
margin-bottom: 25px;
float: center;
padding: 10px;
background: #ffffff;
color: #000;
border: 1px solid #ffffff;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #c5bc73;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 13px;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #444444;
border: none;
}
Que son los que corresponden al diseño de la imagen con que abríamos est post...