Display a button to open form

Hi all,
I want to begin by saying that I searched for a solution before posting, but I didn't find what I was looking for (or I didn't use the right search terms 😀 ).

My problem: I created the form (and I am really happy with how it works), but...
The form is not making the article look OK (it's no OK to always see the form on the bottom of the page).
The form is for a travel agency and it sends the data by e-mail. I want to post inside the article a button labele let's say "ask for info" and when the visitor clicks on the button, the form is displayed (slide-open or lightbox).

I want to display a button on the article page. Can this be done? If son, can someone please guide me on ow to do it and eventually the code to use?

I forgot to mention, but I think by now it's obvious that I am not familiarized with custom PHP/JavaScript so I would very much appreciate all the hep I can get.

Off topic: huge thanks to the developers. I spend a huge amount of time looking for such forms and Chronoforms is the only one that meets my needs up to now 🙂

Thank you.

Hi shadowlyx,

There's an extract from The ChronoForms Book here about putting a form in a lightbox.

Bob

Thank you for the reply, but this causes a secondary effect.
I am passing the article title in my form so if I use lightbox, the form does not retrieve the article title anymore.

Is there a way to overcome this? If I can use lightbox and get the article title in the form the it would be perfect.

Thank you.

Hi shadowlyx,

I guess you'd need to pass the article title or id as a part of the URL that calls the form.

Bob

I figured that part, but unfortunately I am very very new to PHP.

Could you please help me on this?

In the main form HTML I have this at the beginning:

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">Hotel - solicita detalii</h1>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Produs</label>
<input name="article_title" type="text" size="40" value="<?php
$database->setQuery( "SELECT title FROM #__content WHERE id='".$_GET['id']."'" );
        $title = $database->loadResult();
echo $title;
?>">
  
  </div>
  <div class="cfclear"> </div>
</div>

On the button form I have:

<?php
JHTML::_('behavior.modal');
?>
<a class="modal" href="/index.php?option=com_chronocontact&%20%20chronoformname=hotel_form_intern&tmpl=component"
  rel="{handler: 'iframe', size: {x: 700, y: 500}}"
>Solicita oferta</a>

I have two problems:
1. The page title is no longer passed into the main form field
2. The form is accessed via al link. I there any way the link could actually be a button? A button is musch more visible than a simple link.

Thank you.

Hi shadowlyx,

The code to get the article id needs to be in the button form. Then add the value of the id to the url that calls the main form.

<?php
JHTML::_('behavior.modal');
$id = JRequest::getInt('id', '', 'get');
$url = "/index.php?option=com_chronocontact&%20%20chronoformname=hotel_form_intern&tmpl=component&id=".$id;
?>
<a class="modal" href="<?php echo $url; ?>" rel="{handler: 'iframe', size: {x: 700, y: 500}}"
>Solicita oferta</a>

Then in the main form you recover the url again from the URL

<?php
$id = JRequest::getInt('id', '', 'get');
?>

If you want to use a modal form I think that you have to call it with a link - but you can make the link look like a button.

Bob

Thank you kindly for your answer.

Indeed I would rather use a button than a link, but I really don't know how to do that.
I tried but unfortunately I failed.

Can you please help me on this matter?

Thank you.

Hi shadowlyx,

Please try this:

<a href='<?php echo $url; ?>'><input type='button' name='button' value='Solicita oferta'/></a>

Bob

Hi shadowlyx & Bob,
I believe it would actually be easier to modify the selector when adding the modal-behaviour:

<?php
JHTML::_('behavior.modal', 'button.modal');
?>

The above code would add the SqueezeBox/modal event to any buttons on the page with the modal-class instead of links. You can use this with any element that supports the "onClick" event, and the selector pattern is the same as used by the $$() MooTools function.

Edit:
Forgot to add; you'll have to use the "rel" property to add an url property for element classes that don't support 'url' or 'href' properties natively, such as buttons:

<button rel="{handler: 'iframe', size: {x: 700, y: 500}, url: '/index.php?option=com_chronocontact&chronoformname=hotel_form_intern&tmpl=component'}">Click me!</button>

Edit 2:
Fixed error in previous edit. It has to be an 'url' property; href will only work with elements that natively support it (<a>), it cannot go into the rel-property.

/Fredrik

Hi Fredrik,

Nice - I haven't seen that one before :-)

Bob

Reposting a fix from another thread:

...
I just discovered there's an issue with the modal.js script where the rel-property is not properly read in a DOM fashion. This will cause an empty, white modal to be opened on some browsers, regardless of the content of the rel-attribute.
Fix follows:
Locate the fromElement function (around line 133 or so) in media/system/js/modal.js.
Edit the line accordingly:

if (this.element && this.element.rel) options = $merge(options || {}, Json.evaluate(this.element.rel));
/* Change into this */
if (this.element && this.element.getProperty('rel'))
  options = $merge(options || {}, Json.evaluate(this.element.getProperty('rel')));

/Fredrik

Hello again,

Thank you very much for your support, but unfortunately there's something wrong in what I'm doing (please don't laugh).

I have the main form code, the code from the form that opens the modal box and the actual page code. I will paste them below so that you can see what I did and maybe you can point me in the right direction.

The 2 main problems are:
1. The form is opened in a modal window as I wanted, but the subject box does not get automatically filled with the article title(I replaced the code for subject with the code from you and it didn't work). I am definitely missing something.
2. The button is not working when clicked. If I use hyperlink I can see the form, but on button click nothing happens

form caller code (form name: "oferta-extern"):

<?php
JHTML::_('behavior.modal');
$id = JRequest::getInt('id', '', 'get');
$url = "/index.php?option=com_chronocontact&%20%20chronoformname=frm_oferta_extern&tmpl=component&id=".$id;
?>
<a class="modal" href="<?php echo $url; ?>" rel="{handler: 'iframe', size: {x: 700, y: 500}}"
>Solicita oferta</a>

actual form code (form name "frm_oferta_extern"):

<div class="form_item">
  <div class="form_element cf_heading">
    <h2 class="cf_text">Cerere oferta turism extern</h2>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Subiect</label>
    <input class="cf_inputbox required" maxlength="200" size="40" title="" id="text_9" name="frm_subject" type="text" />
<?php $id = JRequest::getInt('id', '', 'get'); ?>
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Subiect :: Destinatia sau tipul ofertei solicitate</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Adresare</label>
    <select class="cf_inputbox validate-selection" id="select_10" size="1" title="Va rugam alegeti formula de adresare"  name="name_title">
    <option value="">-selectati-</option>
      <option value="Dl.">Dl.</option>
<option value="D-ra">D-ra</option>
<option value="D-na">D-na</option>

    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Adresare :: Alegeti modalitatea de adresare</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Nume si prenume</label>
    <input class="cf_inputbox required validate-alpha" maxlength="150" size="30" title="camp obligatoriu" id="text_2" name="full_name" type="text" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Nume si prenume :: Numele si prenumele dumneavoastra</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Adresa de e-mail</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="lipsa adresa de e-mail" id="text_3" name="email" type="text" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Adresa de e-mail :: Pe aceasta adresa veti primi raspunsul nostru</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Telefon mobil</label>
    <input class="cf_inputbox validate-number" maxlength="20" size="15" title="" id="text_4" name="mobile" type="text" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Telefon mobil :: Folositi numai cifre, fara alte caractere</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Orasul</label>
    <input class="cf_inputbox validate-alpha" maxlength="150" size="30" title="" id="text_12" name="city" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Detalii suplimentare</label>
    <textarea class="cf_inputbox required" rows="3" id="text_13" title="va rugam sa compeltati acest camp" cols="30" name="details"></textarea>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Detalii suplimentare :: Completati detaliile pe care le doriti cu privire la oferta curenta</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_captcha">
    <label class="cf_label" style="width: 150px;">Intorduceti codul</label>
    <span>{imageverification}</span> 
    
    </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Trimite" name="button_10" type="submit" /><input type="reset" name="reset" value="Reset"/>
  </div>
  <div class="cfclear"> </div>
</div>

and last but not least - actual page source

<p> </p>
<button rel="{handler: 'iframe', size: {x: 700, y: 500}, url: '/index.php?option=com_chronocontact&chronoformname=oferta-extern&tmpl=component'}">Click me!</button>
<p> </p>
<h3>{chronocontact}oferta-extern{/chronocontact}</h3>

Only the standard form caller works. The button is completely inert😟

this is the form:


this is the page:


Please, once again accept my apologies for asking dumb questions here, but it's my last hope to make it work. And although I just started to learn PHP, this is much more than I can understand at this point.

Thank you.

Hello again

Could anyone please help me, or did I ask such a question that it doesn't even deserve an answer? I sincerely hope not 😟

Thank you
Alex S.

Hi shadowlyx,

Nothing personal, just that long posts tend to get left until later on busy days :-(

First: the code to add the title progbably works OK - but when you open the form in the Modal box you are no longer in the article -- the modal box uses a new page in an iFrame -- so it finds nothing. You can probably pass the title in the URL.

Not sure about the modal loading, I'll try and replicate your form later and see what is happening.

Bob

Thank you so much for your answer.

I am really looking forward to your answer as I am on the edge right now. Either I make it work and my client will approve the purchase of this solution or I lose the client - all because of these two things - a button instead of a link to open the form and the ability to pass the title in the modal window. Once I pass this phase, the "nightmare" ends :wink:

If you will be able to identify a workaround I would very much appreciate it.

This issue is the one keeping me from being able to use this solution for all the forms that will be created on a customer's website.

Once again - thank you and I am looking forward for your answer.

/Alex/

Hi Shadowlyx,

Hopefully this solves at least a part of your problems.

Form HTML for oferta_extern to add the id to the URL and display a button

<?php
JHTML::_('behavior.modal');
$id = JRequest::getInt('id', '', 'get');
$url = "index.php?option=com_chronocontact&%20%20chronoformname=frm_oferta_extern&tmpl=component&id=".$id;
?>
<a class="modal" href="<?php echo $url; ?>" rel="{handler: 'iframe', size: {x: 700, y: 500}}"
><input type='button' value='Solicita oferta' name='open_form' id='open_form' /></a>

Form HTML (beginning only) for frm_oferta_extern to look up the article title from the id and include it in the Subject field.

<?php
$id = JRequest::getInt('id', '', 'get');
$db =& JFactory::getDBO();
$query = "
    SELECT `title`
        FROM `#__content`
        WHERE `id` = '$id' ;
";
$db->setQuery($query);
$title = $db->loadResult();
?>
<div class="form_item">
  <div class="form_element cf_heading">
    <h2 class="cf_text">Cerere oferta turism extern</h2>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Subiect</label>
    <input class="cf_inputbox required" maxlength="200" size="40" title="" id="text_9" name="frm_subject" type="text" value='<?php echo $title; ?>' />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
            <div class="tooltipdiv">Subiect :: Destinatia sau tipul ofertei solicitate</div>
  </div>
  <div class="cfclear"> </div>
</div>
. . .

In the article use just {chronocontact}oferta_extern{/chronocontact}

Bob

Wow! You solved it! It's exactly what I was looking for.

I cannot express my gratitude for this. I honestly cannot. You really saved me. Tonight I'll start creating all the DEMO forms for the customer 😀

Hopefully by this week I'll have the purchase approval.

My most sincere congratulations for what you are doing. You are the only one that was willing to help me implement a custom form solution. I am definitely going to use this product on all my sites.

Once again thank you and my best wishes.

I'll probably be back with more (hopefully not so "beginner") questions.

/Alex/