Is there a way to add HTML code to a page in Web Designer?
Thanks
Printable View
Is there a way to add HTML code to a page in Web Designer?
Thanks
Absolutely. You can add HTML to the website, to a single page, or to a placeholder object.
In the Website Properties menu, go to Website or Page and you will see two buttons, HTML code (Body) and HTML code (Head). Click the appropriate button and add the code. This code will be added to the HTML document.
You can also add code, for a form for example, into a placeholder. A Placeholder is a simple rectangle into which you paste your code. Website Properties > Placeholder
Perfect! Thank you Gary. Much appreciated.
Cheers
My pleasure, Inspector. :)
Actually Gary,... you mentioned that you can also add code for a form which is something that I will be doing but that leaves me with another question.
Adding the code for the form should not be a problem but the form will use a separate php file to send the contents of the form when the submit button is pressed. How would that be accomplished? I mean, how will Web Designer know to upload the php file as well as the page containing the form? If I try to add the php code into the same page as the form, the page would have to have the .php extension so I don't know if Web Designer can do that.
I don't know if I am explaining this right but hopefully you can see what I am getting at. :)
Cheers
Hi Columbo,
What form are you trying to add and from where? If, for example, you are using MailChimp, all you need to do is this:-
1) Copy the code from Mailchimp (or wherever)
2) In Xara, select the rectangle tool and draw a rectangle where you want the form to be on your page.
3) Right-click the rectangle, select 'Web properties'
4) Click the Placeholder tab
5) Select 'Replace with HTML code' and press the HTML (Body) button.
6) Paste your code and save.
You can check the box that says 'Re-generate placeholder image'.
As long as the code you are inserting is meant to embedded in an HTML page, all should work fine.
I hope that helps!
Best regards,
Ian
Oh, and one more thing...
If you insert PHP code, it won't run until you publish on your website and have PHP running on your server (which most seem to do).
Hi Ian, thank you for your suggestion. I am not using MailChimp or anything like that. What I want to do is place some code, which contains both the form and the php code to send it, all in the same piece of code.
Here is the code that I want to place on my Contact Page:
The problem is that, generally when using code like this, the contact page would normally have a .php extension since it contains php code. My Web Designer contact page likely uses an .html extension.Code:
<?php
if(isset($_POST['email'])) {
// CHANGE THE TWO LINES BELOW
$email_to = "admin@canadianamateurradio.ca";
$email_subject = "Contact Form submissions From CAR";
function died($error) {
// your error code can go here
echo "We're sorry, but there's errors found with the form you submitted.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
Thank you for contacting us. We will be in touch with you very soon.
<?php
}
die();
?>
<form name="htmlform" method="post" action=""
</tr>
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<!-- We are grateful to you for keeping this link in place. thank you. -->
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
The other alternative might be to upload the php file to the website and use action="form_send.php" in the form code but since I've only been using Web Designer for a week now, I don't know what the path would be to the php file since I don't know where my contact page is going to reside when Web Designer uploads my site to the server.
Cheers
Hi Columbo,
Well that appears to be a simple contact us post form which just sends the contact details as an email to specified email address.
You can use virtually any embedded form to do that, and there are several to choose from in the Designs Gallery.
Click on Components, then Print & Web Components. There'll be a short delay, but then the Online Content Catalogue will appear.
You can choose between Google Forms, JotForm , WUFOO or Form2Go.
Personally, I prefer WUFOO but it takes some setting up (the results look great though). Been a while since I looked at the others, but Google Forms are easy enough to use.