I am developing a website for dentist friend. So far it's looking good, I am using Wordpress along with the enfold theme.
One of the requested features for this website is to include the DemandForce appointment form, so customers would be able to schedule their appointments inside the new website.
I visited Demand force and found that the way to include their contact form is by:
- Copying the following CSS file into the header
<link type="text/css" rel="stylesheet" href="//www.demandforce.com/widget/css/widget.css" />Which I did by modifying header.php - Adding the following script into the body;
<script type="text/javascript"> d3cp_bid = 'private'; // Business ID in DemandforceD3 //d3cp_appt_source = 'My Website'; //optional. See Instructions. //d3cp_appt_returnpage = 'your_page_url'; // Optional. See Instructions. //d3cp_appt_postdata = 'false'; // Optional. See Instructions. </script> <script src="//www.demandforced3.com/b/burlingamesmile/scheduler.widget" type="text/javascript"></script>Which I also did simply by created a raw text field and inputing it.
The result of this can be seen here. As you probably notice the form is not correctly formatted and I don't really understand why. I checked the source code, and both the CSS file and the script are where they should, so I don't quite get the displaying issues.
Since I couldn't figure it out this way, I tried another idea. The actual reservation form is hosted here. The good thing about that form is that is actually responsive. So I created another page with the following:
<iframe src="https://www.demandforce.com/b/burlingamesmile/schedule" width="1000" height="1500"></iframe>. How this looks can be observed here
This behaves ok. But the frame size doesn't adjust well to different screen sizes (smartphone, tablet, etc.) I have looked into this one, but it doesn't do the trick.
At this moment I am running out of ideas, so any comments/help is greatly appreciated, as always.
Thanks so much everyone.
