Add Contact form widget on a Static Page
Now we’re going to add the contact form widget to a static page. Follow these steps below.
Click on ‘Pages’ tab on the left hand side.
Click on ‘Pages’ tab on the left hand side.
Now click on New page (Blank page) as usual.
Switch to HTML mode and click on ‘options’ tab on the right side. Then select the “Use <br> tag” option in the Line Breaks section like below.
Now paste below code on the empty Edit HTML field.
Switch to HTML mode and click on ‘options’ tab on the right side. Then select the “Use <br> tag” option in the Line Breaks section like below.
Now paste below code on the empty Edit HTML field.
<form name="contact-form">
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Your Message: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<inputclass="contact-form-buttoncontact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<pclass="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message"id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Your Message: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<inputclass="contact-form-buttoncontact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<pclass="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message"id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
Now you can customize your form E.g, ‘Your Name’, ‘Your Email’ etc. Only if you know a little about CSS, Just change the highlighted words and suit yourself. Note that you can change other things like “cols= “25” to any number you want.
Post a Comment